블록 레벨 요소

HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 자세한 설명을 읽을 수 있습니다.

브라우저는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것 처럼 생각할 수 있습니다.

참고: 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

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

블록 레벨 요소

HTML

<p>이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을 입혔습니다.</p>

CSS

p { background-color: #8ABB55; }

사용처

  • 블록 레벨 요소는 <body> 요소 안에서만 나타날 수 있습니다.

블록 레벨 vs. 인라인

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

콘텐츠 모델

일반적으로 블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있습니다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있습니다.

기본 서식

기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다.

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

요소 목록

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

<address>

연락처 정보.

<article>

단락 콘텐츠.

<aside>

부가 콘텐츠.

<blockquote>

긴("블록") 인용구.

<details>

상세 정보 위젯.

<dialog>

대화상자.

<dd>

설명 목록의 정의 설명.

<div>

문서의 분할.

<dl>

설명 목록.

<dt>

설명 목록의 정의.

<fieldset>

필드 집합의 라벨.

<figcaption>

그림 설명.

<figure>

미디어 콘텐츠 그룹과 설명. (<figcaption>을 참고하세요)

페이지나 구역의 푸터.

<form>

입력 폼.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

1~6단계 제목.

페이지나 구역의 헤더.

<hgroup>

헤더 정보 그룹.

<hr>

수평선(구분선).

<li>

목록의 항목.

<main>

문서에서 하나 뿐인 중심 콘텐츠.

탐색 링크를 포함.

<ol>

정렬된 목록.

<p>

문단.

<pre>

미리 서식 적용한 글.

<section>

웹 페이지의 구역.

<table>

표.

<ul>

정렬되지 않은 목록.

같이 보기