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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
|
---
title: <dl>
slug: Web/HTML/Element/dl
tags:
- Element
- HTML
- HTML grouping content
- 'HTML:Flow content'
- 'HTML:Palpable Content'
- Reference
- Web
translation_of: Web/HTML/Element/dl
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><dl></code> 요소</strong>는 설명 목록을 나타냅니다. <code><dl></code>은 {{htmlelement("dt")}}로 표기한 용어와 {{htmlelement("dd")}} 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>. <code><dl></code>의 자식 중 이름-값 그룹이 있으면 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td>
<p>하나 이상의 {{htmlelement("dt")}} 요소와 하나 이상의 {{htmlelement("dd")}} 요소로 구성한 그룹 0개 이상. 선택적으로 {{htmlelement("script")}}와 {{htmlelement("template")}}을 혼합 가능.<br>
또는, 하나 이상의 {{htmlelement("div")}}. 선택적으로 {{htmlelement("script")}}, {{htmlelement("template")}} 혼합 가능.</p>
</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLDListElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
<h2 id="예제">예제</h2>
<h3 id="하나의_용어와_하나의_정의">하나의 용어와 하나의 정의</h3>
<pre class="brush: html"><dl>
<dt>Firefox</dt>
<dd>
Mozilla 재단과 수 백명의
자원봉사자가 개발한 무료
오픈소스 크로스 플랫폼
그래픽 웹 브라우저.
</dd>
<!-- 다른 용어 및 정의 -->
</dl>
</pre>
<p>{{EmbedLiveSample("하나의_용어와_하나의_정의")}}</p>
<h3 id="여러_개의_용어와_하나의_정의">여러 개의 용어와 하나의 정의</h3>
<pre class="brush: html"><dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>
Mozilla 재단과 수 백명의
자원봉사자가 개발한 무료
오픈소스 크로스 플랫폼
그래픽 웹 브라우저.
</dd>
<!-- 다른 용어 및 정의 -->
</dl>
</pre>
<p>{{EmbedLiveSample("여러_개의_용어와_하나의_정의")}}</p>
<h3 id="하나의_용어와_여러_개의_정의">하나의 용어와 여러 개의 정의</h3>
<pre class="brush: html"><dl>
<dt>Firefox</dt>
<dd>
Mozilla 재단과 수 백명의
자원봉사자가 개발한 무료
오픈소스 크로스 플랫폼
그래픽 웹 브라우저.
</dd>
<dd>
붉은 판다, 레서 판다, 랫서 판다,
혹은 "Firefox"는 초식성 포유류이다.
몸 길이는 애완용 고양이보다 약간
큰 정도인 60cm다.
</dd>
<!-- 다른 용어 및 정의 -->
</dl>
</pre>
<p>{{EmbedLiveSample("하나의_용어와_여러_개의_정의")}}</p>
<h3 id="여러_개의_용어와_여러_개의_정의">여러 개의 용어와 여러 개의 정의</h3>
<p>위의 예제를 결합하여 여러 용어를 여러 정의와 연결하는 것도 가능합니다.</p>
<h3 id="메타데이터">메타데이터</h3>
<p><code><dl></code>은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.</p>
<pre class="brush: html"><dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
</pre>
<p>팁: 아래처럼 키-값 구분자를 CSS로 지정하면 편리합니다.</p>
<pre class="brush: css">dt:after {
content: ": ";
}</pre>
<p>{{EmbedLiveSample("메타데이터")}}</p>
<h3 id="이름-값_그룹을_htmlelementdiv로_감싸기">이름-값 그룹을 {{htmlelement("div")}}로 감싸기</h3>
<p>{{glossary("WHATWG")}} HTML에서는 <code><dl></code> 안 각각의 이름-값 그룹을 {{htmlelement("div")}}로 감쌀 수 있습니다. 마이크로데이터를 사용할 때, 그룹에 전역 특성을 적용할 때, 아니면 스타일을 적용할 때 유용할 수 있습니다.</p>
<pre class="brush: html"><dl>
<div>
<dt>Name</dt>
<dd>Godzilla</dd>
</div>
<div>
<dt>Born</dt>
<dd>1952</dd>
</div>
<div>
<dt>Birthplace</dt>
<dd>Japan</dd>
</div>
<div>
<dt>Color</dt>
<dd>Green</dd>
</div>
</dl>
</pre>
<h2 id="참고">참고</h2>
<p>페이지에서 들여쓰기를 하기 위한 목적으로 <code><dl></code> (또는 {{htmlelement("ul")}}) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.</p>
<p>용어의 들여쓰기를 수정하려면 <a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("margin")}} 속성을 사용하세요.</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p>각각의 스크린 리더는 <code><dl></code>을 다르게 표현합니다. iOS의 VoiceOver 등 일부 스크린 리더는 <code><dl></code>의 콘텐츠를 리스트로 표현하지 않습니다. 따라서, 각 아이템의 콘텐츠는 리스트 그룹 내 다른 항목과의 관계를 표현할 수 있는 방식으로 작성해야 합니다.</p>
<ul>
<li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt & dd</a></li>
</ul>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">주석</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '<dl>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("html.elements.dl")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{HTMLElement("dt")}} 요소</li>
<li>{{HTMLElement("dd")}} 요소</li>
</ul>
|
