[HTML] 04. 블록 요소 vs 인라인 요소 완전 정리

[HTML] 04. 블록 요소 vs 인라인 요소 완전 정리

HTML 태그는 크게 두 가지 유형으로 나뉩니다.
블록 요소(Block Element)와 인라인 요소(Inline Element)입니다.

이 차이를 이해하지 못하면, 왜 줄이 바뀌는지, 왜 나란히 안 붙는지 계속 헷갈리게 됩니다.

---

1. 블록 요소(Block Element)란?

블록 요소는 화면에서 한 줄 전체를 차지하는 요소입니다.

• 항상 새로운 줄에서 시작
• 가로 폭을 기본적으로 100% 사용
• 다른 블록 요소와 위아래로 쌓임

대표적인 블록 요소

<div>
<p>
<h1> ~ <h6>
<section>
<article>
<header>
<footer>

예제

<p>첫 번째 문단</p>
<p>두 번째 문단</p>

Output

첫 번째 문단

두 번째 문단

각 문단이 자동으로 줄 바꿈 되는 것을 확인할 수 있습니다.

---

2. 인라인 요소(Inline Element)란?

인라인 요소는 필요한 만큼의 공간만 차지합니다.

• 줄을 바꾸지 않음
• 가로폭이 내용만큼만 설정됨
• 주로 텍스트 안에서 사용

대표적인 인라인 요소

<span>
<strong>
<em>
<a>
<img>

예제

<p>
  이것은 <strong>강조</strong> 문장입니다.
</p>

Output

이것은 강조 문장입니다.

strong은 줄을 바꾸지 않고 문장 안에서 동작합니다.

---

3. 블록 vs 인라인 차이 한눈에 비교

구분	블록 요소	인라인 요소
줄 바꿈	자동 줄 바꿈	줄 바꿈 없음
가로 폭	100% 사용	내용만큼만 사용
포함 가능	블록 + 인라인	보통 인라인만 포함

---

4. 중요한 개념: display 속성

블록과 인라인의 차이는 사실 CSS의 display 속성 때문입니다.

• display: block;
• display: inline;
• display: inline-block;

HTML 태그마다 기본 display 값이 정해져 있습니다.

예를 들어

• p → 기본적으로 block
• span → 기본적으로 inline

CSS로 이 속성을 바꿀 수도 있습니다.

---

5. 실무에서 가장 많이 쓰는 블록/인라인 조합

예시 구조

<div>
  <h1>제목</h1>
  <p>설명 <span>강조부분</span></p>
</div>

div는 블록 요소 → 큰 영역 구분 span은 인라인 요소 → 텍스트 일부 스타일 지정

---

6. 자주 하는 실수

❌ 인라인 요소 안에 블록 요소 넣기

<span>
  <div>내용</div>
</span>

HTML5에서는 일부 허용되지만, 의미상 잘못된 구조입니다.

---

7. 핵심 정리

• 블록 요소는 한 줄 전체를 차지한다
• 인라인 요소는 내용만큼만 차지한다
• HTML은 기본 display 속성을 가진다
• 레이아웃 이해의 시작은 블록/인라인 이해다

이 개념을 이해하면, CSS 레이아웃이 훨씬 쉬워집니다.