[css] CSS - isolation 속성 - 요소가 새 스택(stack: 쌓음) 콘텐츠를 생성해야 하는지 여부 지정 (= isolation속성 = 아이소레이션속성)

1. isolation 예제 - 요소가 새 스택 콘텐츠를 생성해야 하는지 여부 지정
2. isolation 정의
3. isolation 구문

isolation 예제 - 요소가 새 스택 콘텐츠를 생성해야 하는지 여부 지정

 

<style>

#box {width: 250px; height: 250px;}

.bg {background-color: pink;}

.sub {

  width: 100px;

  height: 100px;

  border: 1px solid black;

  padding: 2px;

  mix-blend-mode: difference;

}

#A {isolation: auto;}

#B {isolation: isolate;}

</style>

<div id="box" class="bg">

  <div id="A">

      <div class="bg sub">A</div>

  </div>

  <div id="B">

      <div class="bg sub">B</div>

  </div>

</div>

결과보기

isolation 정의

 

요소가 새 스택(stack: 쌓음) 콘텐츠를 생성해야 하는지 여부 지정

 

---

 

1. 아래 속성들과 함께 사용 시 효과적.

• background-blend-mode 속성 - 해당요소 각 (배경색/배경미미지)층의 혼합방식 지정. 
• mix-blend-mode 속성 - 해당요소의 부모요소 배경색과의 '결합/혼합' 방법 지정.

 

2.

• 기본값: auto
• 적용대상: 모든 요소. SVG에서는 컨테이너 요소, 그래픽 요소, 그래픽 참조 요소에 적용됨.
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.isolation="isolate";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN isolation 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/isolation

 

isolation 구문

 

selector {isolation: auto|isolate|initial|inherit;}

 

---

[속성값]

 

auto

요소에 적용된 속성 중 하나가 이를 요구하는 경우에만 새로운 스택 콘텐츠 생성. (기본값)

 

isolate

새로운 스택 콘텐츠 생성.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.