isolation

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`iso`	isolation: auto	기본값. 새 스태킹 컨텍스트를 생성하지 않음
`ison`	isolation: isolate	새 스태킹 컨텍스트 생성. blend-mode 격리

시각적 비교

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

isolation 없음 — iso

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

isolation: isolate — ison

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

언제 사용하나?

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황	추천	이유
blend-mode bleeds outside parent	`ison`	Isolate with stacking context
Apply blend only inside card	`ison`	Apply to card container
Default behavior (no isolation needed)	`iso`	auto is the default

코드 예시

<!-- mix-blend-mode isolation -->
<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 applies only within the ison container -->
</div>

<!-- Independent blend in multiple cards -->
<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