Container Query는 CSS의 최신 기능으로, 요소의 크기 기반으로 스타일을 동적으로 조정할 수 있는 강력한 방법입니다. 이 기능을 활용하면, 기존의 반응형 웹 디자인을 넘어서, 더 세밀하고 유연한 디자인을 구현할 수 있습니다. 본 포스트에서는 Container Query의 개념과 활용 방법을 통해, 디바이스나 화면 크기에 맞춰 최적화된 디자인을 어떻게 만들 수 있는지 소개합니다.
Container Query란 무엇인가?
ContainerQuery는 CSS에서 컨테이너의 크기를 기준으로 스타일을 변경할 수 있게 해주는 기능입니다. 이전까지 반응형 웹 디자인에서 사용되던 미디어 쿼리는 뷰포트(전체 화면)의 크기를 기준으로 스타일을 변경하는 방식이었습니다. 반면, ContainerQuery는 요소의 크기를 기준으로 스타일을 조정하기 때문에, 더욱 세밀하고 디테일한 디자인 조정이 가능합니다.
Container Query의 주요 특징
- 상위 요소의 크기에 따라 자식 요소의 스타일을 변경할 수 있음.
- 뷰포트 크기뿐만 아니라, 요소 크기에 기반한 반응형 디자인 구현.
- 기존의 미디어 쿼리보다 더 유연한 디자인 조정 가능.
Container Query의 사용법
1. 기본 문법
ContainerQuery는 @container를 사용하여 스타일을 적용합니다. 기본적인 문법은 다음과 같습니다.
@container (min-width: 200px) {
.child-element {
background-color: blue;
}
}
위 예시에서 .child-element는 부모 요소의 너비가 200px 이상일 때 배경색이 파란색으로 변경됩니다. 이처럼 요소의 크기에 따라 스타일을 변경할 수 있습니다.
2. container-type 속성 설정
ContainerQuery를 적용하려면, 먼저 해당 요소가 컨테이너로 인식될 수 있도록 container-type 속성을 설정해야 합니다. 이를 통해 스타일을 동적으로 적용할 수 있게 됩니다.
.container {
container-type: inline-size;
}
container-type: inline-size는 컨테이너의 너비를 기준으로 스타일을 적용할 수 있게 해줍니다. 이렇게 설정된 요소의 크기 변화를 감지하여, 그에 맞는 스타일을 적용할 수 있습니다.
3. 예시: 반응형 카드 레이아웃
ContainerQuery를 활용하여 카드 레이아웃을 구현하는 예시입니다. 이 예시에서는 카드의 크기가 부모 요소의 크기에 따라 자동으로 조정됩니다.
<div class="container"> <div class="card">카드 1</div> <div class="card">카드 2</div> <div class="card">카드 3</div> </div>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
container-type: inline-size;
}
.card {
padding: 20px;
background: lightgray;
margin: 10px;
border-radius: 5px;
}
@container (max-width: 500px) {
.container {
grid-template-columns: 1fr;
}
}
위 예시에서는 .container 요소가 500px 이하로 줄어들면, 자식 요소인 .card들이 한 줄로 표시되도록 설정합니다. 이는 화면 크기뿐만 아니라, .container 요소의 크기에 따라 반응하는 레이아웃을 제공합니다.
Container Query를 활용한 디자인 개선
1. 보다 세밀한 레이아웃 제어
기존의 반응형 디자인에서는 주로 뷰포트 크기만을 고려하여 스타일을 변경했습니다. 하지만 ContainerQuery를 사용하면, 부모 요소의 크기를 기준으로 디자인을 조정할 수 있습니다. 이로 인해, 화면 크기에 맞는 유연한 레이아웃을 구성할 수 있으며, 특히 모바일과 데스크탑 환경에서 일관된 사용자 경험을 제공할 수 있습니다.
2. 복잡한 레이아웃에서도 유용함
ContainerQuery는 특히 복잡한 레이아웃을 설계할 때 매우 유용합니다. 예를 들어, 여러 개의 네비게이션 바나 사이드바를 가진 페이지에서 각 영역이 화면 크기에 따라 유동적으로 변할 수 있도록 합니다. 이렇게 하면 각 요소가 디바이스 크기나 부모 컨테이너 크기에 맞춰 자연스럽게 조정되기 때문에, 사용자 경험이 더욱 향상됩니다.
3. 반응형 이미지 및 텍스트 스타일
ContainerQuery를 사용하면 반응형 이미지나 텍스트 크기도 쉽게 조절할 수 있습니다. 예를 들어, 부모 컨테이너의 크기에 따라 이미지 크기를 동적으로 조정하고, 텍스트의 폰트 크기나 줄 간격을 최적화할 수 있습니다.
@container (min-width: 500px) {
.image {
width: 100%;
height: auto;
}
.text {
font-size: 1.5rem;
}
}
Container Query의 호환성
현재 Container Query는 최신 브라우저에서 지원되고 있습니다. 다만, 일부 구형 브라우저에서는 지원되지 않으므로, 사용하기 전에 브라우저 호환성을 확인하는 것이 중요합니다. 이를 위해, @container를 사용할 때는 폴백 기능을 추가하거나, 기타 대체 기술을 사용해야 할 수 있습니다.
ContainerQuery는 반응형 디자인을 한 단계 더 발전시킬 수 있는 강력한 도구입니다. 부모 요소의 크기를 기준으로 자식 요소의 스타일을 동적으로 변경할 수 있기 때문에, 더 세밀하고 유연한 레이아웃을 구현할 수 있습니다. 이 기술을 활용하면 다양한 디바이스와 화면 크기에서 일관된 사용자 경험을 제공할 수 있으며, 복잡한 레이아웃에서도 효과적으로 적용할 수 있습니다. ContainerQuery는 아직은 일부 브라우저에서만 지원되지만, 향후 모든 브라우저에서 널리 사용될 가능성이 높기 때문에 미리 적용해보는 것이 좋습니다.
