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
|
---
title: <abbr>
slug: Web/HTML/Element/abbr
tags:
- Element
- HTML
- HTML text-level semantics
- Reference
- Web
translation_of: Web/HTML/Element/abbr
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><abbr></code> 요소</strong>는 준말 또는 머리글자를 나타냅니다.</span> 선택 속성인 {{htmlattrxref("title")}}을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. <code>title</code> 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>
<table class="htmlelt">
<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#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a></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#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">암시적 ARIA 역할</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></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>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다. 단, 다른 요소와 달리 <code><abbr></code> 요소에서의 {{htmlattrxref("title")}} 특성은 특정한 의미를 가지며, <code>title</code>은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가져야 합니다. 브라우저는 <code>title</code>의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.</p>
<p>각각의 <code><abbr></code> 요소는 서로 독립적입니다. 하나의 요소에 <code>title</code>을 제공한다고 나머지에 지정하지 않아도 되는 것은 아닙니다.</p>
<h2 id="사용_일람">사용 일람</h2>
<h3 id="많이_쓰이는_곳">많이 쓰이는 곳</h3>
<p>당연히 모든 준말을 <code><abbr></code>로 표시해야 하는 것은 아닙니다. 그러나 표시할 경우 도움이 될, 다음과 같은 경우가 있습니다.</p>
<ul>
<li>사용한 준말과 머리글자를 문서 콘텐츠 플로우 밖에서 풀어서 설명하고 싶으면 적절한 {{htmlattrxref("title")}} 특성을 지정한 <code><abbr></code> 요소를 사용하세요.</li>
<li>독자에게 익숙하지 않을 수 있는 준말을 사용할 경우 <code><abbr></code>과 함께 <code>title</code> 특성이나 인라인 텍스트로 단어에 대한 정의를 제공하세요.</li>
<li>준말임을 명시적으로 나타내야 할 경우 <code><abbr></code> 요소가 유용합니다. 이를 응용하면 스타일링이나 스크립트 적용에도 사용할 수 있습니다.</li>
<li><code><abbr></code>을 {{HTMLElement("dfn")}}과 같이 사용하면 준말이나 머리글자를 그 정의와 연결할 수 있습니다. 아래의 {{anch("준말 정의하기")}}을 참고하세요.</li>
</ul>
<h3 id="문법_고려사항">문법 고려사항</h3>
<p>수량이 문법에 영향을 미치는 언어(one apple vs. two apple<strong>s</strong>)의 경우, <code><abbr></code> 요소의 텍스트와 <code>title</code> 특성의 내용이 같은 형태를 따르도록 하세요. 아랍어처럼 두 개 이상의 복수형 구분을 두는 언어에서 특히 중요하나, 영어도 해당합니다.</p>
<h2 id="기본_스타일">기본 스타일</h2>
<p><code><abbr></code>의 목적은 오로지 HTML 작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인({{cssxref('display')}}<code>: inline</code>)으로 렌더링 합니다. 그러나 기본 스타일은 브라우저마다 다를 수 있습니다.</p>
<ul>
<li>Internet Explorer 등 일부 브라우저는 {{HTMLElement("span")}} 요소와 동일하게 그립니다.</li>
<li>Opera, Firefox 등은 요소에 점선 밑줄을 추가합니다.</li>
<li>몇몇은 점선을 추가할 뿐만 아니라, 영어 소문자도 작은 대문자로 표현합니다. 이를 제거하려면 CSS {{cssxref('font-variant')}}를 <code>none</code>으로 설정하세요.</li>
</ul>
<h2 id="예제">예제</h2>
<h3 id="준말임을_나타내기">준말임을 나타내기</h3>
<p>설명 없이, 단순히 특정 단어가 준말임을 나타내기만 하고자 하면 <code><abbr></code>을 다른 특성 없이 사용하세요.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><p>Using <abbr>HTML</abbr> is fun and easy!</p></pre>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample("준말임을_나타내기")}}</p>
<h3 id="준말_스타일링">준말 스타일링</h3>
<p>CSS를 사용해 준말에 적용할 사용자 지정 스타일을 적용할 수 있습니다.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">abbr {
font-variant: all-small-caps;
}</pre>
<h4 id="결과_2">결과</h4>
<p>{{EmbedLiveSample("준말_스타일링")}}</p>
<h3 id="펼친_형태_보여주기">펼친 형태 보여주기</h3>
<p>{{htmlattrxref("title")}} 특성을 사용하면 준말과 머리글자를 펼친 원래 형태를 보여줄 수 있습니다.</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html notranslate"><p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p></pre>
<h4 id="결과_3">결과</h4>
<p>{{EmbedLiveSample("펼친_형태_보여주기")}}</p>
<h3 id="준말_정의하기">준말 정의하기</h3>
<p><code><abbr></code>과 {{HTMLElement("dfn")}}을 사용하면 준말을 정식으로 정의할 수 있습니다.</p>
<h4 id="HTML_4">HTML</h4>
<pre class="brush: html notranslate"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> is a markup language used to create the semantics and structure
of a web page.</p>
<p>A <dfn id="spec">Specification</dfn>
(<abbr title="Specification">spec</abbr>) is a document that outlines
in detail how a technology or API is intended to function and how it is
accessed.</p></pre>
<h4 id="결과_4">결과</h4>
<p>{{EmbedLiveSample("준말_정의하기", 600, 120)}}</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p>준말과 머리글자가 처음 사용될 때, 그 뜻을 풀어 설명하면 독자가 문서를 이해하기 쉬워집니다. 특히 콘텐츠가 기술이나 산업에 관련된 전문적인 내용인 경우 더욱 그렇습니다.</p>
<h4 id="예제_2">예제</h4>
<pre class="brush: html notranslate"><p>JavaScript Object Notation(<abbr>JSON</abbr>)은 경량의 데이터 교환 형식입니다.</p>
</pre>
<p>무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.</p>
<h2 id="명세">명세</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-abbr-element', '<abbr>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.abbr")}}</p>
|
