CSS 컨테이너 쿼리(Container Queries): 반응형 디자인의 새로운 도구

반응형 웹 디자인을 구현할 때 우리는 보통 미디어 쿼리(Media Queries)를 사용합니다.

하지만 미디어 쿼리는 화면 크기를 기준으로 스타일을 변경하기 때문에 컴포넌트 중심의 디자인에서는 한계가 있습니다.

이 문제를 해결하는 새로운 도구가 바로 CSS 컨테이너 쿼리(Container Queries)입니다.

컨테이너 쿼리는 특정 컨테이너의 크기를 기준으로 스타일을 변경할 수 있어

컴포넌트 단위의 반응형 디자인을 쉽게 구현할 수 있습니다.

 

🧐 왜 컨테이너 쿼리가 필요한가요?

기존의 미디어 쿼리는 화면 전체의 크기만 고려하므로, 같은 컴포넌트가 다양한 컨텍스트(사이드바, 메인 콘텐츠 등)에서 다른 크기로 나타나야 하는 상황에 적합하지 않습니다.

예를 들어, 카드 컴포넌트가 부모 컨테이너의 크기에 따라 레이아웃을 변경해야 한다면 미디어 쿼리만으로는 이를 정확히 제어하기 어렵습니다. 컨테이너 쿼리를 사용하면 이런 문제를 손쉽게 해결할 수 있습니다.

 

🌟 컨테이너 쿼리의 기본 문법

컨테이너 쿼리를 사용하려면 먼저 CSS에서 **컨테이너(Container)**를 정의해야 합니다. 이를 위해 container-type 속성을 사용합니다.

1. 컨테이너 선언

.card-container {
  container-type: inline-size; /* 가로 크기를 기준으로 작동 */
  container-name: card; /* 선택적으로 이름 지정 가능 */
}

2. 컨테이너 쿼리 작성

@container (min-width: 300px) {
  .card {
    flex-direction: row;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
  }
}

---

🛠️ 간단한 예제: 카드 레이아웃 변경하기

아래는 부모 컨테이너의 크기에 따라 카드 컴포넌트의 레이아웃이 변경되는 예제입니다.

HTML 구조

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Image" class="card-image" />
    <div class="card-content">
      <h2>Card Title</h2>
      <p>Card description goes here.</p>
    </div>
  </div>
</div>

CSS 스타일

/* 컨테이너 설정 */
.card-container {
  container-type: inline-size; /* 부모 컨테이너의 가로 크기 기준 */
  width: 100%; /* 부모 크기에 따라 변함 */
  border: 1px solid #ccc;
  padding: 16px;
}

/* 기본 카드 스타일 */
.card {
  display: flex;
  gap: 16px;
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 8px;
}

/* 컨테이너 쿼리 사용 */
@container (min-width: 400px) {
  .card {
    flex-direction: row; /* 충분히 넓으면 가로 정렬 */
  }
}

@container (max-width: 399px) {
  .card {
    flex-direction: column; /* 좁아지면 세로 정렬 */
  }
}

/* 이미지와 텍스트 스타일 */
.card-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.card-content {
  flex: 1;
}

결과 화면

1. 컨테이너가 넓을 때 (400px 이상):
   • 이미지와 텍스트가 가로로 나란히 배치됩니다.
2. 컨테이너가 좁을 때 (399px 이하):
   • 이미지와 텍스트가 세로로 쌓입니다.

---

🎯 컨테이너 쿼리를 사용할 때 주의할 점

1. 브라우저 지원
   • 컨테이너 쿼리는 최신 브라우저에서만 지원됩니다. Can I Use를 확인하여 호환성을 검토하세요.
2. 적절한 사용 사례
   • 컨테이너 쿼리는 컴포넌트 중심 디자인에 매우 적합합니다. 모든 상황에 적용하려고 하기보다는, 부모 요소의 크기에 따라 동작해야 하는 컴포넌트에 사용하세요.
3. 이름 지정
   • container-name 속성을 사용해 명시적으로 컨테이너를 이름 지정하면 더 복잡한 구조에서도 관리하기 쉽습니다.

---

✨ 컨테이너 쿼리가 가져올 변화

컨테이너 쿼리는 웹 디자인의 패러다임을 바꿀 수 있는 혁신적인 기능입니다. 더 이상 화면 크기에 얽매이지 않고, 컴포넌트 중심으로 반응형 디자인을 구현할 수 있습니다.

여러분의 프로젝트에서도 컨테이너 쿼리를 활용해 한 단계 발전된 UI/UX를 만들어보세요! 😊