[HTML 페이지 구조 이해] #03 HTML 페이지 구조 이해 – 문서의 흐름을 결정하는 블록/인라인 요소 개념

 

 

 

안녕하세요, 토스트데브입니다!
오늘은 HTML 문서 구조의 핵심 개념 중 하나인 블록 요소(Block Element)와 인라인 요소(Inline Element)의 차이와 역할에 대해 알아보겠습니다.

이 개념은 문서의 시각적 흐름과 레이아웃, 그리고 CSS 레이아웃 설계에까지 큰 영향을 미치기 때문에 초보자라면 반드시 숙지해야 합니다.

 

 

✅ 블록 요소(Block Element)란?

한 줄 전체를 차지하며 줄바꿈이 자동으로 발생하는 요소입니다.

블록 요소는 새로운 “구역”을 만드는 느낌으로, 문서의 구조를 나누고 쌓아가는 핵심 요소입니다.

 

📌 대표적인 블록 요소

<div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <section>, <article>,
<nav>, <footer>, <header>, <form>, <table>

 

📌 특징 요약

• 화면에 새 줄에서 시작한다.
• 넓이(width)는 기본적으로 부모 요소의 100%를 차지한다.
• 내부에 다른 블록 요소와 인라인 요소를 포함할 수 있다.

 

✅ 예시

<p>문단 하나</p>
<p>문단 둘</p>

👉 두 개의 <p> 요소는 자동 줄바꿈 되어 위에서 아래로 쌓입니다.

 

 

✅ 인라인 요소(Inline Element)란?

줄바꿈 없이 같은 줄 안에서 흐르듯이 배치되는 요소입니다.

인라인 요소는 텍스트 안에 자연스럽게 섞여 사용되며, 강조나 링크, 줄 안 콘텐츠에 많이 쓰입니다.

 

📌 대표적인 인라인 요소

<span>, <a>, <strong>, <em>, <img>, <label>, <input>, <abbr>, <code>, <small>, <b>, <i>

 

📌 특징 요약

• 줄바꿈이 발생하지 않음
• 내용의 크기만큼만 공간을 차지함
• 보통 텍스트를 꾸미거나 기능 부여에 사용됨
• 다른 인라인 요소와 한 줄에 나란히 배치됨

 

✅ 예시

<p>이것은 <strong>강조된</strong> 단어입니다.</p>

👉 <strong>은 <p> 내부에 있으며 자연스럽게 텍스트 흐름 속에서 강조됩니다.

 

 

⚠️ 블록 vs 인라인 비교 정리

항목	블록 요소	인라인 요소
줄바꿈	자동 발생	발생하지 않음
공간 차지	전체 가로 영역	콘텐츠 크기만큼
포함 가능 요소	인라인 & 블록 가능	보통 인라인만 가능
사용 예	레이아웃 구조, 구획 나누기	텍스트 꾸미기, 링크 등

 

 

💡 그럼 <div>와 <span>의 차이는?

• <div>: 가장 대표적인 블록 요소 → 구조와 레이아웃을 잡는 용도
• <span>: 가장 기본적인 인라인 요소 → 글자 단위로 꾸미거나 감쌀 때 사용

<div style="background: #eee;">블록 요소입니다.</div>
<span style="background: yellow;">인라인 요소입니다.</span>

 

 

🧠 실전 팁!

• 레이아웃을 잡을 땐 블록 요소로 큰 틀을 만들고,
• 그 안의 텍스트나 일부 강조에는 인라인 요소를 활용하세요.
• CSS에서 display: block 또는 display: inline 속성을 통해 요소의 기본 동작을 변경할 수도 있습니다.

span {
  display: block; /* 인라인 → 블록으로 전환 가능 */
}

 

 

✅ 마무리 요약

구분	블록 요소	인라인 요소
태그 예시	<div>, <p>, <ul>	<span>, <a>, <strong>
줄바꿈	O	X
공간 차지	가로 전체	콘텐츠만큼
목적	구조 구성	내용 꾸미기

 

 

HTML 구조를 제대로 이해하기 위해선 이 블록 요소와 인라인 요소의 차이를 꼭 알고 넘어가야 합니다.
다음 글에서는 시맨틱 구조 태그에 대해 알아보겠습니다. 

 

#HTML #HTML기초 #블록요소 #인라인요소 #HTML문서구조 #요소구조 #display속성 #웹개발기초 #웹퍼블리싱 #프론트엔드 #코딩입문 #웹접근성 #웹표준 #toastdev #웹개발공부 #div태그 #span태그