Mask Origin
Mask Origin
요소의 마스크가 어디를 기준으로(origin) 렌더링될지(mask-origin)를 정해주는 유틸리티예요. 테두리, 패딩, 콘텐츠 상자 등 어느 기준점으로 마스크를 그릴지 선택할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
mask-origin-border |
mask-origin: border-box; |
mask-origin-padding |
mask-origin: padding-box; |
mask-origin-content |
mask-origin: content-box; |
mask-origin-fill |
mask-origin: fill-box; |
mask-origin-stroke |
mask-origin: stroke-box; |
mask-origin-view |
mask-origin: view-box; |
예시 (Examples)
기본 예시 (Basic example)
mask-origin-border, mask-origin-padding, mask-origin-content 같은 유틸리티를 사용하면 요소의 마스크가 어디에 렌더링될지 제어할 수 있어요.
<div class="mask-origin-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-origin-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-origin-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
반응형 디자인 (Responsive design)
mask-origin 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="mask-origin-border md:mask-origin-padding ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.