CSS 레이아웃을 배웁시다
브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드를 만들 수 있는데, 그동안 이러한 박스 그리드를 만드는 방법은 float를 이용하는 것이었습니다. 하지만 이제 inline-block을 이용하면 만들기가 훨씬 더 쉽습니다. inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다. 두 접근법의 예제를 모두 살펴봅시다.
float를 이용).box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>저는 지금 떠 있어요!
</div>
저한테는 clear가 지정돼 있어서 위에 나열된 박스 옆으로 배치되지 않아요.
inline-block을 이용)
display 프로퍼티에 inline-block 값을 이용하면 똑같은 효과를 낼 수 있습니다.
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>저는 인라인 블록입니다!
</div>
이 경우에는 clear를 쓰지 않아도 됩니다. 멋지네요!
IE6와 IE7에서 inline-block을 지원하려면 별도의 작업을 더 해야 합니다. 때때로 inline-block이 hasLayout이라고 하는 것을 발생시킨다고 이야기하는 분들도 있지만 기존 브라우저를 지원하려면 그것에 대해서만 알면 됩니다. 더 자세한 사항이 궁금하다면 IE6와 IE7 지원에 관해 앞에서 알려준 링크를 참고하세요. 그럼 계속 진행해 봅시다.
