@media vs @container
media query는 일반적으로 viewport의 너비를 기준으로 적용한다. 때문에 sidebar등 화면 내부의 특정 영역 안에 위치할 디자인을 만드려면 본문과 완전히 같은 디자인을 적용하더라도 본문과 구분하여 따로 관리해야하는 불편함이 있었다.
container query는 그런 상황에서 media query를 대용할 수 있으며 viewport대신 영역을 감싼 container를 기준으로 적용된다. container query의 사용법은 media query와 유사하다.
/* 추가되는 부분 */
main, .sidebar {
container-type: inline-size;
}
/* container의 max-width를 정의하여 그보다 너비가 작을 경우 flex-direction을 변경 */
@container (max-width: 800px) {
.card {
flex-direction: column;
}
.card-header {
width: 100%;
}
}container-type...?
container-type attribute는 size, inline-size, normal의 세 가지 값을 가질 수 있다. normal은 해당 값이 부여된 htmlelement를 container에서 제외한다. size는 container를 블록 레벨로 적용하기 때문에 height값이 조건에 해당할 때에도 container query를 적용한다.
inline-size는 인라인 요소를 기준으로 컨테이너를 적용하기 때문에 width값에 따라 container query를 적용할 수 있다. 용법을 고려해볼 때 대부분의 상황에서 inline-size를 적용하게 될 것이다.
container-name
body {
container-type: inline-size;
container-name: body;
}
@container body (max-width: 1000px) {
.card {
background: red;
}
}container-name attribute를 통해 클래스명을 분리할 필요 없이 함수를 명명하는 것과 마찬가지로 container query의 적용 대상을 한정할 수 있다.
cqw, cqv
viewport의 vw,vh처럼 container의 너비와 높이를 기준으로 하는 별개의 단위이다. container query의 기준점을 정할 때 상대단위로 이용할 수 있다.
적용 브라우저는?
아쉽게도 2022.11.07기준으로 Working Draft단계이며 파이어폭스에서는 전혀 지원하지 않아 보편적으로 사용하기에는 무리가 있다.
참고
