블록 요소와 인라인 요소

HTML 태그를 쓰다 보면 어떤 태그는 항상 새 줄에서 시작하고, 어떤 태그는 글자 옆에 붙어서 따라온다. 이 차이는 CSS를 배우기 전에 꼭 짚고 가야 한다. 레이아웃을 이해하는 기초가 되기 때문이다.

---

블록 요소 (Block Element)

가로 전체를 차지하고, 앞뒤로 줄바꿈이 생기는 요소다. 항상 새 줄에서 시작한다.

<div>첫 번째 div</div>
<div>두 번째 div</div>
<p>문단입니다</p>

위 코드는 세 줄로 렌더링된다. <div>, <p>, <h1>~<h6>, <ul>, <ol>, <table>, <form>, <header>, <main>, <section> 등이 블록 요소다.

---

인라인 요소 (Inline Element)

내용만큼만 너비를 차지하고, 줄바꿈 없이 옆으로 나란히 배치되는 요소다.

<span>첫 번째</span>
<span>두 번째</span>
<span>세 번째</span>

위 코드는 한 줄에 이어서 표시된다. <span>, <a>, <strong>, <em>, <img>, <input>, <label> 등이 인라인 요소다.

---

두 요소의 차이 비교

<!-- 블록 요소 — 각자 새 줄 차지 -->
<div>블록 1</div>
<div>블록 2</div>
<div>블록 3</div>

<!-- 인라인 요소 — 한 줄에 나란히 -->
<span>인라인 1</span>
<span>인라인 2</span>
<span>인라인 3</span>

구분	블록 요소	인라인 요소
너비	부모의 전체 너비	콘텐츠만큼
줄바꿈	앞뒤 자동 줄바꿈	없음
width/height	CSS로 지정 가능	지정 불가 (무시됨)
margin/padding	상하좌우 모두 적용	좌우만 적용
대표 태그	div, p, h1~h6, ul	span, a, strong, em

---

블록 안에 인라인, 인라인 안에 블록

블록 요소 안에 인라인 요소를 넣는 것은 자연스럽다.

<p>이 문단에서 <strong>중요한 부분</strong>을 강조합니다.</p>

반대로 인라인 요소 안에 블록 요소를 넣는 것은 HTML 규칙에 어긋난다.

<!-- 잘못된 구조 -->
<span>
  <div>블록을 인라인 안에 넣으면 안 됨</div>
</span>

<!-- 올바른 구조 -->
<div>
  <span>인라인을 블록 안에</span>
</div>

단, <a> 태그는 예외적으로 블록 요소를 감쌀 수 있다 (HTML5 기준).

---

CSS로 바꾸기

블록/인라인 특성은 CSS의 display 속성으로 바꿀 수 있다. 이 부분은 CSS 파트에서 자세히 다루는데, 미리 알아두면 좋다.

span { display: block; }   /* 인라인 → 블록 */
div  { display: inline; }  /* 블록 → 인라인 */

실제로는 display: inline-block이나 display: flex를 더 많이 쓰지만, 개념의 출발점은 블록/인라인의 구분이다.

---

태그를 고를 때 "이 내용이 한 줄 전체를 차지해야 하나, 아니면 텍스트 흐름 안에 녹아들어야 하나"를 생각해보면 블록과 인라인 중 어느 쪽이 맞는지 자연스럽게 판단된다.