c13. CSS 플로우트와 인라인-블록의 차이

CSS 플로우트와 인라인-블록의 차이

브라우저 너비에 따라 배치가 바뀌는 상자들

브라우저 너비에 따라 배치가 바뀌는 상자들

브라우저 너비에 따라 배치가 바뀌는 상자들

브라우저 너비에 따라 배치가 바뀌는 상자들

브라우저 너비에 따라 배치가 바뀌는 상자들

브라우저 너비에 따라 배치가 바뀌는 상자들

브라우저 너비에 따라 배치가 바뀌는 상자들

브라우저 너비에 따라 배치가 바뀌는 상자들

브라우저 너비에 따라 배치가 바뀌는 상자들

그 다음에 올 div 영역에서는 inline-block; 을 사용한 경우, clear: left; 를 해 줄 필요가 없습니다.

인라인-블록 (inline-block) 을 플로우트 (float) 대신 사용하면 좀더 편리합니다. 클리어 (clear) 를 하지 않아도 되기 때문입니다.

그리드 (격자) 형태로 배치된 박스들은 지금까지는 플로우트 속성을 사용하여, 브라우저의 폭에 맞게 채워 왔었습니다.

그런데, 디스플레이 속성 (display property) 의 인라인-블록 (inline-block) 을 지정하면, 브라우저 사이즈가 조정될 때 좀더 쉽게 플로우팅 되게 할 수 있습니다.

inline-block 태그는 inline 태그와 같은데 단지 폭과 높이를 갖는 블록에 적용된다는 것만 다릅니다.

<style>
.inline-block1 {
display: inline-block;
/*float: left; 대신에 display: inline-block;이 들어갔습니다.*/
width: 150px;
height: 75px;
margin: 10px;
border: 10px dotted pink;
}
.after-box {
/*display: inline-block; 에서는 clear: left; 를 해줄 필요가 없습니다.*/
border: 10px dotted green;
}
</style>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="inline-block1">브라우저 너비에 따라 배치가 바뀌는 상자들</div>
<div class="after-box">그 다음에 올 div 영역에서는 inline-block; 을 사용한 경우, clear: left; 를 해 줄 필요가 없습니다.</div>

---

[광고] Udemy 동영상 강의로 보기