마스크 반복
마스크 반복 (Mask Repeat)
마스크 이미지를 가로·세로로 어떻게 반복할지 정하는 유틸리티예요. CSS의 mask-repeat 속성을 조절해서 필요한 만큼만 반복시키거나 반복을 막을 수 있어요.
출처: 문서
본문
클래스와 스타일
mask-repeat—mask-repeat: repeat;mask-no-repeat—mask-repeat: no-repeat;mask-repeat-x—mask-repeat: repeat-x;mask-repeat-y—mask-repeat: repeat-y;mask-repeat-space—mask-repeat: space;mask-repeat-round—mask-repeat: round;
기본 예제
mask-repeat 유틸리티를 쓰면 마스크 이미지를 가로와 세로 양쪽으로 반복할 수 있어요.
<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
가로로 반복하기
mask-repeat-x 유틸리티를 쓰면 마스크 이미지를 가로로만 반복해요.
<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>
세로로 반복하기
mask-repeat-y 유틸리티를 쓰면 마스크 이미지를 세로로만 반복해요.
<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>
잘림 방지하기
mask-repeat-space 유틸리티를 쓰면 마스크 이미지가 잘리지 않도록 반복해요.
<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
잘림과 빈틈 없애기
mask-repeat-round 유틸리티를 쓰면 마스크 이미지가 잘리지 않도록 반복하되, 빈틈이 생기지 않게 필요하면 살짝 늘려요.
<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
반복 끄기
mask-no-repeat 유틸리티를 쓰면 마스크 이미지가 반복되지 않게 해요.
<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
반응형 디자인
mask-repeat 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.
<div class="mask-repeat md:mask-repeat-x ...">
<!-- ... -->
</div>
변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.