"자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden 키워드를 적용합니다."
예제1) div.item 태그에 float 속성을 left로 적용하고, 부모의 overflow 속성을 hidden으로 적용해 요소를 수평으로 정렬합니다. 코드를 실행하면 div.item 태그가 수평으로 정렬됩니다.
예제1 보기
예제2) overflow 속성을 왜 지정해야 하는지 간단히 비교해보자.
width 속성과 height 속성을 입력하지 않고 overflow 속성을 적용하면 자손이 차지하는 너비를 모두 감싸므로 요소 위쪽과 아래쪽에 글자가 출력됨.
overflow 속성을 적용하지 않고 실행하면 요소가 떠다니게 됨.
예제2 보기
"중앙 정렬하고 싶은 태그에 width 속성을 부여하고 margin 속성을 '0 auto'로 입력합니다."
예제3) 중앙 정렬하고 싶은 태그에 width 속성을 부여하고 'margin : 0 auto '로 입력합니다. 코드를 실행하면 body 태그에 해당하는 제목과 본문에 중앙에 위치함.
예제3 보기
"국내 모든 포털사이트의 메인 페이지는 One True 레이아웃을 사용함."
One True 레이아웃의 핵심 : 각 행을 독립적으로 구성하는 것.
이를 구현하려면 다음 규칙을 적용해 스타일시트를 작성함
1. 자손에 float 속성을 적용.
2. 부모의 overflow 속성에 hidden 을 적용함.
예제4) 중앙 정렬 레이아웃을 사용해 body 태그에 고정된 너비를 설정하고, 요소를 수평으로 정렬해야 하는 #middle의 overflow 속성에 hidden을 적용함.
마지막으로 #left와 #right에 적당한 너비를 설정하고 float 속성을 적용함.
예제4 보기