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