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