흑백 처리

흑백 처리 (Filter Grayscale)

요소에 흑백(grayscale) 효과를 적용하는 정도를 조절하는 유틸리티예요. 컬러 이미지를 흑백으로 바꾸거나 흑백 비율을 세밀하게 조절할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

grayscale filter: grayscale(100%);

grayscale-<number> filter: grayscale(<number>%);

grayscale-(<custom-property>) filter: grayscale(var(<custom-property>));

grayscale-[<value>] filter: grayscale(<value>);

기본 예제 (Basic example)

grayscale, grayscale-75 같은 유틸리티를 사용해 요소에 적용되는 흑백 효과의 양을 조절할 수 있어요.

grayscale-0 grayscale-25 grayscale-50 grayscale

<img class="grayscale-0 ..." src="/img/mountains.jpg" /><img class="grayscale-25 ..." src="/img/mountains.jpg" /><img class="grayscale-50 ..." src="/img/mountains.jpg" /><img class="grayscale ..." src="/img/mountains.jpg" />

커스텀 값 사용하기 (Using a custom value)

grayscale-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 흑백 정도를 설정할 수 있어요.

<img class="grayscale-[0.5] ..." src="/img/mountains.jpg" />

CSS 변수를 쓸 때는 grayscale-(<custom-property>) 문법을 사용할 수도 있어요.

<img class="grayscale-(--my-grayscale) ..." src="/img/mountains.jpg" />

이것은 grayscale-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

filter: grayscale() 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<img class="grayscale md:grayscale-0 ..." src="/img/mountains.jpg" />

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.