---
title: 블록 레벨 요소
slug: Web/HTML/Block-level_elements
tags:
  - Beginner
  - Development
  - Guide
  - HTML
  - HTML5
  - Web
translation_of: Web/HTML/Block-level_elements
---
<p><strong>HTML</strong>(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 <a href="/ko/docs/Web/HTML/Inline_elements">"인라인" 요소</a>로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 자세한 설명을 읽을 수 있습니다.</p>

<p>{{glossary("browser", "브라우저")}}는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것 처럼 생각할 수 있습니다.</p>

<div class="blockIndicator note">
<p>블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.</p>
</div>

<p>다음 예제가 블록 레벨 요소의 영향을 보여줍니다.</p>

<h2 id="블록_레벨_요소">블록 레벨 요소</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을 입혔습니다.&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p { background-color: #8ABB55; }</pre>

<p>{{EmbedLiveSample('블록_레벨_요소')}}</p>

<h2 id="사용처">사용처</h2>

<ul>
 <li>블록 레벨 요소는 {{HTMLElement("body")}} 요소 안에서만 나타날 수 있습니다.</li>
</ul>

<h2 id="블록_레벨_vs._인라인">블록 레벨 vs. 인라인</h2>

<p>블록 레벨 요소와 인라인 요소는 몇 가지 중요한 차이점을 가지고 있습니다.</p>

<dl>
 <dt>콘텐츠 모델</dt>
 <dd>일반적으로 블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있습니다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있습니다.</dd>
 <dt>기본 서식</dt>
 <dd>기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다.</dd>
</dl>

<p>블록 레벨과 인라인 요소의 분류는 HTML 명세 4.01까지 사용됐습니다. 이런 이진적 구분은 HTML5부터 보다 복잡한 <a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a> 집합으로 대체됐습니다. "인라인" 카테고리는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>와 적당히 짝지을 수 있지만 "블록 레벨" 카테고리는 어느 HTML5 콘텐츠 카테고리와도 정확히 일치하지 않습니다. 그러나 블록 레벨과 인라인 요소를 조합하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>에 대응합니다. <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a> 등 추가 카테고리도 존재합니다.</p>

<h2 id="요소_목록">요소 목록</h2>

<p>다음은 HTML 블록 레벨 요소의 전체 목록입니다. (사실 HTML5의 새로운 요소를 설명할 때, "블록 레벨"이라는 용어는 정의되지 않습니다.)</p>

<div class="threecolumns">
<dl>
 <dt>{{ HTMLElement("address") }}</dt>
 <dd>연락처 정보.</dd>
 <dt>{{ HTMLElement("article") }}</dt>
 <dd>단락 콘텐츠.</dd>
 <dt>{{ HTMLElement("aside") }}</dt>
 <dd>부가 콘텐츠.</dd>
 <dt>{{ HTMLElement("blockquote") }}</dt>
 <dd>긴("블록")  인용구.</dd>
 <dt>{{HTMLElement("details")}}</dt>
 <dd>상세 정보 위젯.</dd>
 <dt>{{HTMLElement("dialog")}}</dt>
 <dd>대화상자.</dd>
 <dt>{{ HTMLElement("dd") }}</dt>
 <dd>설명 목록의 정의 설명.</dd>
 <dt>{{ HTMLElement("div") }}</dt>
 <dd>문서의 분할.</dd>
 <dt>{{ HTMLElement("dl") }}</dt>
 <dd>설명 목록.</dd>
 <dt>{{HTMLElement("dt")}}</dt>
 <dd>설명 목록의 정의.</dd>
 <dt>{{ HTMLElement("fieldset") }}</dt>
 <dd>필드 집합의 라벨.</dd>
 <dt>{{ HTMLElement("figcaption") }}</dt>
 <dd>그림 설명.</dd>
 <dt>{{ HTMLElement("figure") }}</dt>
 <dd>미디어 콘텐츠 그룹과 설명. ({{ HTMLElement("figcaption") }}을 참고하세요)</dd>
 <dt>{{ HTMLElement("footer") }}</dt>
 <dd>페이지나 구역의 푸터.</dd>
 <dt>{{ HTMLElement("form") }}</dt>
 <dd>입력 폼.</dd>
 <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
 <dd>1~6단계 제목.</dd>
 <dt>{{ HTMLElement("header") }}</dt>
 <dd>페이지나 구역의 헤더.</dd>
 <dt>{{ HTMLElement("hgroup") }}</dt>
 <dd>헤더 정보 그룹.</dd>
 <dt>{{ HTMLElement("hr") }}</dt>
 <dd>수평선(구분선).</dd>
 <dt>{{HTMLElement("li")}}</dt>
 <dd>목록의 항목.</dd>
 <dt>{{HTMLElement("main")}}</dt>
 <dd>문서에서 하나 뿐인 중심 콘텐츠.</dd>
 <dt>{{HTMLElement("nav")}}</dt>
 <dd>탐색 링크를 포함.</dd>
 <dt>{{ HTMLElement("ol") }}</dt>
 <dd>정렬된 목록.</dd>
 <dt>{{ HTMLElement("p") }}</dt>
 <dd>문단.</dd>
 <dt>{{ HTMLElement("pre") }}</dt>
 <dd>미리 서식 적용한 글.</dd>
 <dt>{{ HTMLElement("section") }}</dt>
 <dd>웹 페이지의 구역.</dd>
 <dt>{{ HTMLElement("table") }}</dt>
 <dd>표.</dd>
 <dt>{{ HTMLElement("ul") }}</dt>
 <dd>정렬되지 않은 목록.</dd>
</dl>
</div>

<h2 id="See_also" name="See_also">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a></li>
 <li>{{cssxref("display")}}</li>
 <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
</ul>

<div>{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}</div>