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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
---
title: 인라인 요소
slug: Web/HTML/Inline_elements
tags:
- Beginner
- Development
- Guide
- HTML
- Layout
- Web
translation_of: Web/HTML/Inline_elements
---
<p>HTML(<strong>Hypertext Markup Language</strong>)의 요소는 역사적으로 <a href="/ko/docs/Web/HTML/Block-level_elements">"블록 레벨" 요소</a>와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 이 글은 인라인 요소란 무엇인지와 블록 레벨 요소와의 차이점을 살펴봅니다.</p>
<div class="blockIndicator note">
<p>인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다.</p>
</div>
<h2 id="인라인_vs._블록_레벨_요소">인라인 vs. 블록 레벨 요소</h2>
<p>간단한 예제만으로 쉽게 설명할 수 있습니다. 우선 다음 CSS를 사용하겠습니다.</p>
<pre class="brush: css">.highlight {
background-color: #ee3;
}
</pre>
<h3 id="인라인">인라인</h3>
<p>인라인 요소를 보이는 다음 예제를 확인해주세요.</p>
<pre class="brush: html"><div>다음 span은 <span class="highlight">인라인 요소</span>로,
영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</div></pre>
<p>이 예제에서 {{HTMLElement("div")}}는 텍스트를 가진 블록 레벨 요소입니다. 그 텍스트 안에는 인라인 요소인 {{HTMLElement("span")}}이 존재합니다. <code><span></code>은 인라인이기 때문에 전체 문단이 끊기지 않고 하나로 그려집니다. 결과도 확인해보세요.</p>
<p>{{EmbedLiveSample("인라인", 600, 80)}}</p>
<div class="hidden">
<p>For looks, this CSS (not displayed in standard reading mode) is also used:</p>
<pre class="brush: css">body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}</pre>
</div>
<h3 id="블록_레벨">블록 레벨</h3>
<p>이제 아까 만든 <code><span></code>을 마치 {{htmlelement("p")}}처럼 블록 레벨인 요소로 바꿔보겠습니다.</p>
<pre class="brush: html"><div>다음 p는 <p class="highlight">블록 레벨 요소</p>로,
영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</pre>
<div class="hidden">
<p>The CSS (not displayed in standard reading mode) is also used:</p>
<pre class="brush: css">body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}</pre>
</div>
<p>아까와 같은 CSS를 사용했을 때, 결과는 다음과 같습니다.</p>
<p>{{EmbedLiveSample("블록_레벨", 600, 150)}}</p>
<p>차이가 보이나요? <code><p></code> 요소는 텍스트의 레이아웃을 완전히 바꿔, <code><p></code> 이전과 자기 자신의 텍스트, 그리고 <code><p></code> 이후의 세 부분으로 나눠버렸습니다.</p>
<h3 id="요소_레벨_변경">요소 레벨 변경</h3>
<p>CSS {{cssxref("display")}} 속성을 사용해 요소의 시각적 표현 레벨을 바꿀 수 있습니다. 예컨대 <code>display</code>의 값을 <code>inline</code>에서 <code>block</code>으로 바꾸면, 브라우저에게 이 인라인 요소를 인라인 박스 대신 블록 박스를 사용해 그리라고 알리는 것입니다. 그러나 이 방법을 사용해도 요소의 카테고리와 콘텐츠 모델은 바뀌지 않습니다. 즉 <code><span></code> 요소의 <code>display</code>를 <code>block</code>으로 지정한다 해도, 그 안에 <code><div></code>를 넣을 수는 없습니다.</p>
<h2 id="개념적_차이">개념적 차이</h2>
<p>다음은 인라인과 블록 레벨 요소의 간략한 개념적 차이입니다.</p>
<dl>
<dt>콘텐츠 모델</dt>
<dd>보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없습니다.</dd>
<dt>서식</dt>
<dd>기본적으로, 인라인 요소는 문서 흐름에서 줄바꿈을 강제하지 않습니다. 반면 블록 요소는 줄바꿈을 유발합니다. (물론 언제나처럼 CSS로 바꿀 수 있습니다)</dd>
</dl>
<h2 id="요소_목록">요소 목록</h2>
<p>다음은 기본값이 인라인인 요소의 목록입니다. (사실 HTML5는 블록과 인라인 요소를 정의하지 않습니다. <a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a>를 사용하세요)</p>
<div class="threecolumns">
<dl>
<dt>{{ HTMLElement("a") }}</dt>
<dt>{{ HTMLElement("abbr") }}</dt>
<dt>{{ HTMLElement("acronym") }}</dt>
<dt>{{ HTMLElement("audio") }} (컨트롤이 보이면)</dt>
<dt>{{ HTMLElement("b") }}</dt>
<dt>{{ HTMLElement("bdi") }}</dt>
<dt>{{ HTMLElement("bdo") }}</dt>
<dt>{{ HTMLElement("big") }}</dt>
<dt>{{ HTMLElement("br") }}</dt>
<dt>{{ HTMLElement("button") }}</dt>
<dt>{{ HTMLElement("canvas") }}</dt>
<dt>{{ HTMLElement("cite") }}</dt>
<dt>{{ HTMLElement("code") }}</dt>
<dt>{{ HTMLElement("data") }}</dt>
<dt>{{ HTMLElement("datalist") }}</dt>
<dt>{{ HTMLElement("del") }}</dt>
<dt>{{ HTMLElement("dfn") }}</dt>
<dt>{{ HTMLElement("em") }}</dt>
<dt>{{ HTMLElement("embed") }}</dt>
<dt>{{ HTMLElement("i") }}</dt>
<dt>{{ HTMLElement("iframe") }}</dt>
<dt>{{ HTMLElement("img") }}</dt>
<dt>{{ HTMLElement("input") }}</dt>
<dt>{{ HTMLElement("ins") }}</dt>
<dt>{{ HTMLElement("kbd") }}</dt>
<dt>{{ HTMLElement("label") }}</dt>
<dt>{{ HTMLElement("map") }}</dt>
<dt>{{ HTMLElement("mark") }}</dt>
<dt>{{ HTMLElement("meter") }}</dt>
<dt>{{ HTMLElement("noscript") }}</dt>
<dt>{{ HTMLElement("object") }}</dt>
<dt>{{ HTMLElement("output") }}</dt>
<dt>{{ HTMLElement("picture") }}</dt>
<dt>{{ HTMLElement("progress") }}</dt>
<dt>{{ HTMLElement("q") }}</dt>
<dt>{{ HTMLElement("ruby") }}</dt>
<dt>{{ HTMLElement("s") }}</dt>
<dt>{{ HTMLElement("samp") }}</dt>
<dt>{{ HTMLElement("script") }}</dt>
<dt>{{ HTMLElement("select") }}</dt>
<dt>{{ HTMLElement("slot") }}</dt>
<dt>{{ HTMLElement("small") }}</dt>
<dt>{{ HTMLElement("span") }}</dt>
<dt>{{ HTMLElement("strong") }}</dt>
<dt>{{ HTMLElement("sub") }}</dt>
<dt>{{ HTMLElement("sup") }}</dt>
<dt>{{ HTMLElement("svg") }}</dt>
<dt>{{ HTMLElement("template") }}</dt>
<dt>{{ HTMLElement("textarea") }}</dt>
<dt>{{ HTMLElement("time") }}</dt>
<dt>{{ HTMLElement("u") }}</dt>
<dt>{{ HTMLElement("tt") }}</dt>
<dt>{{ HTMLElement("var") }}</dt>
<dt>{{ HTMLElement("video") }}</dt>
<dt>{{ HTMLElement("wbr") }}</dt>
</dl>
</div>
<h2 id="See_also" name="See_also">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨 요소</a></li>
<li><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></li>
<li>{{cssxref("display")}}</li>
<li><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></li>
<li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">일반 플로우에서의 블록과 인라인 레이아웃</a></li>
</ul>
<p>{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}</p>
|
