CSS Keywords

{object_name}

CSS Containment Module

  • Contain

    • content

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

    • inline-size

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

    • layout

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

    • paint

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

    • size

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

    • strict

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

    • style

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

  • Container Features

    • landscape

      portrait가 아닌 경우를 의미한다.

    • portrait

      height feature 값이 width feature 값보다 크거나 같을 때를 의미한다.

  • Container Queries

    • none

      쿼리 컨테이너(query container)에 이름이 없다.

  • Container Type

    • inline-size

      컨테이너 자체의 인라인 축에서 컨테이너 크기 쿼리에 대한 쿼리 컨테이너(query container)을 설정한다. 기본 박스(principal box)에 레이아웃 포함(layout containment), 스타일 포함(style containment), 인라인 크기 포함(inline-size containment)을 적용한다.

    • normal

      컨테이너 크기 쿼리에 대한 쿼리 컨테이너(query container)가 아니지만 컨테이너 스타일 쿼리(container style queries)에 대한 쿼리 컨테이너(query container)로 남아 있다.

    • size

      인라인 축과 블록 축 모두에서 컨테이너 크기 쿼리를 위한 쿼리 컨테이너(query container)를 설정한다. 기본 박스(principal box)에 레이아웃 포함(layout containment), 스타일 포함(style containment), 크기 포함(size containment)을 적용한다.

  • Content Visibility

    • auto

      요소에 대한 layout, style, paint 격리를 활성화한다. 요소가 사용자와 관련이 없는 경우(뷰포트 바깥) 해당 콘텐츠를 건너뛴다.

    • hidden

      요소의 콘텐츠를 건너뛴다. 건너뛴 콘텐츠는 페이지에서 찾기, 탭 순서 탐색 등과 같은 유저 에이전트(user agent) 기능에 액세스할 수 없으며 선택 가능하거나 포커스를 맞출 수 없다.

    • visible

      요소의 콘텐츠가 정상적으로 배치되고 렌더링된다.

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com