CSS float 속성과 clear:both 속성 응용

앞에서 css의 float 속성과 clear:both를 봤습니다.

CSS float속성과 clear:both 속성 알아보기

이번에는 조금더 레이아웃을 조금더 응용해서 짜보려고 합니다.

이번에 만들어 보려고 하는 레이아웃 구조입니다.

float 속성과 clear:both속성을 이용하면 어떻게 가능할 거 같기도 합니다.

한번 위의 그림처럼 만들어볼까요~~

먼저 좌측 그림처럼 만들어봅니다.

 

div red 박스를 만들고 다음 div green 박스를 만듭니다.

green 박스에 float속성과 clear:both속성을 주어서 아래에 띠웁니다.

그다음 blue와 yellow 박스를 만들고 float으로 띠웁니다.

마지막으로 black 박스를 만들고 clear:both속성으로 고정합니다.

●  html 코드  ●

<div id="wrap">

  <div class="red1">

  </div>

  <div class="green1">

  </div>

  <div class="blue1">

  </div>

  <div class="yellow1">

  </div>

  <div class="black1">

  </div>

</div>

 ●  css 소스  ●

 .red1{border:1px solid black; width:300px; height:50px; 

         background-color:red;}

  .green1{border:1px solid black; width:50px; height:200px; 

           background-color:green; clear:both; float:left;}

  .blue1{border:1px solid black; width:196px; height:200px; 

          background-color:blue; float:left; } 

  .yellow1{border:1px solid black; width:50px; height:200px; 

            background-color:yellow;float:left;}

  .black1{border:1px solid black; width:300px; height:50px; 

           background-color:black; clear:both;}

우측처럼 만들어 봅시다.

여러가지 방법이 있습니다.

먼저 전체 박스의 크기를 정합니다.

다음 black 박스를 만들고 박스크기만큼 채웁니다.

red 박스를 만들고  float속성 좌측으로 띠웁니다.

다음 green 박스를 만들고  float속성 이용하여 좌측으로 띠웁니다.

그다음 blue 박스도 float 속성을 주고 띠웁니다.

원래대로면 green 옆으로 붙어야 하나 옆의 자리가 없기때문에

(전체 크기가 지정되어있어서)

아래로 내려와 붙게 됩니다. 

yellow 박스를 만들고 float으로 띠웁니다.

역시 자리가 없어서 아래로 와서 붙습니다.

●  html 코드  ●

<div id="wrap2">

  <div class="red2">

  </div>

  <div class="green2">

  </div>

  <div class="blue2">

  </div>

  <div class="yellow2">

  </div>

  <div class="black2">

  </div>

●  css 소스  ●

  #wrap2{ width:300px; height:300px; border:1px ;}

.red2{ width:50px; height:300px; background-color:red; float:left; }

.green2{ width:200px; height:50px; background-color:green; float:left  }

.blue2{ width:200px; height:200px; background-color:blue; float:left  } 

.yellow2{width:200px; height:50px; background-color:yellow; float:left } 

.black2{ width:300px; height:300px; background-color:black;}

위와 같이 float속성을 이용할때에는 넚이 계산을 잘해야 합니다.

또한 border 의 크기도 계산해야 할때가 있으니 주의하셔야 합니다.

CSS float 속성과 clear:both 속성 다시 찾아보기