Mask Position
Mask Position
요소 마스크 이미지의 위치(mask-position)를 정해주는 유틸리티예요. 마스크 이미지를 상자 안에서 어느 위치에 놓을지 지정할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
mask-top-left |
mask-position: top left; |
mask-top |
mask-position: top; |
mask-top-right |
mask-position: top right; |
mask-left |
mask-position: left; |
mask-center |
mask-position: center; |
mask-right |
mask-position: right; |
mask-bottom-left |
mask-position: bottom left; |
mask-bottom |
mask-position: bottom; |
mask-bottom-right |
mask-position: bottom right; |
mask-position-(<custom-property>) |
mask-position: var(<custom-property>); |
mask-position-[<value>] |
mask-position: <value>; |
예시 (Examples)
기본 예시 (Basic example)
mask-center, mask-right, mask-left-top 같은 유틸리티를 사용하면 요소 마스크 이미지의 위치를 제어할 수 있어요.
<div class="mask-top-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-top mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-top-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-center mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-bottom-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-bottom mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-bottom-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
사용자 정의 값 사용하기 (Using a custom value)
mask-position-[<value>] 문법을 사용하면 완전히 사용자 정의한 값으로 마스크 위치를 정할 수 있어요.
<div class="mask-position-[center_top_1rem] ...">
<!-- ... -->
</div>
CSS 변수를 사용할 때는 mask-position-(<custom-property>) 문법도 쓸 수 있어요.
<div class="mask-position-(--my-mask-position) ...">
<!-- ... -->
</div>
이것은 mask-position-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.
반응형 디자인 (Responsive design)
mask-position 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="mask-center md:mask-top ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.