CSS @컨테이너 규칙

정의와 사용법

CSS @container 규칙은 컨테이너의 크기나 스타일에 따라 다른 요소에 스타일을 정의하는 데 사용됩니다.

스타일 선언은 조건에 따라 필터링되며, 조건이 참이면 컨테이너에 적용됩니다. 컨테이너의 크기나 스타일 값이 변경될 때마다 조건이 다시 평가됩니다.

ヒント：CSS에서 컨테이너는 다른 요소를 포함하고 있으며, 이를 그룹화하여 스타일을 설정하는 요소입니다.

예제

컨테이너의 크기나 스타일에 따라 다른 요소에 스타일을 정의합니다：

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* myContainer가 500px보다 좁을 때 스타일 추가 */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

직접 테스트해 보세요

CSS 문법

@container containername (containerquery) {
  css declarations
}

속성 값

브라우저 지원

표格에서의 숫자는 이 @ 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.