From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/opacity/index.html | 144 ++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/ko/web/css/opacity/index.html (limited to 'files/ko/web/css/opacity') 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 +--- +
{{CSSRef}}
+ +

opacity CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.

+ +
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+ + + +

opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.

+ +

opacity 값이 1이 아니면 요소를 새로운 쌓임 맥락에 배치합니다.

+ +

자식 요소는 불투명하게 유지하고 싶다면 {{cssxref("background")}} 속성을 대신 사용하세요.

+ +
background: rgba(0, 0, 0, 0.4);
+ +

구문

+ +

값

+ +
+
<alpha-value>
+
채널의 불투명도(알파 채널의 값)를 나타내는 0.0 이상 1.0 이하의 {{cssxref("number")}}, 또는 0% 이상 100% 이하의 {{cssxref("percentage")}}. 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 맞춰 나머지 값은 버려집니다. + + + + + + + + + + + + + + + + + + + +
값뜻
0요소가 완전히 투명해 보이지 않음.
0과 1 사이의 아무 <number>요소가 반투명해 뒤의 내용을 볼 수 있음.
1 (기본값)요소가 불투명함.
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

기본 예제

+ +
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */
+}
+.medium {
+  opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */
+}
+.heavy {
+  opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */
+}
+
+ +
<div class="light">겨우 보이는 글</div>
+<div class="medium">좀 더 잘 보이는 글</div>
+<div class="heavy">쉽게 보이는 글</div>
+
+ +

{{EmbedLiveSample('기본_예제', '640', '64')}}

+ +

:hover 시 다른 불투명도 적용

+ +
img.opacity {
+  opacity: 1;
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}
+ +
<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
+  alt="MDN logo" width="128" height="146"
+  class="opacity">
+ +

{{EmbedLiveSample('hover_시_다른_불투명도_적용', '150', '175')}}

+ +

접근성 고려사항

+ +

글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

+ +

색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}Defines opacity as animatable.
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.opacity", 2)}}

-- cgit v1.2.3-54-g00ecf