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