정의 및 사용 방법

isolation 속성은
SVG에서는 요소를 격리할지 여부를 정의하고,
CSS의 경우 isolate로 설정하면 요소가 새로운 쌓임 맥락(Stacking context)을 생성합니다.

이 속성은 SVG와 일반 CSS에서 사용될 때 각각 다른 특징을 갖습니다.

  • SVG에서는 지정하는 요소가 블렌딩 시 합성을 처리할 때 외부와 분리되어 있는 독립적인 격리 그룹(isolated group)으로 처리할지 여부를 정의합니다.
  • CSS의 경우 해당 요소를 isolate로 설정하면 요소가 새로운 쌓임 맥락(Stacking context)을 생성합니다.
    • 이로 인해 z-index를 사용한 요소의 겹침 순서 또는 주변 요소와의 겹침 순서가 달라지거나, 자식이나 자손 요소의 Containing Block이 재정의될 수 있습니다.
    • 또한, 쌓임 맥락(Stacking context)이 생성된 요소는 mix-blend-mode 속성으로 설정된 블렌딩 시 합성을 처리할 때 외부와 분리되어 있는 독립적인 격리 그룹(isolated group)으로 처리하기 때문에 블렌딩되는 범위를 제한할 때 유용하게 사용됩니다.
다음은 '블렌딩(Blending)' 용어에 대한 간단한 부연설명입니다.
블렌딩(Blending)
두 개 이상의 레이어가 겹쳐질 때, 위쪽 레이어와 아래쪽 레이어 간 투명도 또는 색상이 상호 작용하는 합성 효과를 CSS 또는 SVG에서 설정하여 렌더링하는 것입니다. 대표적인 블렌딩 효과로는 mix-blend-mode 속성이 있습니다.

형식 구문

CSS 
isolation {
    isolation: auto | isolate
}

구문

CSS 
/* 키워드 값 */
isolation: auto;
isolation: isolate;

/* 글로벌 값 */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

값

isolation 속성의 값
auto
  • SVG에서는 요소가 블렌딩 시 합성을 처리할 때 외부와 분리되어 있지 않은 비격리 그룹(non-isolated group)으로 처리합니다.
  • CSS의 경우 새로운 쌓임 맥락(Stacking context)을 생성에 관여하지 않습니다.
isolate
  • SVG에서는 요소가 블렌딩 시 합성을 처리할 때 외부와 분리되어 있는 독립적인 격리 그룹(isolated group)으로 처리합니다.
  • CSS의 경우 요소가 새로운 쌓임 맥락(Stacking context)을 생성합니다.

형식 정의

isolation 속성의 형식 정의
초깃값 auto
적용 요소 모든 요소. SVG에서는 컨테이너 요소, 그래픽 요소 및 그래픽 참조 요소에 적용됩니다.
상속 아니오
애니메이션 아니오

예제

다음은 isolation 속성이 SVG와 일반 CSS에서 사용될 때 각각 다른 특징을 보여주는 예제입니다.

SVG

SVG에서 isolation 속성은 요소를 격리할지 여부를 정의합니다.
지정하는 요소가 블렌딩 시 합성을 처리할 때 외부와 분리되어 있는 독립적인 격리 그룹(isolated group)으로 처리하려면 아래의 예제처럼 isolation: isolate로, 그렇지 않으면 isolation: auto로 설정하세요.

HTML 
<svg viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
    <!-- 배경 -->
    <rect width="300" height="150" fill="#000" /> <!-- 검정색 반투명 처리 -->
    
    <!-- isolation: auto -->
    <g class="group-auto">
        <circle cx="60" cy="75" r="45" fill="cyan" />
        <circle cx="100" cy="75" r="45" fill="magenta" />
        <text x="35" y="140">isolation: auto</text>
    </g>
    
    <!-- isolation: isolate -->
    <g transform="translate(150, 0)" class="group-isolate">
        <circle cx="60" cy="75" r="45" fill="cyan" />
        <circle cx="100" cy="75" r="45" fill="magenta" />
        <text x="35" y="140">isolation: isolate</text>
    </g>
</svg>
CSS 
svg {
    width: 300px;
    height: 150px;
    margin-top: 20px;
}
.group-auto {
    isolation: auto;
}
.group-isolate {
    isolation: isolate;
}
circle {
    mix-blend-mode: overlay; /*  mix-blend-mode 속성으로 설정된 블렌딩 */
}
text {
    fill: #fff;
    font-size: 14px;
}
실제 적용된 모습

이 예제에서 실제 적용된 모습을 보면 SVG에서 isolation 속성이 지정하는 요소가 블렌딩 시 합성을 처리할 때 외부와 분리되어 있는 독립적인 격리 그룹(isolated group)으로 처리할지를 잘 보여줍니다.

  • isolation: auto (왼쪽): 검정색 반투명 배경인 <rect>와 해당 요소의 블렌딩 합성이 분리되어 있지 않아, 검정색 반투명이 해당 요소를 덮어쓰듯 작동합니다.
  • isolation: isolate (오른쪽): 검정색 반투명 배경인 <rect>와 해당 요소의 블렌딩 합성이 분리되어 있어서 단순히 겹쳐보입니다.

CSS

CSS의 경우 해당 요소를 isolation: isolate로 설정하면 요소가 새로운 쌓임 맥락(Stacking context)을 생성합니다. 이로 인해 z-index를 사용한 요소의 겹침 순서 또는 주변 요소와의 겹침 순서가 달라지거나, 자식이나 자손 요소의 Containing Block이 재정의될 수 있습니다.

새로운 쌓임 맥락(Stacking context) 생성

해당 요소를 isolation: isolate로 설정하면 새로운 쌓임 맥락이 생성되기 때문에 이러한 쌓임 맥락을 생성하는 요소들은 그렇지 않은 형제 요소보다 위에 쌓입니다.

HTML 
<div class="container">
    <div class="box">BOX-1</div>
    <div class="box auto">BOX-2</div>
    <div class="box">BOX-3</div>
</div>
<div class="container">
    <div class="box">BOX-1</div>
    <div class="box isolate">BOX-2</div>
    <div class="box">BOX-3</div>
</div>
CSS 
.container {
    display: flex;
    padding: 0.5em;
}
.box {
    width: 80px;
    height: 50px;
    color: white;
    border: 10px solid red;
    background-color: rgba(255, 51, 0, 0.85);
    margin-right: -40px;
}
.box.auto,
.box.isolate {
    border-color: blue;
    background-color: rgba(0, 102, 204, 0.85);
}
.isolate {
    isolation: isolate;
}
실제 적용된 모습

이 예제에서 실제 적용된 모습을 보면 isolation: isolate로 설정한 요소는 새로운 쌓임 맥락이 생성되기 때문에 그렇지 않은 형제 요소보다 위에 쌓입니다.

블렌딩되는 범위를 제한할 때 유용

isolation: isolate로 설정으로 인해서 쌓임 맥락(Stacking context)이 생성된 요소는 mix-blend-mode 속성으로 설정된 블렌딩 시 합성을 처리할 때 외부와 분리되어 있는 독립적인 격리 그룹(isolated group)으로 처리하기 때문에 블렌딩되는 범위를 제한할 때 유용하게 사용됩니다.

HTML 
<div class="bg-layer">
    <div class="middle-layer">
        <div class="example">non-isolated</div> <!-- mix-blend-mode를 적용할 요소 -->
    </div>
</div>
<div class="bg-layer">
    <div class="middle-layer isolated-layer"> <!-- 블렌딩 시 합성을 처리할 때
                                                   외부와 분리되어 있는
                                                   독립적인 격리 그룹(isolated group)으로 처리 -->
        <div class="example">isolated</div> <!-- mix-blend-mode를 적용할 요소 -->
    </div>
</div>
CSS 
.bg-layer {
    background-color: green;
    margin: 0.5em;
    padding: 1em;
}
.example {
    color: white;
    font-weight: 900;
    font-size: 2.4em;
    background-color: blue;
    border: 6px solid red;
    mix-blend-mode: overlay;
}
.middle-layer {
    background-color: transparent;
}
.isolated-layer {
    isolation: isolate;
}
실제 적용된 모습

이 예제에서 실제 적용된 모습을 보면 isolation: isolate로 설정된 .isolated-layer는 쌓임 맥락(Stacking context)이 생성되어 이 요소에 포함되어 있는 mix-blend-mode 속성이 설정된 요소가 블렌딩 시 합성을 처리할 때 뒷 배경 중 .isolated-layer까지만 블렌딩되는 범위로 계산하고 그보다 더 아래에 위치한 뒷배경(.bg-layer)은 분리되기 때문에 블렌딩되는 범위는 isolation: isolate로 설정된 .isolated-layer까지만 처리한 것을 알 수 있습니다. 반면에서 isolation: isolate가 설정되어 있지 않은 요소의 블렌딩되는 범위는 뒷배경 레이어들이 모두 쌓임 맥락(Stacking context)이 생성되어 있지 않으므로, 전체 뒷배경 레이어까지 모두 계산됩니다.

브라우저 호환성

isolation 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
isolation 41 79 36 8

명세서

isolation 속성의 명세서 사양
명세서 사양
isolation Compositing and Blending Module Level 2
#isolation
Isolated Groups Compositing and Blending Module Level 2
#isolatedgroups

같이 보기