HTML DOM 스타일 isolation 속성 – 요소 격리로 배경 혼합 방지하기

HTML DOM 스타일 isolation 속성이란?

HTML DOM의 isolation 속성은 해당 요소가 새로운 쌓임 맥락(stacking context)을 생성할지 여부를 정의합니다. 이 속성은 별도의 스택 요소를 만들어 요소가 배경과 혼합(blending)되는 것을 방지하는 데 주로 사용됩니다.

특히 mix-blend-mode처럼 요소를 배경과 섞어 렌더링하는 CSS 기능과 함께 사용할 때 매우 유용합니다. isolation을 적용하면 내부 요소가 부모 요소나 페이지 배경의 색상과 섞이지 않고 독립적으로 표시됩니다.

구문(Syntax)

isolation 속성을 설정하는 기본 구문은 다음과 같습니다.

object.style.isolation = "auto | isolate | initial | inherit"

속성 값 설명

값	설명
auto	기본값입니다. 요소가 새로운 쌓임 맥락을 명시적으로 생성하지 않습니다.
isolate	요소가 새로운 쌓임 맥락을 생성하여 내부 콘텐츠가 배경과 혼합되는 것을 차단합니다.
initial	이 속성을 초기값(auto)으로 되돌립니다.
inherit	부모 요소의 isolation 속성 값을 그대로 상속받습니다.

예제 코드

아래 예제는 버튼을 클릭하면 내부 div 요소에 isolation 속성을 적용하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #demo{
        background-color: lightpink;
        width: 250px;
        height: 250px;
    }
    #demo2{
        width: 100px;
        height: 100px;
        border: 3px solid red;
        padding: 4px;
        mix-blend-mode:difference;
    }
</style>
<script>
    function changeIsolation() {
        document.getElementById("demo1").style.isolation="isolate";
        document.getElementById("Sample").innerHTML="The inner div has now been isolated";
    }
</script>
</head>
<body>
    <div id="demo">
    <div id="demo1">
    <div id="demo2">
        INNER DIV
    </div>
    </div>
    </div>
    <p>Change the isolation mode for the inner div by clicking the below button</p>
    <button onclick="changeIsolation()">Change Isolation</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

페이지를 처음 열면 분홍색 배경(#demo) 안에 빨간 테두리의 내부 div(demo2)가 표시되며, mix-blend-mode: difference에 의해 배경과 혼합된 상태로 렌더링됩니다.

HTML DOM 스타일 isolation 속성 – 요소 격리로 배경 혼합 방지하기

"Change Isolation" 버튼을 클릭하면 자바스크립트에 의해 demo1 요소에 isolation: isolate가 적용되어, 내부 div가 새로운 쌓임 맥락으로 격리되고 더 이상 배경과 혼합되지 않습니다.

HTML DOM 스타일 isolation 속성 – 요소 격리로 배경 혼합 방지하기

이처럼 isolation 속성은 블렌딩 효과가 의도치 않게 상위 요소까지 영향을 미치는 것을 막고 싶을 때 간단하게 해결할 수 있는 방법을 제공합니다.