색상 반전
색상 반전 (Filter Invert)
요소의 색상을 반전(invert)시키는 유틸리티예요. 밝은 부분과 어두운 부분을 뒤집어서 네거티브(negative) 느낌의 이미지를 만들 수 있어요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
invert
filter: invert(100%);
invert-<number>
filter: invert(<number>%);
invert-(<custom-property>)
filter: invert(var(<custom-property>));
invert-[<value>]
filter: invert(<value>);
기본 예제 (Basic example)
invert, invert-20 같은 유틸리티를 사용해 요소의 색상 반전 정도를 조절할 수 있어요.
invert-0 invert-20 invert
<img class="invert-0" src="/img/mountains.jpg" /><img class="invert-20" src="/img/mountains.jpg" /><img class="invert" src="/img/mountains.jpg" />
커스텀 값 사용하기 (Using a custom value)
invert-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 색상 반전을 설정할 수 있어요.
<img class="invert-[.25] ..." src="/img/mountains.jpg" />
CSS 변수를 쓸 때는 invert-(<custom-property>) 문법을 사용할 수도 있어요.
<img class="invert-(--my-inversion) ..." src="/img/mountains.jpg" />
이것은 invert-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.
반응형 디자인 (Responsive design)
filter: invert() 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.
<img class="invert md:invert-0 ..." src="/img/mountains.jpg" />
variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.