CSS 컨테이너 쿼리: 요소 기반 반응형 디자인의 혁신

반응형 디자인은 10년 이상 웹 개발의 초석이었습니다. 전통적으로 우리는 미디어 쿼리를 사용하여 뷰포트 크기에 따라 레이아웃을 조정해 왔습니다. 그러나 이러한 접근 방식은 특히 복잡한 컴포넌트 기반 디자인을 다룰 때 때로는 제한적으로 느껴질 수 있습니다. CSS 컨테이너 쿼리는 컴포넌트가 뷰포트가 아닌 컨테이너 요소의 크기에 따라 조정되도록 하는 강력한 새 기능입니다.

CSS 컨테이너 쿼리란 무엇입니까?

컨테이너 쿼리는 요소 기반 반응형 디자인을 가능하게 하기 때문에 획기적입니다. "화면 크기가 얼마입니까?"라고 묻는 대신 "이 컴포넌트가 사용할 수 있는 공간은 얼마나 됩니까?"라고 물을 수 있습니다. 이를 통해 진정으로 재사용 가능하고 적응 가능한 컴포넌트를 만들 수 있는 가능성의 세계가 열립니다.

좁은 사이드바, 넓은 히어로 섹션 또는 다중 열 그리드와 같은 다양한 컨텍스트에 나타날 수 있는 카드 컴포넌트를 생각해 보세요. 미디어 쿼리를 사용하면 뷰포트 너비를 기준으로 이러한 각 시나리오에 대한 특정 규칙을 작성해야 합니다. 컨테이너 쿼리를 사용하면 카드는 전체 화면 크기에 관계없이 부모 컨테이너의 크기에 따라 레이아웃과 스타일을 지능적으로 조정할 수 있습니다.

컨테이너 쿼리를 사용하는 이유는 무엇입니까?

컨테이너 쿼리는 기존 미디어 쿼리에 비해 몇 가지 주요 이점을 제공합니다.

• 향상된 컴포넌트 재사용성: 복잡한 미디어 쿼리 로직 없이도 다양한 레이아웃에 완벽하게 적응하는 컴포넌트를 만드십시오.
• 단순화된 코드: 반응형 동작을 컴포넌트 자체 내에 캡슐화하여 필요한 CSS의 양을 줄이십시오.
• 향상된 유지 관리 용이성: 반응형 로직을 개별 컴포넌트로 격리하여 코드베이스를 더 쉽게 업데이트하고 유지 관리하십시오.
• 더 직관적인 디자인: 즉각적인 환경에 반응하는 컴포넌트를 디자인하여 보다 자연스럽고 예측 가능한 사용자 경험을 제공하십시오.
• 더 큰 유연성: 미디어 쿼리만으로는 달성하기 어렵거나 불가능한 보다 복잡하고 미묘한 반응형 디자인을 달성하십시오.

CSS 컨테이너 쿼리를 구현하는 방법

컨테이너 쿼리 사용의 실제적인 측면을 살펴보겠습니다. 첫 번째 단계는 컨테이너를 선언하는 것입니다. 부모 요소에서 container-type 속성을 사용하여 이 작업을 수행할 수 있습니다.

1. 컨테이너 정의

container-type 속성은 여러 값을 허용합니다.

• size: 컨테이너 쿼리는 컨테이너의 인라인 및 블록 크기에 모두 응답합니다.
• inline-size: 컨테이너 쿼리는 컨테이너의 인라인(가로 쓰기 모드의 너비) 크기에만 응답합니다. 이것이 가장 일반적이고 종종 가장 유용한 옵션입니다.
• block-size: 컨테이너 쿼리는 컨테이너의 블록(가로 쓰기 모드의 높이) 크기에만 응답합니다.
• normal: 요소가 쿼리 컨테이너가 아닙니다. 이것이 기본값입니다.
• style: 컨테이너 쿼리는 스타일 쿼리 및 컨테이너 이름 쿼리(나중에 설명)에 응답하여 컨테이너에 설정된 사용자 정의 속성을 쿼리할 수 있습니다.

인라인 크기에 응답하는 컨테이너를 정의하는 예는 다음과 같습니다.

.card-container { container-type: inline-size; }

약식 container 속성을 사용하여 container-type 및 container-name(나중에 설명)을 단일 선언으로 지정할 수도 있습니다.

.card-container { container: card / inline-size; }

이 경우 'card'는 컨테이너 이름입니다.

2. 컨테이너 쿼리 작성

컨테이너를 정의했으면 @container at-rule을 사용하여 쿼리를 작성할 수 있습니다. 구문은 미디어 쿼리와 유사하지만 뷰포트 크기를 대상으로 하는 대신 컨테이너의 크기를 대상으로 합니다.

@container card (min-width: 400px) { .card { flex-direction: row; } .card__image { width: 50%; } .card__content { width: 50%; } }

이 예에서는 "card" 컨테이너를 대상으로 하고 컨테이너의 너비가 최소 400px일 때 .card, .card__image 및 .card__content 요소에 스타일을 적용합니다. `(min-width: 400px)` 앞에 `card`가 있는 것을 확인하십시오. 이는 `container-name` 또는 약식 `container` 속성을 사용하여 컨테이너 이름을 지정한 경우에 중요합니다.

컨테이너 이름을 지정하지 않은 경우 컨테이너 이름을 생략할 수 있습니다.

@container (min-width: 400px) { .card { flex-direction: row; } .card__image { width: 50%; } .card__content { width: 50%; } }

min-width, max-width, min-height, max-height 및 orientation과 같이 미디어 쿼리에서 사용할 수 있는 동일한 범위의 미디어 기능을 사용할 수 있습니다.

3. 컨테이너 이름

컨테이너 이름을 지정하는 것은 특히 중첩된 컨테이너나 복잡한 레이아웃을 다룰 때 유용할 수 있습니다. container-name 속성을 사용하여 컨테이너에 이름을 할당할 수 있습니다.

.card-container { container-name: card; container-type: inline-size; }

그런 다음 컨테이너 쿼리에서 이름으로 컨테이너를 대상으로 지정할 수 있습니다.

@container card (min-width: 400px) { /* 'card' 컨테이너에 대한 스타일 */ }

4. 스타일 쿼리

컨테이너 스타일 쿼리를 사용하면 컨테이너의 크기가 아닌 스타일에 반응할 수 있습니다. 이는 사용자 정의 속성과 결합될 때 특히 강력합니다. 먼저 container-type: style로 컨테이너를 정의해야 합니다.

.component-container { container-type: style; }

그런 다음 @container style(--theme: dark)를 사용하여 사용자 정의 속성 --theme의 값을 쿼리할 수 있습니다.

.component-container { --theme: light; } @container style(--theme: dark) { .component { background-color: black; color: white; } }

이렇게 하면 컴포넌트가 뷰포트 크기가 아닌 CSS를 통해 설정된 구성을 기반으로 조정할 수 있습니다. 이는 테마 및 동적 스타일링에 대한 훌륭한 가능성을 열어줍니다.

컨테이너 쿼리의 실제 예

컨테이너 쿼리가 실제 시나리오에서 어떻게 사용될 수 있는지에 대한 구체적인 예를 살펴보겠습니다.

예제 1: 카드 컴포넌트

제품에 대한 정보를 표시하는 카드 컴포넌트를 상상해 보십시오. 좁은 컨테이너에서는 이미지와 콘텐츠를 수직으로 쌓고 싶을 수 있습니다. 더 넓은 컨테이너에서는 나란히 표시할 수 있습니다.

HTML:

제품 제목

제품 설명이 여기에 있습니다.

자세히 알아보기

CSS:

.card-container { container-type: inline-size; } .card { display: flex; flex-direction: column; border: 1px solid #ccc; padding: 16px; } .card__image { width: 100%; margin-bottom: 16px; } .card__content { width: 100%; } @container (min-width: 400px) { .card { flex-direction: row; } .card__image { width: 50%; margin-bottom: 0; } .card__content { width: 50%; } }

이 예에서는 카드가 처음에 이미지와 콘텐츠를 수직으로 쌓아서 표시합니다. 컨테이너의 너비가 400px에 도달하면 카드가 가로 레이아웃으로 전환됩니다.

예제 2: 탐색 메뉴

사용 가능한 공간에 따라 조정해야 하는 탐색 메뉴를 고려해 보십시오. 좁은 컨테이너(예: 모바일 사이드바)에서는 메뉴 항목을 수직 목록으로 표시하고 싶을 수 있습니다. 더 넓은 컨테이너(예: 데스크톱 헤더)에서는 가로로 표시할 수 있습니다.

HTML:

CSS:

.nav-container { container-type: inline-size; } .nav { list-style: none; padding: 0; margin: 0; } .nav__item { margin-bottom: 8px; } .nav__item a { display: block; padding: 8px 16px; text-decoration: none; color: #333; } @container (min-width: 600px) { .nav { display: flex; } .nav__item { margin-right: 16px; margin-bottom: 0; } .nav__item a { display: inline-block; } }

이 예에서는 탐색 메뉴가 처음에 항목을 수직 목록으로 표시합니다. 컨테이너의 너비가 600px에 도달하면 메뉴가 가로 레이아웃으로 전환됩니다.

예제 3: 주요 이미지가 있는 기사 레이아웃

기사가 배치된 위치에 따라 조정해야 하는 기사 레이아웃을 상상해 보십시오. 작은 미리보기 섹션에 있는 경우 이미지가 텍스트 위에 있어야 합니다. 주요 기사인 경우 이미지가 측면에 있을 수 있습니다.

HTML

기사 제목

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

CSS

.article-container { container-type: inline-size; } .article { display: flex; flex-direction: column; } .article-image { width: 100%; margin-bottom: 10px; } .article-content { width: 100%; } @container (min-width: 768px) { .article { flex-direction: row; } .article-image { width: 40%; margin-right: 20px; margin-bottom: 0; } .article-content { width: 60%; } }

브라우저 지원

컨테이너 쿼리에 대한 브라우저 지원은 Chrome, Firefox, Safari 및 Edge를 포함한 최신 브라우저에서 이제 훌륭합니다. 기능 및 구현 세부 정보가 발전할 수 있으므로 최신 브라우저 지원 정보는 Can I Use에서 확인하는 것이 중요합니다.

고려 사항 및 모범 사례

• 성능: 컨테이너 쿼리는 상당한 이점을 제공하지만 성능에 유의하는 것이 중요합니다. 복잡한 컨테이너 쿼리를 과도하게 사용하면 특히 구형 장치에서 렌더링 성능에 영향을 미칠 수 있습니다. 필요에 따라 코드를 철저히 테스트하고 최적화하십시오.
• 중첩: 컨테이너 쿼리를 중첩하여 더욱 복잡하고 적응 가능한 디자인을 만들 수 있습니다. 그러나 레이아웃을 과도하게 복잡하게 만들지 않도록 주의하십시오. 이렇게 하면 이해하고 유지 관리하기 어려울 수 있습니다.
• 특이성: 컨테이너 쿼리는 미디어 쿼리보다 특이성이 높으므로 다른 CSS 규칙과 어떻게 상호 작용하는지 알고 있어야 합니다. 예기치 않은 스타일 지정 동작이 발생하는 경우 CSS 특이성 도구를 사용하십시오.
• 점진적 개선: 컨테이너 쿼리를 점진적 개선으로 사용하는 것을 고려하십시오. 컨테이너 쿼리 없이도 잘 작동하는 기본 레이아웃을 제공한 다음 컨테이너 쿼리를 사용하여 지원하는 브라우저에 대한 레이아웃을 개선하십시오.
• 디자인 시스템: 컨테이너 쿼리는 디자인 시스템에 사용하기에 특히 적합합니다. 이를 통해 애플리케이션 내의 다양한 컨텍스트에 쉽게 적응할 수 있는 재사용 가능한 컴포넌트를 만들 수 있습니다.

컨테이너 쿼리 vs. 미디어 쿼리: 언제 무엇을 사용해야 합니까?

컨테이너 쿼리는 미디어 쿼리에 대한 강력한 대안을 제공하지만 각 접근 방식이 언제 가장 적합한지 이해하는 것이 중요합니다.

• 미디어 쿼리: 전체 화면 크기 또는 장치 특성(예: 방향, 해상도)을 기준으로 레이아웃을 조정해야 하는 경우 미디어 쿼리를 사용하십시오. 미디어 쿼리는 다양한 장치에서 사용할 수 있도록 레이아웃을 광범위하게 변경하는 데 이상적입니다.
• 컨테이너 쿼리: 컴포넌트가 사용할 수 있는 공간에 따라 개별 컴포넌트를 조정해야 하는 경우 컨테이너 쿼리를 사용하십시오. 컨테이너 쿼리는 애플리케이션 내의 다양한 컨텍스트에 완벽하게 적응할 수 있는 재사용 가능한 컴포넌트를 만드는 데 이상적입니다.

대부분의 경우 미디어 쿼리와 컨테이너 쿼리를 모두 함께 사용할 것입니다. 미디어 쿼리를 사용하여 애플리케이션의 전체 레이아웃을 설정한 다음 컨테이너 쿼리를 사용하여 해당 레이아웃 내에서 개별 컴포넌트의 모양과 동작을 미세 조정하십시오.

반응형 디자인의 미래

CSS 컨테이너 쿼리는 반응형 디자인의 진화에 있어 중요한 진전을 나타냅니다. 요소 기반 반응성을 가능하게 함으로써 개발자는 보다 유연하고 재사용 가능하며 유지 관리 가능한 컴포넌트를 만들 수 있습니다. 브라우저 지원이 계속 개선됨에 따라 컨테이너 쿼리는 모든 웹 개발자의 무기고에서 필수적인 도구가 될 것입니다.

글로벌 고려 사항

글로벌 사용자를 위해 컨테이너 쿼리를 구현할 때는 다음 사항을 고려하십시오.

• 텍스트 방향: 컨테이너 쿼리가 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 텍스트 방향 모두에서 올바르게 작동하는지 확인하십시오. left 및 right와 같은 물리적 속성 대신 inline-start 및 inline-end와 같은 논리적 속성을 사용하십시오.
• 글꼴 크기: 최적의 가독성을 위해 다른 언어에는 다른 글꼴 크기가 필요할 수 있습니다. 텍스트가 적절하게 크기가 조정되도록 상대적 글꼴 크기(예: em, rem)를 사용하십시오.
• 콘텐츠 길이: 일부 언어에서는 영어와 동일한 정보를 표현하는 데 더 많은 공간이 필요할 수 있습니다. 컴포넌트가 다양한 콘텐츠 길이를 수용할 수 있도록 다양한 언어로 레이아웃을 테스트하십시오.
• 문화적 관습: 컴포넌트를 디자인할 때 문화적 관습에 유의하십시오. 예를 들어 이미지와 텍스트의 배치는 문화에 따라 다를 수 있습니다.

결론

CSS 컨테이너 쿼리는 진정으로 반응성이 뛰어나고 적응 가능한 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 요소 기반 반응형 디자인을 채택함으로써 다양한 컨텍스트에 완벽하게 적응하고 코드를 단순화하며 전반적인 사용자 경험을 개선하는 컴포넌트를 만들 수 있습니다. 브라우저 지원이 계속 증가함에 따라 컨테이너 쿼리는 최신 웹 개발의 기본 부분이 될 것입니다. 이 기술을 수용하고 해당 기능을 실험하고 반응형 디자인에서 새로운 수준의 유연성을 확보하십시오. 이러한 접근 방식은 더 나은 컴포넌트 재사용성, 유지 관리 용이성 및 보다 직관적인 디자인 프로세스를 가능하게 하여 전 세계 프론트엔드 개발자에게 귀중한 자산이 됩니다. 컨테이너 쿼리로의 전환은 디자인에 대한 보다 컴포넌트 중심적인 접근 방식을 장려하여 전 세계 사용자를 위한 보다 강력하고 적응 가능한 웹 경험을 제공합니다.