4. float 속성 -바닥부터 시작하는 CSS-

2016. 12. 8. 10:14 from COMPUTER/CSS

4. float 속성     -바닥부터 시작하는 CSS-     

 

<div> 태그를 사용해서 레이아웃을 잡을 때 가장 많이 쓰이는 것이 float 속성 입니다.

float 속성 값 중에서 가장 많이 쓰이는 것은 left와 right 둘 뿐이고 그 외에 none, inherit는 중요성이 떨어지니 지금은 개념만 익히고 지나가기로 합시다.

float을 이용한 정렬이 left, right뿐이다 보니 상하 또는 중앙 정렬 등을 block 요소에 적용시키기가 쉽지는 않습니다.

일단은 적용되는 값들을 하나씩 배워가며 알아보기로 합니다.

먼저 block 속성의 요소들은 width값을 지정해 줘도 가상의 마진 값이 존재해 가로길이의 100%를 모두 차지하게 됩니다.

예 4-1

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         width:300px;
  6.         height: 50px;
  7.         border: 1px solid;
  8.         background: yellow;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div id="div1">
  14.       1번 영역 입니다.</div>
  15.     <div id="div1">
  16.       2번 영역 입니다.</div>
  18.   </body>
  19. </html>

결과를 보면 1번 영역의 오른쪽에 공간이 남아 있지만 2 번 영역은 아래로 이동됩니다.

 

(1) left

이제 float:left를 사용해서 이 두 영역을 붙여 봅시다. float 이라는 속성은 바닥에 100%의 길이로 딱 붙어있던 영역들을 둥둥 띄워 

가상의 마진값에서 자유롭게 만듭니다.

이제 영역들은 자신이 가지고 있는 컨텐츠만큼의 크기만 가지게 되거나, width값이 설정 되었다면 width값만큼의 길이를 가지게

 됩니다.

left라는 값에 의해 영역은 왼쪽으로 붙어서 정렬됩니다.

예 4-2

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         height: 50px;
  6.         border: 1px solid;
  7.         background: yellow;
  8.         float: left;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div id="div1">
  14.       1번 영역 입니다.</div>
  15.     <div id="div1">
  16.       2번 영역 입니다.</div>
  17.     <div id="div1">
  18.       3번 영역 입니다.</div>
  19.   </body>
  20. </html>

 

(3) right

right값은 오른쪽에 부유하는 block 영역을 생성합니다. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐릅니다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.

예 4-3

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         height: 50px;
  6.         border: 1px solid;
  7.         background: yellow;
  8.         float: right;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div id="div1">
  14.       float:right : 1번 영역.</div>
  15.     <div id="div1">
  16.       float:right : 2번 영역.</div>
  17.     <div id="div1">
  18.       float:right : 3번 영역.</div>
  19.   </body>
  20. </html>

 

 

(3) none - block 요소의 기본 값입니다.

(4) inherit - 요소를 감싸는 바깥 요소에서 float 속성을 상속받습니다.

 

(5) 중앙정렬 - 이것은 float 속성을 사용하는 게 아니라 margin 속성을 사용합니다.

div {margin: auto;}

마진에 auto값을 주면 해당 요소의 좌우 마진값을 자동으로 같게 만들어 주기 때문에 div 요소는 화면의 가로줄 중앙에 오게 됩니다.

예 4-4

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         padding: 10px;
  6.         border: 1px solid;
  7.         background: yellow;
  8.         margin: 0 auto;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div id="div1">
  14.       div를 중앙에 정렬하기.</div>
  15.   </body>
  16. </html>

위에서 보는 것과 같이 <div>와 같은 block 요소는 어차피 가로 길이의 100%를 차지하기 때문에 width값을 줄여 주지 않으면 

중앙정렬의 의미가 없겠지요.

예 4-5

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         width: 170px;
  6.         padding: 10px;
  7.         border: 1px solid;
  8.         background: yellow;
  9.         margin:auto;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div id="div1">
  15.       div를 중앙에 정렬하기.</div>
  16.   </body>
  17. </html>


위와 같이 width 값을 줄여 보면 <div>가 중앙에 정렬된 것을 쉽게 알 수 있습니다.

하지만 마진 값에 의해 여전히 가로 길이의 100%를 차지한 거나 다름이 없답니다.

예 4-6

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         width: 400px;
  6.         padding: 10px;
  7.         border: 1px solid;
  8.         background: yellow;
  9.         margin: auto;
  10.       }
  11.       #div2 {
  12.         width: 130px;
  13.         padding: 10px;
  14.         border: 1px solid;
  15.         background: pink;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div id="div1">
  22.       div를 중앙에 정렬하기.</div>
  23.     <div id="div2">
  24.       두 번째 div 영역.</div>
  25.   </body>
  26. </html>

위와 같이 두 번째 영역이 작아도 노란 영역의 옆으로 붙질 않고 아래로 내려가는 것을 볼 수 있죠? 첫 번째 노란 영역이 외관상 

여분이 있어 보여도 보이지않는 마진 때문에 두 번째 영역이 아래로 내려가는 겁니다.

 

자. 이제 첫 번째 영역에만 float:left속성을 붙이고 두 번째는 아무 것도 붙이지 않겠습니다.

예 4-7

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         width: 150px;
  6.         padding: 10px;
  7.         border: 1px solid;
  8.         background: yellow;
  9.         float: left;
  10.       }
  11.       #div2 {
  12.         height: 100px;
  13.         padding: 10px;
  14.         border: 1px solid;
  15.         background: pink;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div id="div1">
  22.       float: left 속성의 div.</div>
  23.     <div id="div2">
  24.       float 속성이 없는 div.</div>
  25.   </body>
  26. </html>

결과를 보면 두 번째 핑크영역은 첫 번째 노란영역이 없는 것같이 왼쪽에 붙어 버립니다.

첫 번째 영역이 float 속성으로 인해 붕 떠버렸으니까 이런 현상이 일어난 것이죠.

하지만 두 번째 영역 안에 있는 내용은 paddingr값을 10px를 주었음에도 불구하고 첫 번째 영역에 딱 붙어서 출력이 됩니다.

이와 같이 float 속성이 있는 요소와 없는 요소를 섞어서 사용하다 보면 예기치 않게 레이아웃이 깨지는 현상이 발생합니다.

이런 경우에는 float 속성이 없는 두 번째 영역에 overflow:hidden; 속성을 지정해서 해결하는 방법이 있습니다.

예 4-8

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         width: 150px;
  6.         padding: 10px;
  7.         border: 1px solid;
  8.         background: yellow;
  9.         float: left;
  10.       }
  11.       #div2 {
  12.         height: 100px;
  13.         padding: 10px;
  14.         border: 1px solid;
  15.         background: pink;
  16.         overflow: hidden;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div id="div1">
  22.       float: left; 속성의 div.</div>
  23.     <div id="div2">
  24.       overflow: hidden; 속성의 div.</div>
  25.   </body>
  26. </html>

결과를 보면 두 번째 영역에 float:left 속성을 준 것과 같이 첫 영역의 끝에서 부터 출력이 되었고 내용도 padding값이 적용된 것을 

알 수 있습니다.

본래 overflow: hidden 속성은, 내용물이 영역보다 클 경우, 넘치는 부분을 안보이게 하는 역할을 하는데, 여기서는 float 속성이 

없어서 제대로 표현되지 못하는 객체를 제대로 보여줍니다.

다른 점은 두 번째 영역의 크기는 float 속성의 영향을 받지 않았기 때문에 가로줄 끝까지의 길이를 다 차지한다는 것입니다.

float을 선언하지 않고 나머지 공간을 모두 채우든지, 아니면 float을 선언해서 최소 너비로 사용하든지는 자신이 원하는 레이아웃의 

구조에 따라 맞추어야 합니다.

 

6) clear 속성

float 속성과 함께 따라다니는 속성 중에 clear 속성이란 것이 있는데 이것은 float 속성을 해제하기 위한 속성으로 다음의 5 가지 값이 있습니다.

 

1. clear: left;

left값이 적용된 clear속성을 가지는 요소(element)는 float속성 값이 left인 요소(element)의 아래에 배치된다는 것을 의미합니다.

아래의 예에서는 두 개의 <div>영역이 옆으로 나란히 배치된 후 세 번째 <div>영역은 float 속성이 해제된 채 아래로 내려가서 배치되는 형식입니다.

예 4-9

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         width: 200px;
  6.         height: 200px;
  7.         padding: 10px;
  8.         border: 1px solid;
  9.         background: cyan;
  10.         float: left;
  11.       }
  12.       #div2 {
  13.         width: 50px;
  14.         height: 200px;
  15.         padding: 10px;
  16.         border: 1px solid;
  17.         background: pink;
  18.         float: left;
  19.       }
  20.       #div3 {
  21.         width: 252px;
  22.         height: 30px;
  23.         padding: 20px;
  24.         border: 1px solid;
  25.         background: yellow;
  26.         clear: left;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div id="div1">
  32.       float: left; 1 영역.</div>
  33.     <div id="div2">
  34.       float: left; 2 영역.</div>
  35.     <div id="div3">
  36.       clear: left; 3 영역.</div>
  37.   </body>
  38. </html>

1, 2 영역에 각각 padding이 10px씩 적용되었으니 3 영역에는 padding을 20px로 하고 border가 1, 2 영역이 맞닿는 경계면에서 2px가 자리를 차지하고 있으니까 3 영역에는 width값을 2px 더해주어서 길이를 맞추었습니다.

 

2. clear: right;

right 값이 적용된 clear속성은 left 속성의 반대입니다.

예 4-10

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         width: 200px;
  6.         height: 200px;
  7.         padding: 10px;
  8.         border: 1px solid;
  9.         background: cyan;
  10.         float: right;
  11.       }
  12.       #div2 {
  13.         width: 50px;
  14.         height: 200px;
  15.         padding: 10px;
  16.         border: 1px solid;
  17.         background: pink;
  18.         float: right;
  19.       }
  20.       #div3 {
  21.         width: 252px;
  22.         height: 30px;
  23.         padding: 20px;
  24.         border: 1px solid;
  25.         background: yellow;
  26.         clear: right;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div id="div1">
  32.       float: right; 1 영역.</div>
  33.     <div id="div2">
  34.       float: right; 2 영역.</div>
  35.     <div id="div3">
  36.       clear: right; 3 영역.</div>
  37.   </body>
  38. </html>

1, 2 영역은 화면의 오른쪽에서부터 출력이 되고 3 영역은 1, 2영역의 아래에 배치된다. float 속성이 clear되었으므로 기본적인 

block 속성을 회복하였기 때문에 왼쪽에 붙어서 출력되고 보이지 않는 마진값으로 화면의 가로길이를 다 차지하게 된다.

 

3. clear: both;

both는 left/right 둘 중 어느 float 속성을 만나더라도 아래에 배치된다는 것을 의미합니다.

pop-uptext
  1. 예 4-11
  2. <html>
  3.   <head>
  4.     <style>
  5.       #div1 {
  6.         width: 200px;
  7.         height: 200px;
  8.         padding: 10px;
  9.         border: 1px solid;
  10.         background: cyan;
  11.         float: left;
  12.       }
  13.       #div2 {
  14.         width: 50px;
  15.         height: 200px;
  16.         padding: 10px;
  17.         border: 1px solid;
  18.         background: pink;
  19.         float: right;
  20.       }
  21.       #div3 {
  22.         width: 252px;
  23.         height: 30px;
  24.         padding: 20px;
  25.         border: 1px solid;
  26.         background: yellow;
  27.         clear: both;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div id="div1">
  33.       float: left; 1 영역.</div>
  34.     <div id="div2">
  35.       float: right; 2 영역.</div>
  36.     <div id="div3">
  37.       clear: both; 3 영역.</div>
  38.   </body>
  39. </html>

1, 2 영역은 화면의 좌우에 출력되고 3 영역은 그 아래 왼쪽에 붙어서 출력됩니다.

 

4. clear: none; 기본 값.

5. clear: inherit; 부모 요소의 clear 속성을 상속 받음.

 

※ float 속성을 사용한 배치 방법

하나의 적절한 레이아웃을 만들 때에는 float 속성만으로는 부족하고 그 외에도 여러가지 속성들을 복합적으로 사용해야 제대로 된 

레이아웃을 작성할 수 있습니다.

많이 사용되는 방법으로는 <div>태그 안에 <div>태그를 하나 이상 넣어서 사용하는 것입니다.

앞서 공부한 것처럼 <div>는 중앙 정렬이 까다롭기 때문에 먼저 포장용 영역을 하나 만들어서 화면 가운데에 정열을 시키고 그 안에 header, container, footer 등을 담을 <div>를 넣습니다. 

컨텐츠나 사이드가 들어 갈 container에는 적당한 width값을 가진 두 개의 <div>태그를 float 속성으로 정렬해서 

레이아웃을 완성 시키면 됩니다.

그럼 포장용 <div>안에 float 속성을 가진 두 개의 <div>가 들어간 예를 봅시다.

pop-uptext
  1. 예 4-12
  2. <html>
  3.   <head>
  4.     <style>
  5.       #container {
  6.         padding: 10px;
  7.         border: 2px solid;
  8.         background: cyan;
  9.         text-align: center;
  10.       }
  11.       #side {
  12.         float: left;
  13.         width: 20%;
  14.         padding: 10px;
  15.         border: 2px solid;
  16.         background: pink;
  17.       }
  18.       #content {
  19.         float: right;
  20.         width: 65%;
  21.         margin: 0 0 10px;
  22.         padding: 10px;
  23.         border: 2px solid;
  24.         background: yellow;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div id="container">
  30.       <p>float 속성이 없는 포장 영역</p>
  31.       <div id="side">
  32.         float:left; 사이드 영역
  33.       </div>
  34.       <div id="content">
  35.         float:right; 콘텐츠 영역
  36.       </div>
  37.     </div>
  38.   </body>
  39. </html>

float 속성이 없는 포장 영역 안에 float 속성을 가진 요소들을 집어넣으면 포장 영역의 높이는 그 안의 요소들에 맞추어 늘어나지 않기 때문에 위와 같이 포장 영역을 빠져나와서 레이아웃을 깨뜨리는 현상이 일어납니다.

이런 현상을 방지하는 몇 가지 방법을 알아보겠습니다.

 

i. 부모인 포장 영역에도 float 속성을 적용시키는 방법.

포장 영역에 float 속성을 적용하면 내부 자식 요소의 높이에 따라 포장 영역의 높이도 바뀝니다.

하지만 포장 영역의 가로길이는 내부 요소를 담을 만큼만의 크기로 줄어듭니다.

또 포장 영역의 크기가 가변적이라면 적용하기 어렵다는 단점이 있습니다.

포장 영역의 외부에 조상 요소가 겹겹이 존재한다면 그 모든 조상 요소들에 모두 float 속성을 적용해야 한다는 문제가 있어 그다지 

권장하는 방법은 아닙니다.

pop-uptext
  1. 예 4-13
  2. <html>
  3.   <head>
  4.     <style>
  5.       #container {
  6.         float: left;
  7.         padding: 10px;
  8.         border: 2px solid;
  9.         background: cyan;
  10.         text-align: center;
  11.       }
  12.       #side {
  13.         float: left;
  14.         width: 20%;
  15.         padding: 10px;
  16.         border: 2px solid;
  17.         background: pink;
  18.       }
  19.       #content {
  20.         float: right;
  21.         width: 65%;
  22.         margin: 0 0 10px;
  23.         padding: 10px;
  24.         border: 2px solid;
  25.         background: yellow;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div id="container">
  31.       <p>float: left; 포장 영역</p>
  32.       <div id="side">
  33.         float: left; 사이드 영역
  34.       </div>
  35.       <div id="content">
  36.         float: right; 콘텐츠 영역
  37.       </div>
  38.     </div>
  39.   </body>
  40. </html>

 

ii. float에 overflow 속성으로 대응하는 방법

두 번째로는 포장 영역에 overflow:auto 또는 overflow:hidden 속성을 부여하는 방법이 있습니다. 

overflow:auto 속성은 자식 요소의 길이가 가변적이고 부모 요소의 길이보다 커지는 상황이 발생할 때 가로 스크롤바를 

유발하기 때문에 일반적으로 권장하는 방식이 아닙니다. 

overflow:hidden 속성은 그러한 상황에서 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 넘치는 부분이 

잘리기 때문에 이 역시 완전하게 안전한 방법은 아닙니다.

pop-uptext
  1. 예 4-14
  2. <html>
  3.   <head>
  4.     <style>
  5.       #container {
  6.         overflow: hidden;
  7.         padding: 10px;
  8.         border: 2px solid;
  9.         background: cyan;
  10.         text-align: center;
  11.       }
  12.       #side {
  13.         float: left;
  14.         width: 20%;
  15.         padding: 10px;
  16.         border: 2px solid;
  17.         background: pink;
  18.       }
  19.       #content {
  20.         float: right;
  21.         width: 65%;
  22.         margin: 0 0 10px;
  23.         padding: 10px;
  24.         border: 2px solid;
  25.         background: yellow;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div id="container">
  31.       <p>overflow:hidden; 포장 영역</p>
  32.       <div id="side">
  33.         float:left; 사이드 영역
  34.       </div>
  35.       <div id="content">
  36.         float:right; 콘텐츠 영역
  37.       </div>
  38.     </div>
  39.   </body>
  40. </html>

See the Pen CSS 4-14 by byungchoo (@byungchoo) on CodePen.

 

iii. float을 빈 요소로 clear 하는 방법

이 방법은 포장 영역의 끝부분에 빈 요소를 넣고 그 요소에 clear:both 속성을 부여하여 부모 요소가 자식의 높이를 

인식하도록 하는 방법입니다.

하지만 불필요한 빈 요소를 사용하기 때문에 이것도 추천할 만한 방법은 아닙니다. 빈 요소에는 {clear:both;}, {height:0; overflow:hidden;}등과 같이 값을 주어 보이지 않게 처리합니다. 

아래는 id명 empty인 빈 요소에 clear:both; 속성을 적용시켜 포장 영역의 맨 밑에 집어넣은 예제입니다.

pop-uptext
  1. 예 4-15
  2. <html>
  3.   <head>
  4.     <style>
  5.       #container {
  6.         padding: 10px;
  7.         border: 2px solid;
  8.         background: cyan;
  9.         text-align: center;
  10.       }
  11.       #side {
  12.         float: left;
  13.         width: 20%;
  14.         padding: 10px;
  15.         border: 2px solid;
  16.         background: pink;
  17.       }
  18.       #content {
  19.         float: right;
  20.         width: 65%;
  21.         margin: 0 0 10px;
  22.         padding: 10px;
  23.         border: 2px solid;
  24.         background: yellow;
  25.       }
  26.       #empty {
  27.         clear: both;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div id="container">
  33.       <p>clear:both; 속성을 가진 요소를 포함한 포장 영역</p>
  34.       <div id="side">
  35.         float:left; 사이드 영역
  36.       </div>
  37.       <div id="content">
  38.         float:right; 콘텐츠 영역
  39.       </div>
  40.       <div id="empty"></div>
  41.     </div>
  42.   </body>
  43. </html>

 

vi. float을 가상 선택자 :after로 clear 하는 방법

가장 추천하는 방법 입니다. 우선 ‘가상 선택자‘라는 개념을 잠시 짚고 넘어가겠습니다.

‘가상 선택자’는 다시 ‘가상 클래스‘와 ‘가상 엘리먼트‘로 구분할 수 있는데 :link, :visited, :hover, :active, :focus, :first-child가 

가상 클래스에 해당됩니다.

‘가상 엘리먼트‘란, 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자로서 :first-line, :first-letter, :before, :after가 있습니다.

:before와 :after는 HTML문서 상에 존재하지 않는 콘텐츠를 출력시킬 수도 있습니다.

#container:after {content:" "}와 같은 코드를 CSS에서 작성하면 #container안의 맨 끝부분에 내용이 없는 가상의 엘리먼트가 

생성되는데 여기에 display:block; clear:both; 등의 처리를 추가하면 불필요한 빈 요소를 사용하지 않으면서도 가상의 요소를

 이용하여 깔끔하게 float이 clear됩니다.

pop-uptext
  1. 예 4-16
  2. <html>
  3.   <head>
  4.     <style>
  5.       #container {
  6.         padding: 10px;
  7.         border: 2px solid;
  8.         background: cyan;
  9.         text-align: center;
  10.       }
  11.       #container:after {
  12.         content: "이 영역은 container:after에 의해 만들어진 영역입니다.";
  13.         display: block;
  14.         clear: both;
  15.         padding: 10px;
  16.         border: 2px dashed #000;
  17.         /* height:0; visibility:hidden; */
  18.       }
  19.       #side {
  20.         float: left;
  21.         width: 20%;
  22.         padding: 10px;
  23.         border: 2px solid;
  24.         background: pink;
  25.       }
  26.       #content {
  27.         float: right;
  28.         width: 65%;
  29.         margin: 0 0 10px;
  30.         padding: 10px;
  31.         border: 2px solid;
  32.         background: yellow;
  33.       }
  34.       #empty {
  35.         clear: both;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div id="container">
  41.       <p>float 속성이 없는 포장 영역</p>
  42.       <div id="side">
  43.         float:left; 사이드 영역
  44.       </div>
  45.       <div id="content">
  46.         float:right; 콘텐츠 영역
  47.       </div>
  48.     </div>
  49.   </body>
  50. </html>

 

위에서 가상 요소가 화면에 보이지 않도록 하려면 content의 값을 주지 않으면 됩니다.

#container:after {content:" "; display:block; clear:both;}

IE8 이전 버전에서는 :before, :after 가상 엘리먼트 선택자를 지원하지 않으므로 다음과 같이 Hack을 사용합니다.

#container {*zoom:1;} /* IE5.5~7 대응 Hack */

 

zoom:1 속성은 IE 5~7 브라우저에 hasLayout이라는 고유한 성질을 갖도록 합니다. 이 성질은 float을 해제하는 트리거로 

작용하는 성질이 있기 때문에 IE 5~7 브라우저 고유의 특징을 이용한 해결방법인 것입니다.

 

v. float을 display:inline-block 으로 clear 하는 방법

마지막으로 소개하는 방법은 포장 영역에 display:inline-block 속성을 지정하는 방법입니다.

inline-block 속성이 부여된 요소는 float된 자식 요소의 높이만큼 늘어납니다. 

모든 브라우저가 동일하게 float을 해제하는 방향으로 작용합니다. 단, 표준계열 브라우저들은 부모 요소의 너비가 자식의 너비만큼 

알맞게 줄어들지만 IE 6~7 브라우저는 100%의 너비를 갖게 되는 특징이 있습니다. 

또한 inline-block 속성을 갖게 된 요소는 인라인 요소와 마찬가지로 박스가 끝나는 지점에 약 4px 정도의 공백을 갖게 되므로 

부득이하게 이 방법으로 레이아웃을 만들 때에는 참고하시기 바랍니다.

pop-uptext
  1. 예 4-17
  2. <html>
  3.   <head>
  4.     <style>
  5.       #container {
  6.         display: inline-block;
  7.         padding: 10px;
  8.         border: 2px solid;
  9.         background: cyan;
  10.         text-align: center;
  11.       }
  12.       #side {
  13.         float: left;
  14.         width: 20%;
  15.         padding: 10px;
  16.         border: 2px solid;
  17.         background: pink;
  18.       }
  19.       #content {
  20.         float: right;
  21.         width: 65%;
  22.         margin: 0 0 10px;
  23.         padding: 10px;
  24.         border: 2px solid;
  25.         background: yellow;
  26.       }
  27.       #empty {
  28.         clear: both;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div id="container">
  34.       <p>display: inline-block; 포장 영역</p>
  35.       <div id="side">
  36.         float:left; 사이드 영역
  37.       </div>
  38.       <div id="content">
  39.         float:right; 콘텐츠 영역
  40.       </div>
  41.     </div>
  42.   </body>
  43. </html>

 

좌우 양쪽에 사이드바가 있고 가운데에는 윈도우의 크기에 따라 유동적으로 변하는 컨텐츠 부분이 배치된 형태의 레이아웃을 만들 경우 고려해야 할 점.

 

크기가 유동적으로 변하는 영역은 float 속성을 선언하면 안됩니다.

HTML에서 float 속성이 없는 영역의 다음에 오는 영역은 무조건 한 줄이 떨어지게 되므로 맨 마지막에 위치 시켜야 합니다.

float 속성이 없는 마지막 영역에는 overflow: hidden 속성을 선언해야 합니다.

pop-uptext
  1. 예 4-18
  2. <html>
  3.   <head>
  4.     <style>
  5.       .box1 {
  6.         float: left;
  7.         margin-right: 10px;
  8.         padding: 20px;
  9.         background-color: cyan;
  10.       }
  11.       .box2 {
  12.         float: right;
  13.         margin-left: 10px;
  14.         background-color: lime;
  15.         padding: 20px;
  16.       }
  17.       .box3 {
  18.         overflow: hidden;
  19.         margin-left: 10px;
  20.         padding: 20px;
  21.         background-color: gold;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div class="box1">box1</div>
  27.     <div class="box2">box2</div>
  28.     <!-- float 속성이 없는 영역을 맨 아래에 배치시킨다 -->
  29.     <div class="box3">box3</div>
  30.   </body>
  31. </html>

 

이상으로 float 속성에 대해서 알아보았습니다. 이 정도가 기본적으로 알고 있어야 할 내용이지만 레이아웃을 만들다보면 

float 속성만으로는 해결하기 힘든 문제들이 여전히 많다는 것을 깨달을 것입니다.

그런 문제들은 앞으로 계속해서 다루어 나가겠지만 일단은 여기서 마무리하고 다음에는 position 속성에 대해 알아 보겠습니다.

 


저작자표시 비영리 변경금지

'COMPUTER > CSS' 카테고리의 다른 글

6. margin, padding, border 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.30
5. position 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.24
CSS의 절대단위와 상대단위 -막간학습-  (0) 2016.12.07
display 속성의 table계열 속성 값 -막간학습-  (0) 2016.12.04
3. display 속성 -바닥부터 시작하는 CSS-  (0) 2016.11.20
Posted by star story :

티스토리툴바

Snippet :: Code View :: "+location.href+' 
'+b+"

티스토리툴바

");top.consoleRef.document.close()}$(".snippet-container").each(function(b){$(this).find("a.snippet-text").click(function(){var d=$(this).parents(".snippet-wrap").find(".snippet-formatted");var c=$(this).parents(".snippet-wrap").find(".snippet-textonly");d.toggle();c.toggle();if(c.is(":visible")){$(this).html("html")}else{$(this).html("text")}return false});$(this).find("a.snippet-window").click(function(){var c=$(this).parents(".snippet-wrap").find(".snippet-textonly").html();a(c);$(this).blur();return false})});$(".snippet-toggle").each(function(b){$(this).click(function(){$(this).parents(".snippet-container").find(".snippet-wrap").toggle()})})});