채도 조절
채도 조절 (Filter Saturate)
요소의 채도(saturation)를 조절하는 유틸리티예요. 색이 탁해 보일 땐 낮추고, 더 선명하고 생생하게 만들고 싶을 땐 높여서 사용할 수 있어요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
saturate-<number>
filter: saturate(<number>%);
saturate-(<custom-property>)
filter: saturate(var(<custom-property>));
saturate-[<value>]
filter: saturate(<value>);
기본 예제 (Basic example)
saturate-50, saturate-100 같은 유틸리티를 사용해 요소의 채도를 조절할 수 있어요.
saturate-50 saturate-100 saturate-150 saturate-200
<img class="saturate-50 ..." src="/img/mountains.jpg" /><img class="saturate-100 ..." src="/img/mountains.jpg" /><img class="saturate-150 ..." src="/img/mountains.jpg" /><img class="saturate-200 ..." src="/img/mountains.jpg" />
커스텀 값 사용하기 (Using a custom value)
saturate-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 채도를 설정할 수 있어요.
<img class="saturate-[.25] ..." src="/img/mountains.jpg" />
CSS 변수를 쓸 때는 saturate-(<custom-property>) 문법을 사용할 수도 있어요.
<img class="saturate-(--my-saturation) ..." src="/img/mountains.jpg" />
이것은 saturate-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.
반응형 디자인 (Responsive design)
filter: saturate() 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.
<img class="saturate-50 md:saturate-150 ..." src="/img/mountains.jpg" />
variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.