background-origin
background-origin (배경 렌더링 기준점)
요소의 배경이 어디를 기준으로 렌더링될지를 정하는 유틸리티예요. border-box, padding-box, content-box 사이에서 기준을 고를 수 있어요.
출처: 문서
본문
ClassStyles
| 클래스 | 스타일 |
|---|---|
bg-origin-border |
background-origin: border-box; |
bg-origin-padding |
background-origin: padding-box; |
bg-origin-content |
background-origin: content-box; |
Examples
Basic example
bg-origin-border, bg-origin-padding, bg-origin-content 유틸리티를 사용하면 요소의 배경이 어디를 기준으로 렌더링될지를 조절할 수 있어요.
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-border p-3 ..."></div>
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-padding p-3 ..."></div>
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-content p-3 ..."></div>
Responsive design
background-origin 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.
<div class="bg-origin-border md:bg-origin-padding ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.