filter-brightness
filter-brightness (밝기 필터)
요소의 밝기를 조절하는 필터 유틸리티예요. 옆에서 함께 짚어 드릴게요.
출처: 문서
본문
ClassStyles
| 클래스 | 스타일 |
|---|---|
brightness-<number> |
filter: brightness(<number>%); |
brightness-(<custom-property>) |
filter: brightness(var(<custom-property>)); |
brightness-[<value>] |
filter: brightness(<value>); |
Examples
Basic example
brightness-50 이나 brightness-100 같은 유틸리티를 사용해서 요소의 밝기를 제어할 수 있어요.
<img class="brightness-50 ..." src="/img/mountains.jpg" />
<img class="brightness-100 ..." src="/img/mountains.jpg" />
<img class="brightness-125 ..." src="/img/mountains.jpg" />
<img class="brightness-200 ..." src="/img/mountains.jpg" />
Using a custom value
brightness-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 밝기를 설정할 수 있어요.
<img class="brightness-[1.75] ..." src="/img/mountains.jpg" />
CSS 변수라면 brightness-(<custom-property>) 문법을 사용할 수도 있어요.
<img class="brightness-(--my-brightness) ..." src="/img/mountains.jpg" />
이는 brightness-[var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.
Responsive design
filter: brightness() 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.
<img class="brightness-110 md:brightness-150 ..." src="/img/mountains.jpg" />
변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.