container

구성 속성

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

• container-name
• container-type

구문

/* <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 속성 페이지에서 확인할 수 있습니다.

형식 정의

형식 구문

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

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

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

예제

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

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

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

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

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

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

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

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

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

명세서

브라우저 호환성

같이 보기

• CSS 컨테이너 쿼리
• 컨테이너 크기 및 스타일 쿼리 사용
• @container @-규칙
• CSS contain 속성
• CSS container-type 속성
• CSS container-name 속성
• CSS content-visibility 속성