특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립(격리)되어 있음을 나타낼 때 사용한다. 웹브라우저는 문서를 렌더링시 필요한 계산을 문서의 전체 DOM이 아닌 일부에서만 수행함으로써 성능 향상에 도움을 준다.
contain
속성은 위젯 내부 콘텐츠가 외부에 영향을 주는 것을 방지할 수 있으므로 서로 독립된 많은 양의 위젯이 존재하는 웹페이지에서 유용하다.
이 속성에 layout
, paint
, strict
, content
값을 사용하면 다음이 생성된다.
none | strict | content | [ size || layout || style || paint ]
none
, strict
, content
중에서 지정하거나 size
, layout
, style
, paint
키워드를 원하는 대로 임의의 순서로 지정하면 된다.
layout || style || paint || [ size | inline-size ]
CSS Containment Module Level3에서 inline-size
가 추가되었다.
layout paint style
로 적용하므로 요소에 대한 size
를 제외한 모든 형태의 격리 규칙을 활성화한다. 다음과 동일하다.
contain:layout paint style;
요소의 인라인 크기를 포함한다. 기본 박스의 인라인 크기가 콘텐츠에 직접적으로 의존하는 것을 방지할 수 있다.
요소에 대한 layout
격리를 활성화한다. 따라서 격리가 적용된 박스가 레이아웃을 위해 완전히 불투명해진다. 외부의 어떤 것도 내부 레이아웃에 영향을 줄 수 없으며 그 반대도 마찬가지이다.
요소에 대한 paint
격리를 활성화한다. 따라서 격리가 적용된 박스의 하위 항목이 경계 외부에 표시되지 않으므로 요소가 화면 밖에 있거나 보이지 않는 경우 해당 하위 항목도 표시되지 않는다.
size
격리를 활성화한다. 따라서 하위 항목을 검사할 필요 없이 격리 규칙을 배치할 수 있다. 요소의 크기를 계산할 때 자손의 크기는 고려하지 않는다.
size, layout paint style
를 적용하므로 요소에 대한 모든 형태의 격리 규칙을 활성화한다. 다음과 동일하다.
contain: size layout paint style;
요소에 대한 style
격리를 활성화한다. 이렇게 하면 요소와 그 하위 요소 이상에 영향을 미칠 수 있는 속성의 경우 해당 효과가 요소를 벗어나지 않는다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
격리가 적용되지 않으며 요소가 정상적으로 렌더링된다.
layout paint style
로 적용하므로 요소에 대한 size
를 제외한 모든 형태의 격리 규칙을 활성화한다. 다음과 동일하다.
contain:layout paint style;
요소에 대한 layout
격리를 활성화한다. 따라서 격리가 적용된 박스가 레이아웃을 위해 완전히 불투명해진다. 외부의 어떤 것도 내부 레이아웃에 영향을 줄 수 없으며 그 반대도 마찬가지이다.
초기 렌더링의 결과는 BOX 1과 BOX 2는 자식 요소 div
가 각각 position
속성이 fixed
, float
속성이 left
값을 가지고 있다. 따라서 fixed
값을 갖는 요소는 뷰포트 기준으로 상단 20px
, 오른쪽 20px
의 위치에 있다. float
속성 값을 갖는 요소는 왼쪽으로 부유했다. 그 영향으로 다음 콘텐츠의 위치가 조정된다.
이제 set layout to containment 체크박스를 선택하면 BOX 1은 layout
이 격리되면서 다른 요소에 영향을 주지 않는다. 따라서 BOX 1의 자식 요소가 float
속성이 left
임에도 다음 콘텐츠가 영향을 받지 않는다. 또한 position
속성 값이 fixed
값을 갖는 요소는 독자적인 레이아웃 처리를 할 수 있기에 위치가 조정된다.
요소에 대한 paint
격리를 활성화한다. 따라서 격리가 적용된 박스의 하위 항목이 경계 외부에 표시되지 않으므로 요소가 화면 밖에 있거나 보이지 않는 경우 해당 하위 항목도 표시되지 않는다.
paint
격리가 적용된 첫번째 div
요소 내의 콘텐츠는 경계를 벗어난 하위 요소를 표시하지 않는다.
size
격리를 활성화한다. 따라서 하위 항목을 검사할 필요 없이 격리 규칙을 배치할 수 있다. 요소의 크기를 계산할 때 자손의 크기는 고려하지 않는다.
size, layout paint style
를 적용하므로 요소에 대한 모든 형태의 격리 규칙을 활성화한다. 다음과 동일하다.
contain: size layout paint style;
요소에 대한 style
격리를 활성화한다. 이렇게 하면 요소와 그 하위 요소 이상에 영향을 미칠 수 있는 속성의 경우 해당 효과가 요소를 벗어나지 않는다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Containment Module Level 2 | Last review date: 2023-1-25 |