Isolation
Isolation
요소가 명시적으로 새로운 스태킹 컨텍스트(stacking context)를 만들지 여부를 제어하는 유틸리티예요. 복잡한 레이어링 상황에서 유용하게 쓰여요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
isolate |
isolation: isolate; |
isolation-auto |
isolation: auto; |
예시 (Examples)
기본 예시 (Basic example)
isolate와 isolation-auto 유틸리티를 사용해 요소가 명시적으로 새로운 스태킹 컨텍스트를 만들어야 할지 제어할 수 있어요.
<div class="isolate ...">
<!-- ... -->
</div>
반응형 디자인 (Responsive design)
isolation 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="isolate md:isolation-auto ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.