[CSS] Display와 Floats

Making Layouts - Display, Floats

display: block;

block 속성이라 height, width, margin, padding등을 적용할 수 있고 세로로 나열되며,

화면 width가 줄어도 박스 width가 변하지 않아 박스가 잘려 표현된다.

display: inline;

inline 속성이라 가로로 나열되고 최소한의 width를 가지는데, 좌우 margin이 자동으로 설정된다.

또 height 미적용으로 border가 겹치며, 화면 width가 줄면 글자 단위로 개행한다.

display: inline-block;

block과 inline이 합쳐진 형태. inline처럼 가로로 나열되고 좌우 margin이 자동으로 설정된다.

block처럼 각 박스의 height, width, margin, padding 등이 보장되기 때문에 화면 width가 줄면 박스 단위로 개행한다.

이 때 block처럼 박스 width는 그대로이며, height 덕분에 border가 겹치지 않는다.

display: flex;

flex는 조금 특이해서, 박스와 박스 내 텍스트를 별개로 둔다.

화면 width가 줄면, 박스의 width를 축소하는 한이 있어도 박스는 절대로 개행하지 않는다.

반면에 텍스트는 초과하는 글자 단위로 칼같이 개행한다.

---

(번외) float: left;

대충 보면 inline-block과 똑같아 보이는데, 좌우 자동 margin이 없다는 차이가 있다.

사실 float는 inline-block처럼 가로정렬 용도로 쓰라고 만들어진 속성이 아니다.

float는 본래 이미지와 텍스트가 어우러지게 만드는 용도다.

이렇게 이미지와 텍스트가 따로 놀 때

float:right으로 예시처럼 만들 수 있다.

아래 글에서 float에 대해 상세하게 설명해 놓았다. 영어 전문을 읽을 필요 없이 그림만 봐도 어느 정도 이해가 된다.

All About Floats | CSS-Tricks

---

참고

블록 레벨 요소 - HTML: Hypertext Markup Language | MDN

인라인 요소 - HTML: Hypertext Markup Language | MDN

float - CSS: Cascading Style Sheets | MDN