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
|
---
title: <u>
slug: Web/HTML/Element/u
tags:
- Element
- HTML
- HTML text-level semantics
- 'HTML:Flow content'
- 'HTML:Palpable Content'
- 'HTML:Phrasing content'
- Reference
- Web
translation_of: Web/HTML/Element/u
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><u></code> 요소</strong>는 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다.</span> 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다.</p>
<div class="blockIndicator warning">
<p><code><u></code> 요소는 과거 HTML에서 밑줄(Underline) 요소로 불렸으며 지금도 밑줄을 추가할 목적으로 남용하는 경우가 있습니다. 그러나 밑줄을 위해서는 CSS {{cssxref("text-decoration")}} 속성을 <code>underline</code>으로 지정하는 방법을 대신 사용해야 합니다.</p>
</div>
<div>{{EmbedInteractiveExample("pages/tabbed/u.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>.</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>모두</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>만 포함합니다.</p>
<h2 id="사용_일람">사용 일람</h2>
<p>다른 순수 스타일 요소와 마찬가지로, 원래의 HTML 밑줄 요소(<code><u></code>)는 HTML 4부터 사용을 중단했으나, HTML 5에서 새로운 의미를 얻으며 돌아왔습니다. HTML 5에서 <code><u></code> 요소는 텍스트가 일종의 문자가 아닌 주석을 가지고 있음을 나타냅니다.</p>
<div class="blockIndicator note">
<p><code><u></code>와 하이퍼링크 둘 다 기본 스타일이 밑줄이므로, <code><u></code>를 기본 스타일로 사용하는건 피해야 합니다.</p>
</div>
<h3 id="사용처">사용처</h3>
<p><code><u></code> 요소의 유효한 사용처는 철자 오류 강조, <a href="https://en.wikipedia.org/wiki/Proper_name_mark">중국어의 고유명사 표시</a> 등이 있습니다.</p>
<p><code><u></code>를 사용해 밑줄만 추가하거나, 책 제목 등을 강조해서는 안됩니다.</p>
<h3 id="고려할만한_다른_요소">고려할만한 다른 요소</h3>
<p>대부분의 경우 <code><u></code> 대신 다른 요소를 사용해야 합니다.</p>
<ul>
<li>{{htmlelement("em")}} 요소는 강세를 나타냅니다.</li>
<li>{{htmlelement("b")}} 요소는 사용자의 주의를 텍스트로 돌립니다.</li>
<li>{{htmlelement("mark")}} 요소는 관련성을 나타냅니다.</li>
<li>{{htmlelement("strong")}} 요소는 강한 중요성을 나타냅니다.</li>
<li>{{htmlelement("cite")}} 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.</li>
<li>{{htmlelement("i")}} 요소는 기술 용어, 외국어, 등장인물의 생각 등을 나타냅니다.</li>
</ul>
<p><code><u></code>가 비 텍스트 표기라면, {{htmlelement("ruby")}}는 텍스트 표기를 제공합니다.</p>
<p>별도의 의미 없이 밑줄만 추가하려면 CSS {{cssxref("text-decoration")}} 속성의 값을 <code>underline</code>으로 지정하세요.</p>
<h2 id="예제">예제</h2>
<h3 id="맞춤법_오류_표시">맞춤법 오류 표시</h3>
<p>이번 예제는 <code><u></code>와 약간의 CSS를 사용해, 문단에서 철자 오류가 존재하는 부분을 빨간색 물결 밑줄로 표시합니다.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>맞춤법을 틀리면 <u class="spelling">않돼요</u>.</p></pre>
<p><code>spelling</code> 클래스를 가진 <code><u></code> 요소가 "안돼요"의 잘못된 철자를 나타내고 있음을 볼 수 있습니다.</p>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">u.spelling {
text-decoration: red wavy underline;
}</pre>
<p>CSS는 <code>spelling</code> 클래스를 가진 <code><u></code> 요소에 빨간 물결 밑줄을 적용하고 있습니다. 빨간 물결 밑줄은 맞춤법 오류를 표시할 때 흔히 쓰이는 스타일입니다. 또 다른 스타일은 <code>red dashed underline</code>입니다.</p>
<h4 id="결과">결과</h4>
<p>최근 워드 프로세서를 사용해본 경우 친숙한 모습일 것입니다.</p>
<p>{{EmbedLiveSample("맞춤법_오류_표시", 650, 80)}}</p>
<h3 id="<u>_피하기"><code><u></code> 피하기</h3>
<p>대부분의 경우, 사실 <code><u></code> 요소를 피하는게 좋습니다. 다음은 다른 요소를 사용해야 하는 몇 가지 경우입니다.</p>
<h4 id="의미를_가지지_않는_밑줄">의미를 가지지 않는 밑줄</h4>
<p>아무런 의미를 나타내지 않고 밑줄만 추가할 경우 {{HTMLElement("span")}} 요소를 사용하고, {{cssxref("text-decoration")}} 속성의 값은 <code>underline</code>으로 지정하세요.</p>
<h5 id="HTML_2">HTML</h5>
<pre class="brush: html"><span class="underline">Today's Special</span>
<br>
Chicken Noodle Soup With Carrots</pre>
<h5 id="CSS_2">CSS</h5>
<pre class="brush: css">.underline {
text-decoration: underline;
}</pre>
<h5 id="Result">Result</h5>
<p>{{EmbedLiveSample("의미를_가지지_않는_밑줄", 650, 80)}}</p>
<h4 id="책_제목_표현하기">책 제목 표현하기</h4>
<div id="example-unstyled-cite">
<p>책 제목은 <code><u></code> 대신 {{htmlelement("cite")}}를 사용해 나타내야 합니다.</p>
<h5 id="HTML_3">HTML</h5>
<pre class="brush: html"><p>The class read <cite>Moby Dick</cite> in the first term.</p></pre>
<h5 id="기본_스타일_결과">기본 스타일 결과</h5>
<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p>
</div>
<p><code><cite></code> 요소의 기본 스타일은 기울임꼴을 적용합니다. 원한다면 CSS를 사용해 재정의할 수 있습니다.</p>
<pre class="brush: css">cite {
font-style: normal;
text-decoration: underline;
}</pre>
<h5 id="사용자_지정_스타일_결과">사용자 지정 스타일 결과</h5>
<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</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', 'text-level-semantics.html#the-u-element', '<u>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-u-element', '<u>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("html.elements.u")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>보통 {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, {{HTMLElement("cite")}} 요소를 사용하는 편이 더 적합합니다.</li>
<li>특별한 의미를 가지지 않는 밑줄은 CSS {{cssxref("text-decoration")}} 속성을 사용해야 합니다.</li>
</ul>
|
