isolation

새로운 스태킹 컨텍스트(stacking context)를 생성하는 속성입니다. 주로 mix-blend-mode가 부모 밖으로 번지는 것을 방지할 때 사용합니다.

클래스 목록

클래스	CSS	설명
`iso`	isolation: auto	기본값. 새 스태킹 컨텍스트를 생성하지 않음
`ison`	isolation: isolate	새 스태킹 컨텍스트 생성. blend-mode 격리

시각적 비교

mix-blend-mode가 적용된 요소에서 ison의 효과를 비교합니다.

isolation 없음 — iso

blend가 부모 배경까지 영향을 줌

isolation: isolate — ison

blend가 ison 컨테이너 안에서만 적용

언제 사용하나?

상황	추천	이유
blend-mode가 부모 밖으로 번짐	`ison`	스태킹 컨텍스트로 격리
카드 내부에서만 blend 적용	`ison`	카드 컨테이너에 적용
기본 동작 (격리 불필요)	`iso`	auto가 기본값

코드 예시

<!-- mix-blend-mode 격리 -->
<div class="ison pr bg18181B p2rem br8px">
  <div class="w8rem h8rem bgEF4444 br8px mbmm"></div>
  <div class="w8rem h8rem bg22C55E br8px mbmm neg-mt2rem ml2rem"></div>
  <!-- blend는 ison 컨테이너 안에서만 적용 -->
</div>

<!-- 여러 카드에서 독립적 blend -->
<div class="dg gtcr2-1fr gap2rem">
  <div class="ison pr bg27272A p2rem br8px">
    <div class="w100p h8rem bg6366F1 br4px mbms"></div>
  </div>
  <div class="ison pr bg27272A p2rem br8px">
    <div class="w100p h8rem bgEF4444 br4px mbmo"></div>
  </div>
</div>

팁 & 주의사항

ison = 새 스태킹 컨텍스트

ison은 z-index와 유사하게 새로운 스태킹 컨텍스트를 만듭니다. 하위 요소의 blend-mode가 상위로 전파되지 않도록 격리합니다.

mix-blend-mode와 항상 함께

isolation은 단독으로는 시각적 효과가 없습니다. mix-blend-mode의 영향 범위를 제한할 때 의미가 있습니다.

mix-blend-mode position opacity