목차
isolation 예제 - 요소가 새 스택 콘텐츠를 생성해야 하는지 여부 지정
isolation 정의
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. 아래 속성들과 함께 사용 시 효과적.
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
부모요소의 속성값 상속.
주소 복사
랜덤 이동
최신댓글