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
background-blend-mode
분리 가능한 혼합 모드
일반
이는 기본 혼합 모드이며 요소가 다른 요소와 혼합되는 방식은 변경되지 않습니다.
멀티플라이
multiply 혼합 모드는 여러 투명도를 서로 쌓는 것과 같습니다.
흰색 픽셀은 투명하게, 검은색 픽셀은 검은색으로 표시됩니다.
그 사이의 값은 광도 (밝은) 값을 곱합니다.
즉, 빛은 훨씬 더 밝아지고 어두워지며, 대부분의 경우 결과가 더 어두워집니다.
.my-element {
mix-blend-mode: multiply;
}
화면
screen를 사용하면 light 값이 곱해집니다(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
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 속성
isolation 속성의 값을 isolate로 설정하면 새 스태킹 컨텍스트가 생성되어 배경화면 레이어와 혼합되지 않습니다.
Z-색인 모듈에서 배운 것처럼 새 스태킹 컨텍스트를 만들면 이 레이어가 기본 레이어가 됩니다.
즉, 상위 수준 혼합 모드가 더 이상 적용되지 않지만 isolation: isolate가 설정된 요소 내부의 요소는 여전히 블렌딩할 수 있습니다.
백그라운드 속성이 이미 격리되어 있으므로 이 메서드는 background-blend-mode에서 작동하지 않습니다.
학습 내용 확인하기
혼합 모드에 관한 지식 테스트
다음 중 CSS 혼합 모드란 무엇인가요?
여러 색상을 다양한 방식으로 혼합하려면 어떤 스타일의 블렌드 모드가 필요한가요?