CSS isolation 속성 완벽 가이드 – 스태킹 컨텍스트 격리하기

CSS isolation 속성이란?

isolation 속성은 요소가 새로운 스태킹 컨텍스트(stacking context)를 생성해야 하는지 여부를 정의하는 CSS 속성입니다. 특히 mix-blend-mode와 함께 사용할 때 유용한데, 자식 요소의 블렌딩 효과가 부모 요소 전체로 퍼지지 않고 특정 영역 안에서만 적용되도록 격리할 수 있습니다.

즉, isolation: isolate를 지정하면 해당 요소가 독립적인 블렌딩 그룹이 되어, 내부 요소들이 외부 배경과 섞이지 않게 됩니다.

문법(Syntax)

isolation: auto | isolate | initial | inherit;

속성 값 설명

auto – 기본값입니다. 새로운 스태킹 컨텍스트를 명시적으로 생성하지 않습니다. 다만 opacity, transform 등 다른 조건에 의해 스태킹 컨텍스트가 생성될 수 있습니다.
isolate – 해당 요소가 반드시 새로운 스태킹 컨텍스트를 생성하도록 강제합니다. 자식 요소의 블렌딩이 이 요소 범위 안에서만 적용됩니다.
initial – 속성을 기본값(auto)으로 설정합니다.
inherit – 부모 요소의 isolation 값을 상속받습니다.

예제 코드

다음 예제는 mix-blend-mode: difference가 적용된 요소들에 대해 isolation 값을 다르게 설정했을 때 블렌딩 결과가 어떻게 달라지는지 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
    background-color: orange;
}
#demo2 {
    width: 300px;
    height: 400px;
}
.demo3 {
    width: 150px;
    height: 120px;
    border: 3px dashed blue;
    padding: 5px;
    mix-blend-mode: difference;
}
#demo4 {
    isolation: isolate;
}
#demo5 {
    isolation: none;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div id="demo2" class="demo1">
<div id="demo4">
<div class="demo1 demo3">isolation: auto 속성 값</div>
</div>
<div id="demo5">
<div class="demo1 demo3">isolation: isolate 속성 값</div>
</div>
<div id="demo4">
<div class="demo1 demo3">isolation: auto 속성 값</div>
</div>
</div>
</body>
</html>

실행 결과

CSS isolation 속성 완벽 가이드 – 스태킹 컨텍스트 격리하기

위 결과에서 확인할 수 있듯이, isolation: isolate가 적용된 요소는 자체적인 스태킹 컨텍스트를 형성하여 내부의 블렌딩 효과가 외부 요소와 섞이지 않고 격리됩니다. 반면 기본값인 auto 상태에서는 블렌딩이 상위 컨텍스트까지 영향을 미칠 수 있습니다.