display 속성은 가장 중요한 CSS 속성 중 하나로, 요소를 어떻게 배치할지를 결정한다.
모든 요소는 기본 display 속성을 가지는데 그 중 대표적인 값이 block 과 inline 이다. 이 두 속성의 특징을 동시에 가지는 inline-block 속성도 있는데, 이렇게 3가지 속성이 CSS에서 가장 많이 사용된다. 이 포스팅에서는 block, inline, inline-block에 대해서 정리한다.
display 속성 – block, inline 특징 및 차이점
아래 그림을 보면 두 속성의 차이점에 대해서 쉽게 이해할 수 있다.
블록 요소 (block elements)
block
block
block
block
block 요소는 라인 하나 전체를 다 차지한다. inline 요소는 컨텐츠 너비(그림에서는 inline 이라는 텍스트 사이즈) 만큼을 차지하며 라인 하나에 여러 요소가 배치 될 수 있다.
또한 block 요소는 inline 요소를 컨텐츠로 가질 수 있지만, inline 요소는 block 요소를 가질 수 없다. 대표적인 block 요소로 div 태그가, inline 요소로는 span 태그가 있다. div안에 span을 넣을 수 있지만 span 안에 div를 넣지 않는다는 점을 생각해보면 쉽게 이해할 수 있다.
정리 – block vs. inline 차이점
| 속성 별 특징 | block | inline |
|---|---|---|
| 줄바꿈 | 줄바꿈 O. 새로운 라인에서 시작한다 | 줄바꿈 X. 새로운 라인에서 시작하지 않는다. 어디에서나 시작할 수 있다. |
| 요소 너비 | 사용 가능한 전체 너비를 차지한다 | 컨텐츠 너비 만큼의 너비를 차지한다 |
| 높이 및 너비 | 높이(height)과 너비(width) 크기 설정 가능 | 높이(height)와 너비(width) 설정 불가능. 컨텐츠 만큼의 크기를 차지하기 때문 |
| 상하 마진 | 상하 마진(margin-top, margin-bottom)을 가질 수 있다 | 상하 마진(margin-top, margin-bottom)을 가질 수 없다. 좌우 마진만 가능 |
| 컨텐츠 | inline, block 요소를 컨텐츠로 가질 수 있다 | block 요소를 컨텐츠로 가질 수 없다. (데이터 또는 inline 요소만 가능) |
| 대표적인 요소 | div, p, h1~h6, ul, ol | span, a, small, big, strong |
코드 예제 – block 속성 vs inline 속성
display 속성에 따라 요소가 어떻게 배치되는지 확인하기 위해 요소의 배경색을 색칠해보았다.
HTML – inline 속성 확인 (span 태그)
<div> span은 <span class="colored"> inline 요소 </span> 입니다. inline 요소의 특성을 나타내기 위해 요소 배경을 색칠했습니다. </div>
HTML – block 속성 확인 (p 태그)
<div> p는 <p class="colored"> block 요소 </p>입니다. block 요소의 특성을 나타내기 위해 요소 배경을 색칠했습니다. </div>
CSS
.colored{
background-color: #FFFF66;
}결과
block 요소
입니다. block 요소의 특성을 나타내기 위해 요소 배경을 색칠했습니다.span 태그는 줄 바꿈 없이 배치되며 내부 텍스트 사이즈만큼의 너비를 차지한다. 반면 block 속성인 p 태그는 새로운 줄에 배치되었고 한 줄만큼의 너비를 차지한다.
inline-block
inline-block 속성은 inline과 block 속성의 특징을 함께 갖는다.
- 줄 바꿈 없이 한 줄에 다른 요소들과 배치 가능 (inline 속성)
- width, height, margin-top, margin-bottom 설정 가능 (block 속성)
div, p 등 block 요소를 한 줄에 여러 개 배치하고 싶을 때 자주 사용된다.
코드 예제. inline-block 속성 사용하여 div를 한 줄에 배치하기
[display: inline-block 적용 전]<div class="div-parents"> <div class="div-children"> children div 1 </div> <div class="div-children"> children div 2 </div> <div class="div-children"> children div 3 </div> </div>
.div-parents{
border: solid 1px gray;
padding: 10px;
background-color: #d3cec2;
}
.div-children{
display:inline-block; /* inline-block 속성을 적용해 한 줄에 배치*/
width: 80px;
height: 80px;
border: solid 1px gray;
background-color: #ecd554;
}