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/blend-mode/index.html | 404 +++++++++++++++++++++++++++++++++ 1 file changed, 404 insertions(+) create mode 100644 files/ko/web/css/blend-mode/index.html (limited to 'files/ko/web/css/blend-mode') diff --git a/files/ko/web/css/blend-mode/index.html b/files/ko/web/css/blend-mode/index.html new file mode 100644 index 0000000000..f5570e1ce3 --- /dev/null +++ b/files/ko/web/css/blend-mode/index.html @@ -0,0 +1,404 @@ +--- +title: +slug: Web/CSS/blend-mode +tags: + - CSS + - CSS Data Type + - Reference + - 블렌드 모드 + - 혼합 모드 +translation_of: Web/CSS/blend-mode +--- +
{{CSSRef}}
+ +

CSS <blend-mode> 자료형은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의합니다. {{cssxref("background-blend-mode")}}와 {{cssxref("mix-blend-mode")}} 속성에서 사용합니다.

+ +

최종 색상은 혼합 모드를 적용한 레이어 각각의 픽셀 하나씩에 대해 전경색과 배경색을 취한 후 모드에 따라 계산을 수행하여 나온 새로운 값입니다.

+ +

구문

+ +

<blend-mode> 자료형은 다음 키워드 값 중 하나를 선택해 지정합니다.

+ +

값

+ +
+
normal
+
+

배경색에 상관하지 않고 최상단 색을 사용합니다.
+ 두 장의 불투명한 종이를 겹친 것과 같습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('normal_example', "300", "300") }}

+
+
multiply
+
+

최종 색은 전경과 배경색을 곱한 값입니다.
+ 검은 레이어는 최종 레이어를 검은 색으로 만들고, 하얀 레이어는 아무런 변화도 주지 않습니다.
+ 투명한 필름에 프린트한 이미지를 서로 겹친 것과 같습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('multiply_example', "300", "300") }}

+
+
screen
+
+

최종 색은 전경과 배경색을 각각 반전한 후 서로 곱해 나온 값을 다시 반전한 값입니다.
+ 검은 레이어는 아무런 변화도 주지 않고, 하얀 레이어는 최종 레이어를 하얗게 만듭니다.
+ 프로젝터 두 대로 이미지를 겹친 것과 같습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('screen_example', "300", "300") }}

+
+
overlay
+
배경색이 더 어두운 경우 multiply, 더 밝은 경우 screen을 적용합니다.
+ hard-light와 같지만 배경과 전경을 뒤집은 것입니다. +
+ +
+ +

{{ EmbedLiveSample('overlay_example', "300", "300") }}

+
+
darken
+
+

최종 색은 각각의 색상 채널에 대해 제일 어두운 값을 취한 결과입니다.

+ +
+ +
+ +

{{ EmbedLiveSample('darken_example', "300", "300") }}

+
+
lighten
+
+

최종 색은 각각의 색상 채널에 대해 제일 밝은 값을 취한 결과입니다.

+ +
+ +
+ +

{{ EmbedLiveSample('lighten_example', "300", "300") }}

+
+
color-dodge
+
+

최종 색은 배경색을 전경색의 역으로 나눈 결과입니다.
+ 검은 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 제일 밝은 색이 됩니다.
+ screen과 유사하지만, 전경색의 밝기가 배경색과 동일하기만 해도 최대의 밝기를 가진 색을 반환합니다.

+ +
+ +
+ +

{{ EmbedLiveSample('color-dodge_example', "300", "300") }}

+
+
color-burn
+
+

최종 색은 배경색을 반전한 후 전경색으로 나누고, 다시 반전한 결과입니다.
+ 하얀 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 결과는 검은색입니다.
+ multiply와 유사하지만, 전경색의 밝기가 배경색의 역과 동일하기만 해도 검은색을 반환합니다.

+ +
+ +
+ +

{{ EmbedLiveSample('color-burn_example', "300", "300") }}

+
+
hard-light
+
+

전경색이 더 어두운 경우 multiply, 더 밝은 경우 screen을 적용합니다.
+ overlay와 같지만 배경과 전경을 뒤집은 것입니다.
+ 배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사합니다.

+ +
+ +
+ +

{{ EmbedLiveSample('hard-light_example', "300", "300") }}

+
+
soft-light
+
+

hard-light와 유사하지만 더 부드럽습니다.
+ hard-light와 비슷하게 동작합니다.
+ 배경색에 스포트라이트를 산란시켜 비춘 효과와 유사합니다.

+ +
+ +
+ +

{{ EmbedLiveSample('soft-light_example', "300", "300") }}

+
+
difference
+
+

최종 색은 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과입니다.
+ 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.

+ +
+ +
+ +

{{ EmbedLiveSample('difference_example', "300", "300") }}

+
+
exclusion
+
+

difference와 유사하지만 더 적은 대비를 가진 색을 반환합니다.
+ difference와 마찬가지로 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.

+ +
+ +
+ +

{{ EmbedLiveSample('exclusion_example', "300", "300") }}

+
+
hue
+
+

최종 색은 전경색의 색조를 가지며 배경색의 채도와 밝기를 가집니다.

+ +
+ +
+ +

{{ EmbedLiveSample('hue_example', "300", "300") }}

+
+
saturation
+
+

최종 색은 전경색의 채도를 가지며 배경색의 색조와 밝기를 가집니다.
+ 색조 없는 순수한 회색 배경으로는 아무런 효과도 없습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('saturation_example', "300", "300") }}

+
+
color
+
+

최종 색은 전경색의 색조와 채도를 가지며 배경색의 밝기를 가집니다.
+ 회색조를 유지하므로 전경을 색칠할 때 사용할 수 있습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('color_example', "300", "300") }}

+
+
luminosity
+
+

최종 색은 전경색의 밝기를 가지며 배경색의 색조와 채도를 가집니다.
+ color와 동일하지만 배경과 전경을 뒤집은 것입니다.

+ +
+ +
+ +

{{ EmbedLiveSample('luminosity_example', "300", "300") }}

+
+
+ +

혼합 모드의 보간

+ +

혼합 모드는 보간 대상이 아니며 모든 변경점은 즉시 발생합니다.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.blend-mode")}}

+ +

같이 보기

+ + + +

각각의 혼합 모드에 대한 설명을 다루는 외부 웹 페이지:

+ + -- cgit v1.2.3-54-g00ecf