1. 기존 media query 와의 차이점
컨테이너 쿼리가 없었을 시절에는 자바스크립트의 `ResizeObserver` api를 통해서 특정 요소의 크기 변화를 관찰해야 했습니다. 하지만, 이제 간단한 css container 문법 지정을 통해 매우 간편하게 반응형 쿼리를 구현할 수 있게 되었습니다.
또한 기존의 media query는 화면 전체(browser viewport)를 기준으로 반응형을 구현해야 했지만, container query는 하나의 요소를 기준으로 잡아 그 요소의 변화에 따른 반응형 쿼리를 구현할 수 있게 되었습니다.
2. container queries 사용법
브라우저 viewport를 기준으로 잡는 것이 아니라 특정 요소를 기준으로 잡아야 합니다. 그러기 위해서는 특정 요소를 컨테이너로 등록해야 합니다.
2-1. 특정 요소를 컨테이너로 등록 및 타입 지정
컨테이너 이름 짓기 | container-name
container-name 속성을 통해서 컨테이너의 이름을 지정합니다.
div {
container-name: div-container; /* 컨테이너 쿼리 요소 이름 */
}
컨테이너 요소의 타입 지정 | container-type
이후 이 컨테이너의 어떤 속성에 따라 반응형을 구현할 것인지 `container-type` 속성을 적어줍니다.
container-type에는 `inline-size`, `size`, `normal` 속성값이 존재합니다.
`inline-size`: 인라인 레벨 기준으로 컨테이너를 적용. 요소의 width 값에 따라 반응형이 동작됩니다.
`size`: 블록 레벨 기준으로 컨테이너를 적용. width뿐만 아니라 height 값에 따라 반응형이 동작됩니다.
`normal`: 해당 값이 부여된 요소를 container에서 제외시킵니다. 일종의 none 의미라고 볼 수 있습니다.
div {
container-name: div-container;
container-type: inline-size; /* 왠만한 상황에선 inline-size 로 이용한다고 보면 된다 */
}
/* 단축 표현 가능 */
div {
/* container-name / container-type */
container : div-container / inline-size; /* 한줄로도 단축 표현이 가능하다 */
}화면상 어떤 요소의 높이를 기준으로 반응형을 구현하는 경우는 굉장히 보기 드물기에 웬만해서는 inline-size로만 거의 구현한다고 볼 수 있습니다.
2-2. @container 반응 치수 지정
`@media` 쿼리에 익숙하다면 어려움이 없는 문법입니다.
다른 점은 위에서 지정한 컨테이너 이름을 적어줄 수 있다는 점입니다. 만약 기준으로 삼을 컨테이너의 이름을 지정해주지 않는다면 모든 컨테이너에 대해 전역으로 반응하게 됩니다.
/* 모든 컨테이너 요소에 반응 */
@container (min-width: 700px) {
div {
font-size: 2em;
}
}
/* 특정 container-name의 요소에 반응 --> div-container라는 container-name을 가진 요소에 반응 */
@container div-container (min-width: 700px) {
div {
font-size: 2em;
}
}
2-3. 컨테이너 쿼리만의 길이 단위
등록한 container의 너비와 높이를 기준으로 하는 상대 기준점 단위가 존재합니다. 이 단위값을 이용하여 요소의 구체적인 길이 값을 다시 계산할 필요 없이 다른 컨테이너에서 유연하게 사용할 수 있습니다.
- cqw: 컨테이너 쿼리 너비의 1%
- cqh: 컨테이너 쿼리 높이의 1%
- cqi: 컨테이너 쿼리 인라인 크기의 1%
- cqb: 컨테이너 쿼리 블록 크기의 1%
- cqmin: cqi 또는 cqb 중 더 작은 값
- cqmax: cqi 또는 cqb 중 더 큰 값
/* 컨테이너의 인라인 크기를 기준으로 제목의 글꼴 크기를 설정 */
@container (min-width: 700px) {
div {
font-size: 1em + 2cqi;
}
}
자바스크립트에서 css단위를 사용할 때 모든 단위를 일일이 기억할 필요는 없습니다.
`CSS`라는 단위 Static Utility API가 있다는 거 아시나요?
CSS만 입력해도 자동으로 `.`(닷노테이션)을 통해 어떤 단위들이 있는 지 쭈욱 볼 수 있습니다.
예를 들어 `CSS.rem(1) + CSS.cqi(2);` // 이는 1rem + 2cqi와 같습니다.
3. 컨테이너 쿼리 브라우저 지원 범위
구형 IE 브라우저 빼고는 이제 다 지원해준다고 볼 수 있습니다.
