block
-
block 요소는 블록 레벨 요소로, 전체 가로 너비를 차지하고, 위아래에 줄바꿈이 자동으로 발생합니다.
-
항상 새 줄에서 시작하며, 가로로 전체 너비를 차지합니다.
너비(width), 높이(height), 패딩(padding), 마진(margin)을 모두 설정할 수 있습니다.
다른 블록 요소들은 새 줄에서 배치되기 때문에, 한 줄에 여러 블록 요소가 나란히 배치되지 않습니다. -
대표적인 block 요소는
<div>, <p>, <h1>, <section>등이 있습니다.
<div style="background-color: lightblue; width: 50%;">
This is a block element.
</div>이 경우, div는 블록 요소이므로 전체 가로 너비를 차지하고, 다음 요소는 자동으로 줄바꿈됩니다.
inline
-
inline 요소는 인라인 레벨 요소로, 내용물만큼의 너비만 차지하며, 줄바꿈 없이 다른 요소들과 같은 줄에 배치됩니다.
-
가로 너비는 내용물의 너비만큼만 차지합니다.
세로 방향으로는 마진과 패딩을 적용할 수 있지만, 이 값이 레이아웃에 큰 영향을 미치지 않습니다.
너비(width)와 높이(height) 속성을 적용할 수 없습니다.
다른 인라인 요소들과 함께 같은 줄에 나란히 배치됩니다. -
대표적인 inline 요소는
<span>, <a>, <strong>, <em>등이 있습니다.
<span style="background-color: lightgreen;">This is an inline element.</span>이 경우, span은 인라인 요소이므로 다른 텍스트나 요소들과 한 줄에 나란히 배치됩니다.
inline-block
-
inline-block은 인라인 요소처럼 같은 줄에 배치되지만, 블록 요소처럼 너비와 높이를 지정할 수 있는 속성입니다.
-
인라인 요소처럼 줄바꿈 없이 같은 줄에 나란히 배치됩니다.
너비(width)와 높이(height)를 설정할 수 있으며, 마진과 패딩도 적용됩니다.
<div style="display: inline-block; background-color: lightcoral; width: 100px; height: 50px;">
This is an inline-block element.
</div>이 경우, inline-block 요소는 같은 줄에 다른 요소들과 나란히 배치되지만, 너비와 높이를 지정할 수 있습니다.
차이점
| 속성 | block | inline | inline-block |
|---|---|---|---|
| 기본 배치 | 새 줄에서 시작, 전체 가로 너비를 차지 | 같은 줄에서 다른 요소와 나란히 배치 | 같은 줄에서 다른 요소와 나란히 배치 |
| 차지하는 공간 | 가로로 전체 너비 | 내용물만큼의 너비 | 내용물 또는 지정된 너비만큼 차지 |
| 줄바꿈 | 자동 줄바꿈 발생 | 줄바꿈 없음, 한 줄에 여러 개 배치 | 줄바꿈 없음, 한 줄에 여러 개 배치 |
| 너비(width)와 높이(height) | 설정 가능 | 설정 불가 | 설정 가능 |
| 패딩(padding)과 마진(margin) | 상하좌우 모두 적용됨 | 좌우는 적용되지만, 상하는 레이아웃에 영향 없음 | 상하좌우 모두 적용됨 |
- block: 전체 너비를 차지하며 각각의 요소들이 독립된 블록처럼 보여야 할 때 사용합니다. 주로 레이아웃을 잡는 컨테이너 역할을 합니다.
- inline: 텍스트와 같은 요소들 사이에 작은 내용을 표시할 때 사용하며, 한 줄에 여러 요소를 나란히 배치하고 싶을 때 적합합니다.
- inline-block: 너비와 높이를 조정할 수 있는 인라인 요소가 필요할 때 사용하며, 같은 줄에 여러 요소를 나란히 배치하면서도, 크기를 조절하고 싶을 때 유용합니다.
