Properties

Properties

Editing
  • account_tree
  • bug_report

contain

특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립(격리)되어 있음을 나타낼 때 사용한다. 웹브라우저는 문서를 렌더링시 필요한 계산을 문서의 전체 DOM이 아닌 일부에서만 수행함으로써 성능 향상에 도움을 준다.

설명

contain 속성은 위젯 내부 콘텐츠가 외부에 영향을 주는 것을 방지할 수 있으므로 서로 독립된 많은 양의 위젯이 존재하는 웹페이지에서 유용하다.

이 속성에 layout, paint, strict, content 값을 사용하면 다음이 생성된다.

  • 새로운 컨테이너 블록
  • 새로운 스태킹 컨텍스트(stacking context)
  • 새로운 BFC(block formatting context)

사용 가능한 값 타입

<'contain'>

DEVDIC-Specified Data Types

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

    CSS Containment Module Level 2

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

    contain:layout paint style;
  • inline-size

    CSS Containment Module Level 3

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

  • layout

    CSS Containment Module Level 2

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

  • paint

    CSS Containment Module Level 2

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

  • size

    CSS Containment Module Level 2

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

  • strict

    CSS Containment Module Level 2

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

    contain: size layout paint style;
  • style

    CSS Containment Module Level 2

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

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

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

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈'contain'〉none
    CSS Containment Module Level 2

    격리가 적용되지 않으며 요소가 정상적으로 렌더링된다.

  • CSS Containment Module Level 2

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

    contain:layout paint style;
    Example
  • CSS Containment Module Level 2

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

    Example
    Example

    초기 렌더링의 결과는 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 값을 갖는 요소는 독자적인 레이아웃 처리를 할 수 있기에 위치가 조정된다.

  • CSS Containment Module Level 2

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

    Example
    Example

    paint 격리가 적용된 첫번째 div 요소 내의 콘텐츠는 경계를 벗어난 하위 요소를 표시하지 않는다.

  • CSS Containment Module Level 2

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

    Example
  • CSS Containment Module Level 2

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

    contain: size layout paint style;
    Example
  • CSS Containment Module Level 2

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

버전 명세

Modules
Module NameStatusSummary
CSS Containment Module Level 2

Last review date: 2023-1-25

지원 웹브라우저