마스크 크기

마스크 크기 (Mask Size)

마스크 이미지의 크기를 정하는 유틸리티예요. CSS의 mask-size 속성을 조절해 마스크 레이어를 가득 채우거나, 자르지 않고 맞추거나, 원본 크기 그대로 둘 수 있어요.

출처: 문서

본문

클래스와 스타일

  • mask-auto — mask-size: auto;
  • mask-cover — mask-size: cover;
  • mask-contain — mask-size: contain;
  • mask-size-(<custom-property>) — mask-size: var(<custom-property>);
  • mask-size-[<value>] — mask-size: <value>;

컨테이너 채우기

mask-cover 유틸리티를 쓰면 마스크 레이어를 가득 채울 때까지 마스크 이미지를 확대하고, 필요하면 이미지를 잘라요.

<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

자르지 않고 채우기

mask-contain 유틸리티를 쓰면 마스크 이미지를 자르거나 늘리지 않고 바깥 가장자리에 맞춰 크기를 조절해요.

<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

기본 크기 사용하기

mask-auto 유틸리티를 쓰면 마스크 이미지를 기본 크기 그대로 표시해요.

<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

커스텀 값 사용하기

mask-size-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 마스크 이미지 크기를 정할 수 있어요.

<div class="mask-size-[auto_100px] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 mask-size-(<custom-property>) 문법도 사용할 수 있어요.

<div class="mask-size-(--my-mask-size) ...">
  <!-- ... -->
</div>

이건 mask-size-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

mask-size 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<div class="mask-auto md:mask-contain ...">
  <!-- ... -->
</div>

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

더 알아보기 (Learn more)