혼합 모드

CSS 팟캐스트 - 024: 혼합 모드

듀오톤은 사진에 많이 사용되는 색상 처리 방법으로, 이미지가 하이라이트와 어두운 부분에 사용된 두 가지 대비되는 색상으로만 구성된 것처럼 보이게 합니다. CSS로 어떻게 하면 될까요?

혼합 모드와 앞서 배운 다른 기법(예: 필터, 의사 요소)을 사용하면 이 효과를 모든 이미지에 적용할 수 있습니다.

블렌딩 모드란 무엇인가요?

혼합 모드는 일반적으로 Photoshop과 같은 디자인 도구에서 두 개 이상의 레이어의 색상을 혼합하여 구성 효과를 만드는 데 사용됩니다. 색상이 혼합되는 방식을 변경하면 매우 흥미로운 시각 효과를 얻을 수 있습니다. 흰색 배경이 있는 이미지를 분리하여 투명한 배경처럼 보이게 하는 등 혼합 모드를 유틸리티로 사용할 수도 있습니다.

CSS에서 mix-blend-mode 또는 background-blend-mode 속성을 사용하여 디자인 도구에서 사용할 수 있는 대부분의 혼합 모드를 사용할 수 있습니다. mix-blend-mode는 전체 요소에 혼합을 적용하고 background-blend-mode는 요소의 배경에 혼합을 적용합니다.

요소에 여러 배경이 있고 모두 서로 혼합되도록 하려면 background-blend-mode을 사용합니다.

mix-blend-mode는 가상 요소를 비롯한 전체 요소에 영향을 미칩니다. 한 가지 사용 사례는 가상 요소를 통해 요소에 색상 레이어가 적용된 듀오톤 이미지의 초기 예입니다.

혼합 모드는 분리 가능 모드와 분리 불가능 모드의 두 가지 카테고리로 나뉩니다. 분리 가능한 혼합 모드는 RGB와 같은 각 색상 구성요소를 개별적으로 고려합니다. 분리 불가능한 혼합 모드는 모든 색상 구성요소를 동일하게 고려합니다.

브라우저 호환성

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

분리 가능한 블렌딩 모드

보통

이 모드는 기본 블렌딩 모드이며 요소가 다른 요소와 혼합되는 방식을 변경하지 않습니다.

곱하기

multiply 혼합 모드는 여러 투명 필름을 서로 겹쳐 놓는 것과 같습니다. 흰색 픽셀은 투명하게, 검은색 픽셀은 검은색으로 표시됩니다. 그 사이의 값은 밝기 (빛) 값을 곱합니다. 즉, 밝은 부분은 훨씬 밝아지고 어두운 부분은 더 어두워지며, 대부분 더 어두운 결과를 얻게 됩니다.

.my-element {
  mix-blend-mode: multiply;
}

화면

screen를 사용하면 밝기 값이 곱해집니다. 이는 multiply와는 반대 효과이며 대부분 더 밝은 결과를 생성합니다.

.my-element {
  mix-blend-mode: screen;
}

오버레이

이 블렌딩 모드(overlay)는 multiply와 screen를 결합합니다. 어두운 기본 색상은 더 어두워지고 밝은 기본 색상은 더 밝아집니다. 50% 회색과 같은 중간 색상은 영향을 받지 않습니다.

.my-element {
  mix-blend-mode: overlay;
}

어둡게

darken 블렌딩 모드는 소스 이미지와 배경 이미지의 어두운 색상 밝기를 비교하고 두 이미지 중 가장 어두운 이미지를 선택합니다. 각 색상 채널의 밝기 대신 rgb 값을 비교하여 이를 수행합니다 (multiply 및 screen가 하는 것처럼). darken 및 lighten를 사용하면 이 비교 프로세스에서 새 색상 값이 생성되는 경우가 많습니다.

.my-element {
  mix-blend-mode: darken;
}

밝게

lighten를 사용하면 darken과 정확히 반대의 작업이 실행됩니다.

.my-element {
  mix-blend-mode: lighten;
}

색상 닷지

color-dodge를 사용하면 배경 색상이 밝아져 소스 색상이 반영됩니다. 순수한 검은색 색상에는 이 모드의 효과가 적용되지 않습니다.

.my-element {
  mix-blend-mode: color-dodge;
}

색상 번

color-burn 혼합 모드는 multiply 혼합 모드와 매우 유사하지만 대비가 증가하여 중간 색조가 더 포화되고 밝은 부분이 줄어듭니다.

.my-element {
  mix-blend-mode: color-burn;
}

하드 라이트

hard-light를 사용하면 선명한 대비가 만들어집니다. 이 혼합 모드는 밝기 값을 제외하거나 곱합니다. 픽셀 값이 50% 회색보다 밝으면 이미지가 화면 보호 모드인 것처럼 밝아집니다. 더 어두우면 곱해집니다.

.my-element {
  mix-blend-mode: hard-light;
}

소프트 라이트

soft-light 혼합 모드는 overlay의 완화된 버전입니다. 대비가 낮은 경우에도 거의 동일한 방식으로 작동합니다.

.my-element {
  mix-blend-mode: soft-light;
}

차이

difference의 작동 방식을 파악하는 좋은 방법은 사진 현상액의 작동 방식과 비슷합니다. difference 혼합 모드는 각 픽셀의 차이 값을 사용하여 밝은 색상을 반전시킵니다. 색상 값이 동일하면 검은색이 됩니다. 값의 차이가 반전됩니다.

.my-element {
  mix-blend-mode: difference;
}

제외 게재위치 및 카테고리

exclusion 사용은 difference와 매우 유사하지만 동일한 픽셀에 검은색을 반환하는 대신 50% 회색을 반환하므로 대비가 낮은 더 부드러운 출력이 생성됩니다.

.my-element {
  mix-blend-mode: exclusion;
}

분리 불가능한 블렌딩 모드

이러한 혼합 모드는 HSL 색상 구성요소와 같이 생각할 수 있습니다. 각 레이어는 활성 레이어에서 특정 구성요소 값을 가져와 다른 구성요소 값과 혼합합니다.

색조

hue 블렌딩 모드는 소스 색상의 색조를 사용하여 배경 색상의 채도와 광도에 적용합니다.

.my-element {
  mix-blend-mode: hue;
}

채도

이는 hue와 같이 작동하지만 블렌딩 모드로 saturation를 사용하면 소스 색상의 채도가 배경 색상의 색조와 광도에 적용됩니다.

.my-element {
  mix-blend-mode: saturation;
}

색상

color 블렌딩 모드는 소스 색상의 색조와 채도, 배경 색상의 광도에서 색상을 만듭니다.

.my-element {
  mix-blend-mode: color;
}

밝기

마지막으로 luminosity은 color의 역수입니다. 소스 색상의 광도와 배경 색상의 색조 및 채도로 색상을 만듭니다.

.my-element {
  mix-blend-mode: luminosity;
}

isolation 속성

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

isolation 속성을 isolate 값으로 설정하면 새로운 스택 컨텍스트가 생성되어 배경 레이어와 혼합되지 않습니다. z-index 모듈에서 배웠듯이 새 스택 컨텍스트를 만들면 해당 레이어가 기본 레이어가 됩니다. 즉, 상위 수준 블렌딩 모드는 더 이상 적용되지 않지만 isolation: isolate가 설정된 요소 내의 요소는 계속 혼합될 수 있습니다.

배경 속성이 이미 격리되어 있으므로 background-blend-mode에는 작동하지 않습니다.

이해도 확인

혼합 모드에 대한 지식 테스트

다음 중 CSS 혼합 모드는 무엇인가요?

차이
🎉
밝게
🎉
밝게
다시 시도해 보세요.
Dullen
다시 시도해 보세요.
곱하기
🎉
오버레이
🎉

다양한 방식으로 여러 색상을 혼합하려면 어떤 스타일의 혼합 모드가 필요할까요?

분리 가능
이러한 혼합 모드에는 색상 채널 타겟팅 효과가 있습니다.
분리 불가
다시 시도해 보세요. 분리 불가능한 항목은 색상 채널을 인식하지 않습니다.