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>&lt;alpha-value&gt;</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>&lt;number&gt;</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">&lt;div class="light"&gt;겨우 보이는 글&lt;/div&gt;
+&lt;div class="medium"&gt;좀 더 잘 보이는 글&lt;/div&gt;
+&lt;div class="heavy"&gt;쉽게 보이는 글&lt;/div&gt;
+</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">&lt;img src="//developer.mozilla.org/static/img/opengraph-logo.png"
+  alt="MDN logo" width="128" height="146"
+  class="opacity"&gt;</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>