레이어 혼합을 위한 mix-blend-mode
CSS에서 Photoshop 스타일의 혼합 모드를 사용해 요소의 색상을 아래 콘텐츠와 혼합합니다.
레이어 혼합을 위한 mix-blend-mode은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
mix-blend-mode란 무엇입니까?
mix-blend-mode는 요소의 픽셀이 아래 요소의 픽셀과 혼합되는 방식을 제어합니다. Photoshop의 레이어 혼합 모드와 비슷합니다. 요소의 배경을 포함한 전체 요소에 영향을 줍니다.
일반(기본값)
normal은 기본값이며 혼합하지 않습니다. 위쪽 요소가 아래에 있는 모든 것을 덮습니다.
multiply
multiply는 픽셀 값을 곱하여 어둡게 만듭니다. 흰색은 투명해지고 검은색은 그대로 검은색으로 유지됩니다. 어두운 색조의 이미지를 색상 배경 위에 배치할 때 유용합니다.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
screen
screen은 multiply의 반대 방식으로 밝게 만듭니다. 검은색은 투명해지고 흰색은 그대로 흰색으로 유지됩니다. 밝은 효과와 빛나는 효과에 적합합니다.
<div class="blend-wrapper">
<div class="glow"></div>
</div>
overlay
overlay는 multiply와 screen을 결합합니다. 어두운 영역은 더 어두워지고 밝은 영역은 더 밝아집니다. 중간 톤을 유지하면서 대비를 높입니다.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
difference
difference는 색상을 뺍니다. 동일한 색상은 검은색이 되고 반대 색상은 흰색이 됩니다. 사이키델릭하고 대비가 높은 효과를 만듭니다.
<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>
Hard Light와 Soft Light
hard-light는 원본 색상에 따라 multiply 또는 screen을 적용합니다. soft-light는 대비 증가가 더 적은 부드러운 버전입니다.
색상 혼합 모드
이 모드들은 특정 색상 속성만 혼합합니다:
hue— 위쪽 요소에서 색조를 가져오고 아래쪽 요소에서 채도와 밝기를 가져옵니다saturation— 위쪽 요소에서 채도를 가져옵니다color— 위쪽 요소에서 색조와 채도를 가져오고 아래쪽 요소에서 밝기를 가져옵니다luminosity— 위쪽 요소에서 밝기를 가져옵니다
이중 색조를 위한 Color 모드
mix-blend-mode: color를 사용하여 색상이 적용된 요소를 겹치면 이중 색조 이미지를 만들 수 있습니다.
<div class="duotone"></div>
반전된 텍스트 효과
어떤 배경 위에서도 반전되어 보이는 텍스트입니다.
<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>
쌓임 맥락과 blend mode
mix-blend-mode는 같은 쌓임 맥락에 있는 요소와 혼합됩니다. 부모 요소에 isolation: isolate 속성을 지정하면 새로운 쌓임 맥락이 생성되어 혼합 모드가 격리된 그룹 밖의 요소에 영향을 주지 못하게 됩니다.
빠른 확인
요소의 흰색 부분을 투명하게 만들고 색상이 있는 어두운 영역은 유지하여 투명한 종이와 같은 효과를 내는 혼합 모드는 무엇입니까?
요약
mix-blend-mode는 요소의 픽셀을 아래 콘텐츠와 혼합합니다. 주요 모드는 다음과 같습니다: multiply(어둡게 만들며 흰색은 투명해짐), screen(밝게 만들며 검은색은 투명해짐), overlay(대비 향상), difference(색상 차감), color(이미지 색상 변경). 부모 요소에 isolation: isolate를 사용하여 혼합 범위를 제한하십시오.
AI 튜터와 함께 CSS을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 40
- 레슨
- 159
자주 묻는 질문
“레이어 혼합을 위한 mix-blend-mode” 강의는 무료인가요?
네 — “레이어 혼합을 위한 mix-blend-mode” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“레이어 혼합을 위한 mix-blend-mode”에서 뭘 배우나요?
CSS에서 Photoshop 스타일의 혼합 모드를 사용해 요소의 색상을 아래 콘텐츠와 혼합합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“레이어 혼합을 위한 mix-blend-mode” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- filter: blur, brightness, contrast, grayscale
- 서리 낀 유리를 위한 backdrop-filter
- 레이어 혼합을 위한 mix-blend-mode
- isolation 속성