CSS Types

CSS Types

Editing

<'contain'>

데브딕에서 지정한 색인용 자료 타입

contain 속성에 사용되는 타입이다.

구문

  • CSS Containment Module Level 2
    none | strict | content | [ size || layout || style || paint ]

    none, strict, content 중에서 지정하거나 size, layout, style, paint 키워드를 원하는 대로 임의의 순서로 지정하면 된다.

  • CSS Containment Module Level 3
    layout || style || paint || [ size | inline-size ]

    CSS Containment Module Level3에서 inline-size가 추가되었다.

사용되는 키워드

키워드요약
content

layout paint style로 적용하므로 요소에 대한 size 를 제외한 모든 형태의 격리 규칙을 활성화한다. 다음과 동일하다.

contain:layout paint style;
inline-size

요소의 인라인 크기를 포함한다. 기본 박스의 인라인 크기가 콘텐츠에 직접적으로 의존하는 것을 방지할 수 있다.

layout

요소에 대한 layout 격리를 활성화한다. 따라서 격리가 적용된 박스가 레이아웃을 위해 완전히 불투명해진다. 외부의 어떤 것도 내부 레이아웃에 영향을 줄 수 없으며 그 반대도 마찬가지이다.

paint

요소에 대한 paint 격리를 활성화한다. 따라서 격리가 적용된 박스의 하위 항목이 경계 외부에 표시되지 않으므로 요소가 화면 밖에 있거나 보이지 않는 경우 해당 하위 항목도 표시되지 않는다.

size

size 격리를 활성화한다. 따라서 하위 항목을 검사할 필요 없이 격리 규칙을 배치할 수 있다. 요소의 크기를 계산할 때 자손의 크기는 고려하지 않는다.

strict

size, layout paint style를 적용하므로 요소에 대한 모든 형태의 격리 규칙을 활성화한다. 다음과 동일하다.

contain: size layout paint style;
style

요소에 대한 style 격리를 활성화한다. 이렇게 하면 요소와 그 하위 요소 이상에 영향을 미칠 수 있는 속성의 경우 해당 효과가 요소를 벗어나지 않는다.

none

어떠한 값도 설정하지 않음을 나타낸다.

버전 명세

Modules
Module NameStatusSummary
CSS Containment Module Level 2

Last review date: 2023-1-25

CSS Containment Module Level 3

Last review date: 2023-3-30