container

Baseline 2023
Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

container 단축 속성 CSS 속성은 해당 요소를 쿼리 컨테이너로 설정하고, 컨테이너 쿼리에서 사용되는 컨테인먼트 맥락의 이름과 유형을 지정합니다.

구성 속성

이 속성은 다음 CSS의 단축형입니다.

구문

css
/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

/* 전역 값 */
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;

값

<container-name>

컨테인먼트 맥락에 사용되는 대소문자를 구분하는 이름입니다. 구문에 대한 자세한 내용은 container-name 속성 페이지에서 확인할 수 있습니다.

<container-type>

컨테인먼트 맥락의 유형입니다. 구문에 대한 자세한 내용은 container-type 속성 페이지에서 확인할 수 있습니다.

형식 정의

초기값as each of the properties of the shorthand:
적용대상all elements
상속no
Percentagesas each of the properties of the shorthand:
계산 값as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

형식 구문

container = 
  <'container-name'> [ / <'container-type'> ]?  

<container-name> = 
  none             |
  <custom-ident>+  

<container-type> = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]

예제

인라인 사이즈 컨테인먼트를 설정하기

다음은 이미지, 제목, 그리고 텍스트로 구성된 카드 컴포넌트의 HTML 예시입니다.

html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

명시적으로 컨테이너 맥락을 생성하려면, container-type을 선언하고 필요에 따라 container-name을 함께 지정하면 됩니다.

css
.post {
  container-type: inline-size;
  container-name: sidebar;
}

container 축약형 속성은 이 과정을 한 번에 선언할 수 있도록 더 간단하게 만들어줍니다.

css
.post {
  container: sidebar / inline-size;
}

이후에는 @container @-규칙을 사용해 해당 컨테이너를 이름으로 선택할 수 있습니다.

css
@container sidebar (width >= 400px) {
  /* <stylesheet> */
}

명세서

Specification
CSS Conditional Rules Module Level 5
# container-shorthand

같이 보기