요즘 든 궁금증을CSS 컨테이너 쿼리를 뿌셔보자! About CSS Container Query
CSS 컨테이너 쿼리는 웹 개발에서 매우 중요한 도구입니다. 이 기능을 사용하면 요소의 스타일을 해당 요소의 컨테이너 크기에 따라 적용할 수 있습니다. 예를 들어, 컨테이너가 주변 컨텍스트에서 더 적은 공간을 가지고 있다면, 특정 요소를 숨기거나 더 작은 폰트를 사용할 수 있습니다. 컨테이너 쿼리는 뷰포트 크기나 기타 장치 특성에 기반한 스타일을 요소에 적용하는 미디어 쿼리의 대안입니다.
컨테이너 쿼리 사용하기
컨테이너 쿼리를 사용하려면, 먼저 요소에 containment context를 선언해야 합니다. 이를 위해 container-type 속성을 사용하고 값으로 size, inline-size, normal 중 하나를 사용합니다.
이 값들은 다음과 같은 효과를 가집니다:
size: 쿼리는 컨테이너의 인라인 및 블록 차원에 기반합니다. 컨테이너에 레이아웃, 스타일, 크기 containment를 적용합니다.inline-size: 쿼리는 컨테이너의 인라인 차원에 기반합니다. 요소에 레이아웃, 스타일, 인라인 크기 containment를 적용합니다.normal: 요소는 컨테이너 크기 쿼리에 대한 쿼리 컨테이너가 아니지만, 컨테이너 스타일 쿼리에 대한 쿼리 컨테이너로 남습니다.
다음은 제목과 일부 텍스트를 가진 블로그 포스트의 카드 컴포넌트에 대한 예를 고려해보세요.
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
container-type 속성을 사용하여 containment context를 생성할 수 있습니다.
.post {
container-type: inline-size;
}
다음으로, @container at-rule을 사용하여 컨테이너 쿼리를 정의합니다. 다음 예제의 쿼리는 스타일을 containment context를 가진 가장 가까운 조상의 크기에 따라 요소에 적용합니다.
이 쿼리는 컨테이너가 700px보다 넓으면 카드 제목에 대해 더 큰 글꼴 크기를 적용합니다.
/* 카드 제목에 대한 기본 헤딩 스타일 */
.card h2 {
font-size: 1em;
}
/* 컨테이너가 700px보다 클 경우 */
@container (min-width: 700px) {
.card h2 {
font-size: 2em;
}
}
컨테이너 쿼리를 사용하면, 카드는 페이지의 여러 영역에서 재사용될 수 있으며, 매번 어디에 배치될지를 특정하지 않아도 됩니다. 카드가 있는 컨테이너가 700px보다 좁으면, 카드 제목의 글꼴은 작게 될 것이고, 카드가 700px보다 넓은 컨테이너에 있으면, 카드 제목의 글꼴은 더 크게 될 것입니다.
컨테이너 쿼리의 문법에 대한 자세한 정보는 @container 페이지를 참조하세요.
containment context의 이름 지정
이전 섹션에서, 컨테이너 쿼리는 containment context를 가진 가장 가까운 조상에 기반하여 스타일을 적용했습니다. container-name 속성을 사용하여 containment context에 이름을 지정하는 것이 가능합니다. 이름이 지정되면, 특정 컨테이너를 대상으로 하는 @container 쿼리에서 이름을 사용할 수 있습니다.
sidebar라는 이름의 containment context를 생성합니다.
cssCopy code
.post {
container-type: inline-size;
container-name: sidebar;
}
그런 다음 @container at-rule을 사용하여 이 containment context를 대상으로 할 수 있습니다.
@container sidebar (min-width: 700px) {
.card {
font-size: 2em;
}
}
containment context의 이름 지정에 대한 자세한 정보는 container-name 페이지에서 확인할 수 있습니다.
컨테이너의 단축 구문
containment context를 선언하는 단축 방법은 container 속성을 사용하는 것입니다.
.post {
container: sidebar / inline-size;
}
컨테이너 쿼리 길이 단위
컨테이너 쿼리를 사용하여 컨테이너에 스타일을 적용할 때, 컨테이너 쿼리 길이 단위를 사용할 수 있습니다. 이 단위들은 쿼리 컨테이너의 차원에 상대적인 길이를 지정합니다. 컨테이너에 상대적인 길이 단위를 사용하는 컴포넌트는 다른 컨테이너에서 사용하기 위해 구체적인 길이 값을 다시 계산할 필요 없이 더 유연하게 사용할 수 있습니다.
컨테이너 쿼리 길이 단위는 다음과 같습니다:
cqw: 쿼리 컨테이너의 너비의 1%cqh: 쿼리 컨테이너의 높이의 1%cqi: 쿼리 컨테이너의 인라인 크기의 1%cqb: 쿼리 컨테이너의 블록 크기의 1%cqmin:cqi또는cqb중 더 작은 값cqmax:cqi또는cqb중 더 큰 값
cqi 단위를 사용하여 컨테이너의 인라인 크기에 기반한 제목의 글꼴 크기를 설정합니다.
@container (min-width: 700px) {
.card h2 {
font-size: max(1.5em, 1.23em + 2cqi);
}
}
이 단위들에 대한 자세한 정보는 Container query length units 참조를 참조하세요.
컨테이너 쿼리에 대한 대체 방법
아직 컨테이너 쿼리를 지원하지 않는 브라우저에 대해, 그리드와 flex를 사용하여 이 페이지에서 사용된 카드 컴포넌트에 대해 유사한 효과를 만들 수 있습니다.
grid-template-columns 선언을 사용하여 카드 컴포넌트에 대한 두 열 레이아웃을 생성합니다.
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
더 작은 뷰포트를 가진 장치에 대해 단일 열 레이아웃을 사용하려면, 그리드 템플릿을 변경하는 미디어 쿼리를 사용할 수 있습니다.
@media (max-width: 700px) {
.card {
grid-template-columns: 1fr;
}
}
참고자료 :
CSS container queries