CSS 속성설명 word-break, float, clear

IT공부방/HTML5, CSS

by 동해둘리 2016. 7. 21. 17:40

1. word-break

출처 : http://itrooms.tistory.com/190

#title1 { width:190px;height:auto;border:1px solid #000000;word-break:keep-all; }

#title2 { width:190px;height:auto;border:1px solid #000000;word-break:break-all; }

</style>

<br />

keep-all : 단어 단위로 줄넘김을 해준다.

break-all : 한 글자 단위로 줄넘김을 해준다.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세

2. float , clear 속성

출처 : http://mainia.tistory.com/3119

float 을 이용하여 배치를 할때, 컨테이너 안에 float 이 적용된 태그가 있을 경우, 그 태그의 높이값이 반영이 안되기 때문에,

다음에 오는 태그가 컨테이너 중간에 걸쳐지는 현상이 생긴다. 이럴경우, clear 속성을 사용해 주면, 그 이전의 float 속성이

적용된 태그의 높이값이 제대로 인신되게 된다.

<!DOCTYPE HTML>

<html>

<head>

<meta charset="euc-kr">

<title>CSS 속성</title>

<style type="text/css">

    body {

        background-color: #e7e7e7;

}

    #con #float1 {

        float:left; 

        width: 150px; height: 100px; 

        background-color: #F9F249;

        padding: 10px;

}

    #con #float2 {

        float:left; 

        width: 150px; height: 50px; 

        background-color: #69F354;

        padding: 10px;

}

    #last {

        width: 200px; height: 120px; 

        background-color: #36FFFF;

        padding: 10px;

}

</style>

</head>

<body>

    <div id="con">

        <div id="float1">clear example 1</div>

        <div id="float2">clear example 2</div>

    </div>

    <div id="last">clear example 3</div>

</body>

</html>

위의 코드처럼, clear 속성이 적용되지 않은 경우는 clear example 1, 2 의 높이값이 무시되기 때문에, example3 이 1,2와 겹쳐지게 된다.

CSS 속성

clear example 1

clear example 2

clear example 3

<!DOCTYPE HTML>

<html>

<head>

<meta charset="euc-kr">

<title>CSS 속성</title>

<style type="text/css">

    body {

        background-color: #e7e7e7;

}

    #con #float1 {

        float:left; 

        width: 150px; height: 100px; 

        background-color: #F9F249;

        padding: 10px;

}

    #con #float2 {

        float:left; 

        width: 150px; height: 50px; 

        background-color: #69F354;

        padding: 10px;

}

    #last {

        width: 200px; height: 120px; 

        background-color: #36FFFF;

        padding: 10px;

}

    #clear1 {clear:both;}

</style>

</head>

<body>

    <div id="con">

        <div id="float1">clear example 1</div>

        <div id="float2">clear example 2</div>

    </div>

    <div id="clear1"></div>

    <div id="last">clear example 3</div>

</body>

</html>

clear 속성을 적용하게 되면, 아래와 같이 높이값이 정상적으로 인지되게 된다.

CSS 속성

clear example 1

clear example 2

clear example 3

JavaScript HTML DOM EventListener 이벤트 리스너, 버블링, 캡처링 (0)	2016.07.25
HTML DOM 함수 createElement(), appendChild() createTextNode() (0)	2016.07.25
CSS 의 transform 함수 이해하기 transform-origin / translate / skew/ rotate (0)	2016.07.21
CSS 의 display 속성, inline / block / none / inline-block / table (0)	2016.07.21
position , z-index 사용법 정리 (0)	2016.07.21

동해둘리의 IT Study