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
|
---
title: color
slug: Web/CSS/color
tags:
- CSS
- CSS Colors
- CSS Property
- CSS Text
- Layout
- Reference
- Web
- 색
translation_of: Web/CSS/color
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>color</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> 속성은 요소의 글씨 및 <a href="/ko/docs/Web/CSS/text-decoration">글씨 장식</a>의 전경색과 {{cssxref("currentcolor")}}의 값을 설정합니다.</span> <code>currentcolor</code>는 다른 속성에서 사용할 수 있는 간접적인 값이며, {{cssxref("border-color")}} 등 일부 속성의 기본값입니다.</p>
<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>
<p>HTML에서 색을 사용하는 법은 <a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a> 문서에서 정리한 내용으로 읽을 수 있습니다.</p>
<h2 id="구문">구문</h2>
<pre class="brush: css no-line-numbers">/* 키워드 값 */
color: currentcolor;
/* <named-color> 값 */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* <hex-color> 값 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
/* <rgb()> 값 */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);
/* <hsl()> 값 */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* 전역 값 */
color: inherit;
color: initial;
color: unset;
</pre>
<p><code>color</code> 속성은 하나의 {{cssxref("<color>")}} 값을 사용해 지정합니다.</p>
<p>값이 단일 색상이어야 함에 주의하세요. {{cssxref("<gradient>")}}는 사실 {{cssxref("<image>")}} 자료형이기 때문에 사용할 수 없습니다.</p>
<h3 id="값">값</h3>
<dl>
<dt>{{cssxref("<color>")}}</dt>
<dd>요소의 글씨와 장식 부분의 색.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
{{csssyntax}}
<h2 id="예제">예제</h2>
<p>아래 예제 모두 글씨를 빨갛게 만듭니다.</p>
<pre class="brush: css">p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }
/* 50% 투명 */
p { color: rgba(255, 0, 0, 0.5); }
p { color: hsla(0, 100%, 50%, 0.5); }
</pre>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p>낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p>
<p>색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noopener">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>
<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('CSS4 Colors', '#the-color-property', 'color')}}</td>
<td>{{Spec2('CSS4 Colors')}}</td>
<td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br>
Adds color keyword <code>rebeccapurple</code>.<br>
Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br>
Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Defines <code>color</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
<td>{{Spec2('CSS3 Colors')}}</td>
<td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Adds the <code>orange</code> color and the system colors.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#color', 'color')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<div>{{cssinfo}}</div>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.color")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{cssxref("<color>")}} 자료형</li>
<li>다른 색상 관련 속성: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}</li>
<li><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a></li>
</ul>
|
