M

MLOG

한국어

CSS 컨테이너 쿼리의 강력한 기능을 탐색하여 컨테이너 크기에 반응하는 반응형 및 적응형 레이아웃을 만들어 웹 디자인에 혁신을 가져오세요.

현대적인 CSS 레이아웃: 컨테이너 쿼리 심층 탐구

수년간 미디어 쿼리는 반응형 웹 디자인의 초석이었습니다. 미디어 쿼리를 사용하면 뷰포트 크기에 따라 레이아웃을 조정할 수 있습니다. 하지만 미디어 쿼리는 브라우저 창의 크기에 따라 작동하기 때문에, 특히 재사용 가능한 컴포넌트를 다룰 때 어색한 상황이 발생할 수 있습니다. 바로 이때 컨테이너 쿼리(Container Queries)가 등장합니다. 컨테이너 쿼리는 전체 뷰포트가 아닌 포함하는(containing) 요소의 크기에 따라 컴포넌트가 적응하도록 하는 획기적인 CSS 기능입니다.

컨테이너 쿼리란 무엇인가요?

대부분의 최신 브라우저에서 공식적으로 지원되는 컨테이너 쿼리는 반응형 디자인에 대해 더 세분화되고 컴포넌트 중심적인 접근 방식을 제공합니다. 이를 통해 개별 컴포넌트는 뷰포트 크기와 독립적으로 부모 컨테이너의 크기에 따라 모양과 동작을 조정할 수 있습니다. 이는 복잡한 레이아웃 및 디자인 시스템으로 작업할 때 더 큰 유연성과 재사용성을 가능하게 합니다.

좁은 사이드바에 배치될 때와 넓은 메인 콘텐츠 영역에 배치될 때에 따라 다르게 표시되어야 하는 카드 컴포넌트를 상상해 보세요. 미디어 쿼리를 사용했다면 뷰포트 크기에 의존하고 CSS 규칙을 중복으로 작성해야 했을 것입니다. 컨테이너 쿼리를 사용하면 카드 컴포넌트는 컨테이너 내에서 사용 가능한 공간에 따라 지능적으로 적응할 수 있습니다.

왜 컨테이너 쿼리를 사용해야 할까요?

컨테이너 쿼리 사용의 주요 이점은 다음과 같습니다:

컨테이너 쿼리 시작하기

컨테이너 쿼리를 사용하는 데는 몇 가지 주요 단계가 있습니다:

  1. 컨테이너 정의: `container-type` 속성을 사용하여 요소를 컨테이너로 지정합니다. 이는 쿼리가 작동할 경계를 설정합니다.
  2. 쿼리 정의: `@container` at-rule을 사용하여 쿼리 조건을 정의합니다. 이는 `@media`와 유사하지만, 뷰포트 속성 대신 컨테이너 속성을 쿼리하게 됩니다.
  3. 스타일 적용: 쿼리 조건이 충족될 때 적용되어야 할 스타일을 적용합니다. 이 스타일은 컨테이너 내의 요소에만 영향을 미칩니다.

1. 컨테이너 설정하기

첫 번째 단계는 어떤 요소가 컨테이너 역할을 할지 정의하는 것입니다. 이를 위해 `container-type` 속성을 사용할 수 있습니다. 가능한 값은 여러 가지가 있습니다:

다음은 예시입니다:


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

이 예시에서 `.card-container` 요소는 인라인 크기(너비)를 추적하는 컨테이너로 지정되었습니다.

2. 컨테이너 쿼리 정의하기

다음으로, `@container` at-rule을 사용하여 쿼리 자체를 정의합니다. 여기서 쿼리 내의 스타일이 적용되기 위해 충족되어야 하는 조건을 지정합니다.

다음은 컨테이너의 너비가 최소 500픽셀인지 확인하는 간단한 예시입니다:


@container (min-width: 500px) {
  .card {
    flex-direction: row; /* 카드 레이아웃 변경 */
  }
}

이 예시에서 `.card-container` 요소의 너비가 500픽셀 이상이면 `.card` 요소의 `flex-direction`이 `row`로 설정됩니다.

`max-width`, `min-height`, `max-height`를 사용할 수도 있고, `and`나 `or`와 같은 논리 연산자를 사용하여 여러 조건을 결합할 수도 있습니다.


@container (min-width: 300px) and (max-width: 700px) {
  .card-title {
    font-size: 1.2em;
  }
}

이 예시는 컨테이너의 너비가 300px에서 700px 사이일 때만 스타일을 적용합니다.

3. 스타일 적용하기

`@container` at-rule 내에서 컨테이너 내의 요소에 원하는 모든 CSS 스타일을 적용할 수 있습니다. 이 스타일은 쿼리 조건이 충족될 때만 적용됩니다.

다음은 모든 단계를 결합한 전체 예시입니다:




  

    
Product Title

    
A brief description of the product.

    Learn More
  





.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1em;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.card-button {
  background-color: #007bff;
  color: white;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 5px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card-title {
    font-size: 1.8em;
  }
}

이 예시에서 `.card-container`의 너비가 500픽셀 이상이 되면 `.card` 요소는 수평 레이아웃으로 전환되고 `.card-title`의 크기는 커집니다.

컨테이너 이름

`container-name: my-card;`를 사용하여 컨테이너에 이름을 지정할 수 있습니다. 이를 통해 특히 중첩된 컨테이너가 있는 경우 쿼리를 더 구체적으로 지정할 수 있습니다. 

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

@container my-card (min-width: 500px) {
  /* "my-card"라는 이름의 컨테이너 너비가 500px 이상일 때 적용될 스타일 */
}

이는 페이지에 여러 컨테이너가 있고 쿼리로 특정 컨테이너를 대상으로 하고 싶을 때 특히 유용합니다.

컨테이너 쿼리 단위

미디어 쿼리와 마찬가지로 컨테이너 쿼리에는 컨테이너에 상대적인 자체 단위가 있습니다. 다음과 같습니다:

이 단위들은 컨테이너에 상대적인 크기와 간격을 정의하는 데 유용하며, 레이아웃의 유연성을 더욱 향상시킵니다.


.element {
  width: 50cqw;
  font-size: 2cqmin;
}

실용적인 예시 및 사용 사례

다음은 컨테이너 쿼리를 사용하여 더 적응력 있고 재사용 가능한 컴포넌트를 만드는 방법에 대한 실제 예시입니다:

1. 반응형 내비게이션 메뉴

내비게이션 메뉴는 컨테이너의 사용 가능한 공간에 따라 레이아웃을 조정할 수 있습니다. 좁은 컨테이너에서는 햄버거 메뉴로 축소될 수 있고, 넓은 컨테이너에서는 모든 메뉴 항목을 수평으로 표시할 수 있습니다.

2. 적응형 제품 목록

전자상거래 제품 목록은 컨테이너의 너비에 따라 한 줄에 표시되는 제품 수를 조정할 수 있습니다. 넓은 컨테이너에서는 한 줄에 더 많은 제품을 표시할 수 있고, 좁은 컨테이너에서는 과밀을 피하기 위해 더 적은 제품을 표시할 수 있습니다.

3. 유연한 기사 카드

기사 카드는 사용 가능한 공간에 따라 레이아웃을 변경할 수 있습니다. 사이드바에서는 작은 썸네일과 간략한 설명을 표시하고, 메인 콘텐츠 영역에서는 더 큰 이미지와 더 자세한 요약을 표시할 수 있습니다.

4. 동적 폼 요소

폼 요소는 컨테이너에 따라 크기와 레이아웃을 조정할 수 있습니다. 예를 들어, 검색창은 웹사이트 헤더에서는 더 넓고 사이드바에서는 더 좁을 수 있습니다.

5. 대시보드 위젯

대시보드 위젯은 컨테이너의 크기에 따라 콘텐츠와 표현을 조정할 수 있습니다. 그래프 위젯은 더 큰 컨테이너에서 더 많은 데이터 포인트를 보여주고, 더 작은 컨테이너에서는 더 적은 데이터 포인트를 보여줄 수 있습니다.

전체적인 고려 사항

컨테이너 쿼리를 사용할 때 디자인 선택이 전체에 미치는 영향을 고려하는 것이 중요합니다.

브라우저 지원 및 폴리필

컨테이너 쿼리는 Chrome, Firefox, Safari, Edge를 포함한 최신 브라우저에서 잘 지원됩니다. 그러나 이전 브라우저를 지원해야 하는 경우, @container-style/container-query와 같은 폴리필을 사용할 수 있습니다. 이 폴리필은 컨테이너 쿼리를 기본적으로 지원하지 않는 브라우저에 지원을 추가합니다.

프로덕션 환경에서 컨테이너 쿼리를 사용하기 전에 항상 현재 브라우저 지원을 확인하고 필요한 경우 폴리필 사용을 고려하는 것이 좋습니다.

모범 사례

컨테이너 쿼리로 작업할 때 명심해야 할 몇 가지 모범 사례는 다음과 같습니다:

컨테이너 쿼리 vs. 미디어 쿼리: 비교

컨테이너 쿼리와 미디어 쿼리는 모두 반응형 디자인에 사용되지만, 서로 다른 원리로 작동하며 서로 다른 시나리오에 가장 적합합니다.

기능 컨테이너 쿼리 미디어 쿼리
대상 컨테이너 크기 뷰포트 크기
범위 컴포넌트 수준 전역 수준
재사용성 높음 낮음
구체성 더 구체적 덜 구체적
사용 사례 개별 컴포넌트를 컨텍스트에 맞게 조정 전체 레이아웃을 다른 화면 크기에 맞게 조정

일반적으로 컨테이너 쿼리는 개별 컴포넌트를 컨텍스트에 맞게 조정하는 데 더 적합하고, 미디어 쿼리는 전체 레이아웃을 다른 화면 크기에 맞게 조정하는 데 더 적합합니다. 더 복잡한 레이아웃을 위해 이 둘을 결합할 수도 있습니다.

CSS 레이아웃의 미래

컨테이너 쿼리는 CSS 레이아웃 진화의 중요한 진전을 나타냅니다. 컴포넌트가 컨테이너에 따라 적응할 수 있도록 함으로써, 더 유연하고 재사용 가능하며 유지보수하기 쉬운 코드를 가능하게 합니다. 브라우저 지원이 계속 개선됨에 따라, 컨테이너 쿼리는 프론트엔드 개발자에게 필수적인 도구가 될 것입니다.

결론

컨테이너 쿼리는 CSS 환경에 강력한 추가 기능으로, 반응형 디자인에 대한 더 컴포넌트 중심적인 접근 방식을 제공합니다. 그것들이 어떻게 작동하고 효과적으로 사용하는 방법을 이해함으로써, 더 적응력 있고 재사용 가능하며 유지보수하기 쉬운 웹 애플리케이션을 만들 수 있습니다. 컨테이너 쿼리를 받아들이고 CSS 레이아웃에서 새로운 차원의 유연성을 경험해 보세요!