blob: 637ace1c8ce841af0257f530d41efee75d54bd05 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
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"><p>이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을 입혔습니다.</p></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>
|
