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
|
---
title: '<dfn>: 정의 요소'
slug: Web/HTML/Element/dfn
tags:
- Element
- HTML
- HTML text-level semantics
- Reference
- Web
translation_of: Web/HTML/Element/dfn
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><dfn></code> 요소</strong>는 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다.</span> <code><dfn></code>에서 가장 가까운 {{htmlelement("p")}}, {{htmlelement("dt")}}/{{htmlelement("dd")}} 쌍, {{htmlelement("section")}} 조상 요소를 용어 정의로 간주합니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 {{htmlelement("dfn")}} 요소는 불가능.</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/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">암시적 ARIA 역할</th>
<td>{{ARIARole("definition")}}</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>모두</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
<h2 id="사용_일람">사용 일람</h2>
<p><code><dfn></code> 요소를 보는 것 만으로는 그다지 명확하지 않은 부분이 있습니다.</p>
<h3 id="정의하고_있는_용어_지정하기">정의하고 있는 용어 지정하기</h3>
<p>다음 규칙을 따라 현재 용어가 어느건지 판별합니다.</p>
<ol>
<li><code><dfn></code> 요소가 {{htmlattrxref("title")}} 특성을 가지고 있으면 그 값을 현재 정의 중인 용어로 간주합니다. <code><dfn></code>은 여전히 텍스트 콘텐츠를 가지고 있겠지만, 완전한 용어 대신 준말({{htmlelement("abbr")}})을 넣을 수도 있고, 다른 대체 형태일 수도 있습니다.</li>
<li><code><dfn></code>이 다른 텍스트는 없이 하나의 자식만 가지는데, 그 자식이 <code>title</code> 특성을 가진{{htmlelement("abbr")}}인 경우, 자식 <code><abbr></code>의 <code>title</code> 특성 값을 현재 용어로 간주합니다.</li>
<li>모두 아닌 경우 <code><dfn></code>의 텍스트 콘텐츠를 현재 용어로 간주합니다. {{anch("기본적인 용어 식별", "아래의 첫 번째 예제")}}에서 확인할 수 있습니다.</li>
</ol>
<div class="note">
<p><strong>참고:</strong> <code><dfn></code> 요소가 <code>title</code> 특성을 가진 경우, 그 값은 정의 중인 용어여야 하며 다른 텍스트는 들어가선 안됩니다.</p>
</div>
<h3 id="<dfn>_요소를_가리키는_링크"><code><dfn></code> 요소를 가리키는 링크</h3>
<p><code><dfn></code> 요소에 {{htmlattrxref("id")}} 특성을 지정하면 {{HTMLElement("a")}} 요소로 <code><dfn></code>을 가리킬 수 있습니다. 사용자가 용어 뜻을 잘 모를 경우, 링크를 클릭해 빠르게 정의를 확인할 수 있습니다. 따라서 링크 콘텐츠는 용어의 사용 예시 등을 담고 있어야 합니다.</p>
<p>{{anch("정의로 링크", "정의로 링크 예제")}}에서 확인할 수 있습니다.</p>
<h2 id="예제">예제</h2>
<p>다양한 상황의 예제를 살펴보겠습니다.</p>
<h3 id="기본적인_용어_식별">기본적인 용어 식별</h3>
<p>아래 코드는 간단하게 <code><dfn></code> 요소를 사용해, 정의 문단 내의 용어를 식별합니다.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>The <strong>HTML Definition element</strong>
(<strong><dfn>&lt;dfn&gt;</dfn></strong>) is used to indicate the
term being defined within the context of a definition phrase or
sentence.</p></pre>
<p><code><dfn></code> 요소에 <code>title</code>이 없으므로 <code><dfn></code>의 텍스트 콘텐츠가 현재 정의 중인 용어입니다.</p>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample("기본적인_용어_식별", 650, 120)}}</p>
<h3 id="정의로_링크">정의로 링크</h3>
<p>용어의 정의로 링크하는 건 {{htmlelement("a")}} 요소로 다른 링크를 만드는 방법과 같습니다.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p>The <strong>HTML Definition element</strong>
(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is
used to indicate the term being defined within the context of a
definition phrase or sentence.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece
donan, Latine voluptatem vocant. Confecta res esset. Duo Reges:
constructio interrete. Scrupulum, inquam, abeunti; </p>
<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
Equidem e Cn. Quid de Pythagora? In schola desinis. </p>
<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum
est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas
bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc
agere divinius? </p>
<p>Because of all of that, we decided to use the
<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for
this project.</p></pre>
<p>이번에는 {{htmlattrxref("id")}} 특성에 <code>"definition-dfn"</code>을 사용한 용어 정의입니다. 코드 뒤쪽에서는 <code><a></code> 태그와 {{htmlattrxref("href", "a")}} 특성 값 <code>"#definition-dfn"</code>으로, 정의를 가리키는 링크를 생성합니다.</p>
<h4 id="결과_2">결과</h4>
<p>{{EmbedLiveSample("정의로_링크", 650, 300)}}</p>
<h3 id="준말과_정의_같이_사용하기">준말과 정의 같이 사용하기</h3>
<p>어떤 경우, 용어를 정의할 때 머리글자 등 준말을 사용하고 싶을 때가 있습니다. 그럴 땐 <code><dfn></code>과 {{HTMLElement("abbr")}} 요소를 조합하면 됩니다.</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn>
is among the most productive scientific instruments ever constructed.
It has been in orbit for over 20 years, scanning the sky and
returning data and photographs of unprecedented quality and
detail.</p>
<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has
arguably done more to advance science than any device ever built.</p></pre>
<p><code><dfn></code> 요소 안에 배치한 <code><abbr></code>을 주목하세요. <code><abbr></code>은 준말("HST")과 함께 <code>title</code> 특성으로 전체 용어("Hubble Space Telescope")를 지정합니다. <code><dfn></code>은 <code><abbr></code>의 준말을 현재 정의하고 있음을 나타냅니다.</p>
<h4 id="결과_3">결과</h4>
<p>{{EmbedLiveSample("준말과_정의_같이_사용하기", 650, 200)}}</p>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-dfn-element', '<dfn>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.dfn")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>용어 정의 관련 요소: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li>
<li>{{HTMLElement("abbr")}}</li>
</ul>
|
