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
|
---
title: opacity
slug: Web/CSS/opacity
tags:
- CSS
- CSS Property
- Reference
- 색
translation_of: Web/CSS/opacity
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>opacity</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 불투명도를 설정합니다.</span> 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.</p>
<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
<p><code>opacity</code>는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.</p>
<p><code>opacity</code> 값이 <code>1</code>이 아니면 요소를 새로운 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a>에 배치합니다.</p>
<p>자식 요소는 불투명하게 유지하고 싶다면 {{cssxref("background")}} 속성을 대신 사용하세요.</p>
<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>
<h2 id="구문">구문</h2>
<h3 id="값">값</h3>
<dl>
<dt><code><alpha-value></code></dt>
<dd>채널의 불투명도(알파 채널의 값)를 나타내는 <code>0.0</code> 이상 <code>1.0</code> 이하의 {{cssxref("number")}}, 또는 0% 이상 100% 이하의 {{cssxref("percentage")}}. 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 맞춰 나머지 값은 버려집니다.
<table class="standard-table">
<tbody>
<tr>
<th>값</th>
<th>뜻</th>
</tr>
<tr>
<td><code>0</code></td>
<td>요소가 완전히 투명해 보이지 않음.</td>
</tr>
<tr>
<td><code>0</code>과 <code>1</code> 사이의 아무 <code><number></code></td>
<td>요소가 반투명해 뒤의 내용을 볼 수 있음.</td>
</tr>
<tr>
<td><code>1</code> (기본값)</td>
<td>요소가 불투명함.</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<h3 id="기본_예제">기본 예제</h3>
<pre class="brush: css">div { background-color: yellow; }
.light {
opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */
}
.medium {
opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */
}
.heavy {
opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */
}
</pre>
<pre class="brush: html"><div class="light">겨우 보이는 글</div>
<div class="medium">좀 더 잘 보이는 글</div>
<div class="heavy">쉽게 보이는 글</div>
</pre>
<p>{{EmbedLiveSample('기본_예제', '640', '64')}}</p>
<h3 id="hover_시_다른_불투명도_적용"><code>:hover</code> 시 다른 불투명도 적용</h3>
<pre class="brush: css">img.opacity {
opacity: 1;
}
img.opacity:hover {
opacity: 0.5;
filter: alpha(opacity=50);
zoom: 1;
}</pre>
<pre class="brush: html"><img src="//developer.mozilla.org/static/img/opengraph-logo.png"
alt="MDN logo" width="128" height="146"
class="opacity"></pre>
<p>{{EmbedLiveSample('hover_시_다른_불투명도_적용', '150', '175')}}</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p>글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p>
<p>색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">웹 콘텐츠 접근성 가이드라인</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('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Defines <code>opacity</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
<td>{{Spec2('CSS3 Colors')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.opacity", 2)}}</p>
|
