container-name

구문

container-name: none;

/* 하나의 이름 */
container-name: myLayout;

/* 여러 개의 이름 */
container-name: myPageLayout myComponentLibrary;

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

값

none

기본값입니다. 쿼리 컨테이너에 이름이 지정되지 않습니다.

<custom-ident>

컨테이너를 식별하는 데 사용되는 대소문자를 구분하는 문자열입니다. 다음과 같은 조건이 적용됩니다.

• 이름은 or, and, not, default와 같아서는 안 됩니다.
• 이름 값은 따옴표로 감싸면 안 됩니다.
• 대시(-)가 포함된 식별자(작성자가 정의한 식별자)는 사용할 수 있습니다. (예시: --container-name)
• 공백으로 구분된 여러 개의 이름을 나열할 수 있습니다.

형식 정의

형식 구문

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

예제

컨테이너 이름 사용하기

다음은 제목과 텍스트로 구성된 카드 컴포넌트의 HTML 예시입니다.

<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

컨테인먼트 맥락을 생성하려면 CSS에서 요소에 container-type 속성을 추가하면 됩니다. 아래 예시는 카드의 메타 정보와 게시글 요약 두 부분에 각각 컨테인먼트 맥락을 생성하는 방법을 보여줍니다.

.post-meta {
  container-type: inline-size;
}

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

@container @-규칙을 사용해 컨테이너 쿼리를 작성하면, 쿼리의 조건이 참일 때 해당 컨테이너의 요소에 스타일이 적용됩니다. 아래 예시는 두 개의 컨테이너 쿼리를 보여주는데, 하나는 .post-excerpt 요소의 내용에만 적용되고, 다른 하나는 .post-meta와 .post-excerpt의 내용 모두에 적용됩니다.

@container excerpt (width >= 400px) {
  p {
    visibility: hidden;
  }
}

@container (width >= 400px) {
  p {
    font-size: 2rem;
  }
}

컨테이너 쿼리 작성에 대한 더 자세한 내용은 CSS 컨테이너 쿼리 페이지를 참고하세요.

여러 개의 컨테이너 이름 사용하기

컨테이너 맥락에 여러 개의 이름을 공백으로 구분하여 지정할 수도 있습니다.

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

이렇게 하면 @container @-규칙에서 두 이름 중 어느 것이든 사용해 컨테이너를 선택할 수 있습니다. 이는 여러 컨테이너 쿼리에서 각각 다른 조건으로 같은 컨테이너를 타겟팅하고 싶을 때 유용합니다.

@container meta (width <= 500px) {
  p {
    visibility: hidden;
  }
}

@container card (width <= 200px) {
  h2 {
    font-size: 1.5em;
  }
}

명세서

브라우저 호환성

같이 보기

• CSS 컨테이너 쿼리
• 컨테이너 크기 및 스타일 쿼리 사용하기
• 컨테이너 스크롤 상태 쿼리 사용하기
• @container @-규칙
• CSS container 축약형 속성
• CSS container-type 속성
• CSS content-visibility 속성