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
|
---
title: text-decoration
slug: Web/CSS/text-decoration
tags:
- CSS
- CSS Property
- CSS Text Decoration
- Reference
translation_of: Web/CSS/text-decoration
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>text-decoration</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 글씨의 장식(선) 색을 지정합니다.</span> {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-thickness")}}속성 값을 설정합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div>
<p>글씨 장식은 모든 하위 텍스트 요소에 적용됩니다. 따라서 자식 요소는 부모가 적용한 장식을 제거할 수 없습니다. 예를 들어 <code><p>이 문단에 <em>강조 표시</em>가 있어요.</p></code> 마크업에 <code>p { text-decoration: underline; }</code> 스타일을 적용하면 전체 문단에 밑줄이 쳐집니다. <code>em { text-decoration: none; }</code>을 추가하더라도 아무 변화도 일어나지 않습니다. 다만 <code>em { text-decoration: overline; }</code> 스타일은 "강조 표시"가 윗줄과 밑줄 모두 갖게 합니다.</p>
<h2 id="구문">구문</h2>
<p id="Values"><code>text-decoration</code> 속성은 한 개 이상의 공백으로 구분한 값으로 지정할 수 있습니다. 각각의 값은 본디 속성에서 사용하는 값입니다.</p>
<h3 id="값">값</h3>
<dl>
<dt>{{cssxref("text-decoration-line")}}</dt>
<dd><code>underline</code>, <code>line-through</code> 등 장식의 종류.</dd>
<dt>{{cssxref("text-decoration-color")}}</dt>
<dd>장식의 색.</dd>
<dt>{{cssxref("text-decoration-style")}}</dt>
<dd><code>solid</code>, <code>wavy</code>, <code>dashed</code> 등 장식의 스타일.</dd>
<dt>{{cssxref("text-decoration-thickness")}}</dt>
<dd>요소를 꾸미는데 사용되는 선의 두께를 설정합니다.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<pre class="brush: css">.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.thick {
text-decoration: solid underline purple 4px;
}
.blink {
text-decoration: blink;
}
</pre>
<pre class="brush: html"><p class="under">밑줄을 가진 글씨입니다.</p>
<p class="over">윗줄을 가진 글씨입니다.</p>
<p class="line">취소선을 가진 글씨입니다.</p>
<p>여기 링크는 기본값과 다르게 <a class="plain" href="#">밑줄이 없습니다</a>.
사용자는 보통 하이퍼링크를 구분할 때 밑줄 여부로 판단하므로
지우기 전에 조심해야 합니다.</p>
<p class="underover">밑줄과 윗줄 모두 가진 글씨입니다.</p>
<p class="thick">이 글씨는 아주 두꺼운 보라색 밑줄을 표시합니다. (브라우저가 지원하는 경우)</p>
<p class="blink">이 글씨는 브라우저에 따라서 깜빡일 수 있어요.</p>
</pre>
<p>{{EmbedLiveSample('Examples','auto','320')}}</p>
<h2 id="명세">명세</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Text Decoration')}}</td>
<td>{{Spec2('CSS4 Text Decoration')}}</td>
<td>Adds {{cssxref("text-decoration-thickness")}}; note that this isn't yet officially part of the shorthand — this is as yet unspecified.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>Transformed into a shorthand property. Added support for the value of {{cssxref('text-decoration-style')}}.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No significant changes.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.text-decoration")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.</li>
<li>The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.</li>
</ul>
|
