diff options
Diffstat (limited to 'files/ko/web/css/opacity/index.html')
| -rw-r--r-- | files/ko/web/css/opacity/index.html | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/files/ko/web/css/opacity/index.html b/files/ko/web/css/opacity/index.html new file mode 100644 index 0000000000..6132b0380a --- /dev/null +++ b/files/ko/web/css/opacity/index.html @@ -0,0 +1,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> |