블록 레벨과 인라인 요소의 분류는 HTML 명세 4.01까지 사용되었습니다. 현재 표준 HTML에서는 콘텐츠 카테고리 집합으로 대체되었습니다.

1. div 태그와 span 태그

1.1 div 태그

<div> 태그는 division의 약자로, 웹 페이지의 레이아웃을 만들기 위해 콘텐츠를 분할하는 블록 레벨 컨테이너를 나타냅니다.

특징

블록 컨테이너 역할
웹사이트의 레이아웃을 만들 때 사용
영역을 구분 짓거나 무리를 짓는 태그
공간을 나누는 것 외에 별다른 기능이 없지만, HTML에서 가장 많이 사용되는 태그 중 하나입니다.

<div style="background-color: antiquewhite">전 div입니다</div>

<div style="background-color: antiquewhite">전 div입니다</div>

프론트엔드 개발에서는 div 태그 사용은 스타일 적용을 위한 용도로 사용할것을 권장합니다. (검색엔진 최적화, 코드 가독성, 접근성 등의 이유) header, footer, main, section, article, nav 등 다양한 의미가 있는(시멘틱한) 태그들을 사용하여 콘텐츠를 분할하고 그룹핑 합니다.

그렇다면 왜 아직도 div를 사용하는 걸까요?

오래된 웹 브라우저의 지원을 위해서 입니다
지원하지 않는 브라우저에서 레이아웃, 기능, 문서의 접근성 등의 문제가 발생할 수 있습니다.

1.2 span 태그

<span> 태그는 인라인 컨테이너로, 스타일을 적용하거나 인라인 요소를 묶는 데 사용됩니다. 본질적으로는 아무런 의미를 나타내지 않지만, 특정 텍스트나 인라인 요소에 CSS 스타일을 적용할 때 유용합니다.

<p>
  이건
  <span style="background-color: red">span</span> 태그입니다.
</p>
<p>
  이런식으로
  <span style="font-weight: bold">사용</span> 합니다.
</p>

<p>
  이건
  <span style="background-color: red">span</span> 태그입니다.
</p>
<p>
  이런식으로
  <span style="font-weight: bold">사용</span> 합니다.
</p>

2. 블록(Block) 요소

블록 요소는 부모 요소의 전체 공간을 차지하여 블록을 만드는 HTML 요소입니다. 이러한 요소는 항상 새로운 줄에서 시작하고, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

블록 요소의 특징

부모 요소의 전체 공간을 차지하여 블록을 만듭니다.
언제나 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
이전/이후 요소 사이에 줄바꿈이 일어납니다.
페이지의 구조적 요소를 나타낼 때 사용합니다.
블록 요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소 안에 중첩될 수 있습니다.

<!-- O -->
<div>
  블록요소 안
  <span>인라인요소 중첩 가능</span>
</div>
 
<!-- X -->
<span>
  인라인요소 안
  <div>블록요소 중첩 불가능</div>
</span>

<!-- O -->
<div>
  블록요소 안
  <span>인라인요소 중첩 가능</span>
</div>
 
<!-- X -->
<span>
  인라인요소 안
  <div>블록요소 중첩 불가능</div>
</span>

💡 인라인요소 중에 a 태그의 경우, 안에 블록 요소 중첩 가능합니다! <a href=”#”><div></div></a>

width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있습니다.
블록 요소는 웹 페이지의 구조를 정의하는 데 매우 중요하며, 시각적 레이아웃을 구성하는 기본 단위로 사용됩니다. 대표적인 블록 요소로는 <div>, <p>, <h1>부터 <h6>, <header>, <footer>, <section>, <article>, <nav> 등이 있습니다.

3. 인라인(Inline) 요소

인라인 요소는 항상 블록 레벨 요소 내에 포함되며, 콘텐츠의 흐름을 끊지 않고 컨텐츠에 따라 할당된 공간만 차지합니다.

인라인 요소의 특징

항상 블록 레벨 요소 내에 포함됩니다.
콘텐츠의 흐름을 끊지 않으며, 컨텐츠에 따라 할당된 공간만 차지합니다.
문장, 단어 같은 작은 부분에 대해서 적용됩니다.
새로운 줄을 만들지 않습니다.
width, height 크기를 지정할 수 없습니다.
padding, border, margin 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없습니다!
대표적인 인라인 요소: <a>, <em>, <strong>, <span> 등

4. inline-block 요소

기본적으로 인라인 요소의 속성을 따르면서 너비와 높이를 조절할 수 있습니다
- 인라인 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치
- 블록 요소처럼 너비와 높이 지정 및 margin, padding 상하 간격 지정 가능
button, input, select

block / inline / inline-block 총정리

	block	inline	inline-block
요소 포함	인라인 요소 포함 가능	블록 요소 포함 불가(a태그만 가능)	-
줄바꿈	O(세로로 쌓임)	X (가로로 쌓임)	X (가로로 쌓임)
width, height	O	X	O
padding	O	O	O
margin	O	△ (left,right만 적용 / top,bottom 적용 X)	O
border	O	O	O

HTML/CSS 에센셜

블록 레벨 요소 vs 인라인 요소