블록 레벨 요소
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단계 제목.
<header>-
페이지나 구역의 헤더.
<hgroup>-
헤더 정보 그룹.
<hr>-
수평선(구분선).
<li>-
목록의 항목.
<main>-
문서에서 하나 뿐인 중심 콘텐츠.
-
탐색 링크를 포함.
<ol>-
정렬된 목록.
<p>-
문단.
<pre>-
미리 서식 적용한 글.
<section>-
웹 페이지의 구역.
<table>-
표.
<ul>-
정렬되지 않은 목록.