HTML & CSS 기초 - 레이아웃 만들기 1 "float"

사이트 레이아웃 디자인의 제 1원칙 : 모든 요소를 네모박스로 쪼개어 생각하시면 됩니다.

어려워보이는 레이아웃도 개별의 박스(div) 로 생각하면 쉽게 만들 수 있다고 한다 ㅎㅎ 나도 그렇게 생각한다.

호환성 좋은 "float" 속성

우리가 레이아웃을 만들 때는 박스에 크기가 딱딱 들어맞아야 하는데
박스에 크기가 안 맞아서 밀려나는 오류를 쉽게 접하게 된다.
이 때 사용하는 것이 float 속성이다.

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

#css
.left-box {
  width : 100px; 
  height : 100px;
  float : left;
} 
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
}

(참고) float 속성으로 가로정렬할 때는 위와 같이 float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해주는게 좋습니다.

float 속성은 박스를 띄워서 왼쪽/오른쪽 으로 정렬하는 속성이다.
한데 공중에 띄운다 라는 특징은 또 다른 오류를 야기하는데
float 속성을 부여한 박스 다음으로 같은 속성이 아닌 요소를 만들 경우 앞서 만든 float 박스 밑으로 깔리게 되어 요소가 보이지 않는 현상 이 발생한다.

float를 쓰고 나면 항상 clear 속성이 필요

하여 이를 해결하기 위해 있는 것이 clear 속성이다.

<div>
  <div class="left-box"></div> //float :none  속성 부여
  <div class="right-box"></div> //float : none  속성 부여
  <div class="footer"></div> // 마지막에 clear : both 속성 부여
</div>

#css  
.footer {
  clear : both
}