display속성 - inline, inline-block, block

Luluzoe·2021년 10월 10일

display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티입니다.

모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다.
표시 값에는 block과 inline 두 가지가 있습니다.
block 과 inline 이 대부분의 엘리먼트 기본값.

Inline Elements

inline elements는 새 줄에서 시작하지 않습니다.
inline elements는 필요한 만큼만 너비를 차지합니다.
이것은 단락 내부의 span 요소 입니다.

Block-level Elements

block-level elements는 항상 새 줄에서 시작합니다.
block-level elements는 항상 사용 가능한 전체 너비를 차지합니다(최대한 왼쪽과 오른쪽으로 늘어남).
block-level elements에는 위쪽 여백과 아래쪽 여백이 있지만 inline-elements에는 없습니다.
div 요소는 block-level element입니다.

`div`는 Block-level Element.

`span`은 Inline Element.

div와 span에 크기를 지정하였습니다.
block-level element인 div는 지정한 크기만큼 내용이 없어도 block으로 출력이 되었지만, inline-element인 span은 내용물 1,2,3만큼만 inline으로 출력되었습니다.

`display` 속성 바꿔보기

위 그림을 보면 div가 출력되지 않습니다. div를 display: inline;으로 설정하여, 내용물이 없으면 출력되지 않는 inline-elements로 바꾸었기 때문입니다.

div태그에 1, 2, 3 내용물을 넣어서 그 만큼만 출력되는 것을 확인할 수 있습니다.

`display: inline-block;`

display: inline에 비해, display: inline-block의 가장 큰 차이점은 width와 height를 할당할 수 있다는 것입니다.
또한, display: inline-block에서는 margin, padding 값을 할당할 수 있습니다.
display: block과 비교할 때 가장 큰 차이점은 줄 바꿈을 하지 않고 나란히 배치할 수 있습니다.

div에 display: inline-block;으로 설정하여 나란히 배치 하였습니다.

페이지 창을 늘리면 그에 따라 일렬로 나란히 배치됩니다.