[html, css] 2. 레이아웃

float 속성

요소를 띄워 왼쪽/오른쪽에 정렬하는 속성

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

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

위 코드는 div 박스 2개를 왼쪽으로 정렬시킨 코드

하지만 float 속성을 사용할 경우, 그 요소를 띄우다보니 다음 html 요소가 자리를 제대로 찾지 못한다.

때문에 float 다음에는 항상 clear 속성이 필요하다.

 

clear

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

.footer {
  clear : both
}

clear 속성을 사용하면 float 다음에 오는 요소들이 제자리를 찾는다.

 

inline-block

정렬할때 사용할 수 있는 속성

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

.left-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
}
.right-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
}

간편하게 정렬할 수 있지만, 태그 사이의 공백이 있다면 공백까지도 나타내기 때문에 가로로 정렬할려면 태그 사이의 공백도 제거해야 한다.

 

셀렉터

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar li {
  display : inline-block;
}

위 처럼 공백을 이용해 태그가 li인 모든 자손에 디자인을 적용할 수 있다.

 

.navbar>li {
  display : inline-block;
}

꺽쇠괄호 > 를 이용하여 li 바로 밑의 자식들만 선택할 수도 있다.