container
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023년 2월.
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 |
| Percentages | as each of the properties of the shorthand:
|
| 계산 값 | as each of the properties of the shorthand:
|
| Animation type | as 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 |
브라우저 호환성
같이 보기
- CSS 컨테이너 쿼리
- 컨테이너 크기 및 스타일 쿼리 사용
@container@-규칙- CSS
contain속성 - CSS
container-type속성 - CSS
container-name속성 - CSS
content-visibility속성