본문 바로가기
👩‍💻/개발

FE 기능 - CSS 컨테이너 쿼리(Container Queries)와 스타일 쿼리(Style Queries)

Purpleo 2025. 1. 9. 23:45 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Style Query Demo</title>
  <style>
    /* 컨테이너 정의 */
    .box-container {
      container-type: inline-size;
      --box-bg-color: lightblue; /* 기본 배경색 */
    }

    /* 박스 스타일 */
    .box {
      padding: 20px;
      background-color: var(--box-bg-color); /* 커스텀 속성 기반 배경색 */
      border: 1px solid #333;
      border-radius: 8px;
    }

    /* 컨테이너 스타일 쿼리 적용 */
    @container style(--box-bg-color: lightgreen) {
      .box {
        color: white;
        border-color: green;
      }
    }
  </style>
</head>
<body>
  <div class="box-container">
    <div class="box">This is a box</div>
  </div>
</body>
</html>

컨테이너 쿼리(Container Queries)는 요소가 속한 컨테이너의 크기와 스타일을 기준으로 CSS를 적용할 수 있는 새로운 기능입니다. 이는 기존의 뷰포트를 기준으로 스타일을 적용하는 미디어 쿼리와는 다릅니다.
특히, 재사용 가능한 컴포넌트를 다양한 변형 버전으로 활용하거나, 컨테이너 크기별 디자인 변화를 적용할 때 매우 유용합니다.

1. 주요 특징

  1. 컨테이너 크기 기반 스타일링
    • 컨테이너의 width, height 등의 크기를 기준으로 스타일을 적용할 수 있습니다.
    • 미디어 쿼리처럼 뷰포트 전체를 기준으로 하지 않아도 됩니다.
  2. 스타일 쿼리
    • 컨테이너의 특정 CSS 커스텀 속성을 기반으로 스타일을 변경할 수 있습니다.
    • 현재는 CSS **커스텀 속성(--property-name)**에만 작동하지만, 앞으로 확장 가능성이 있습니다.
  3. 재사용 컴포넌트에 최적화
    • 동일한 컴포넌트를 다양한 크기나 스타일의 컨테이너에 넣어도 각각 다른 스타일을 적용할 수 있습니다.

2. 간단한 코드 예시

컨테이너 쿼리를 활용한 카드 스타일 변경

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Query Demo</title>
  <style>
    /* 컨테이너 정의 */
    .card-container {
      container-type: inline-size; /* 컨테이너 쿼리를 활성화 */
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      padding: 16px;
      border: 2px solid #ccc;
    }

    /* 카드 기본 스타일 */
    .card {
      flex: 1 1 100%;
      padding: 16px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* 컨테이너 크기에 따라 카드 스타일 변경 */
    @container (min-width: 600px) {
      .card {
        flex: 1 1 calc(50% - 16px);
      }
    }

    @container (min-width: 900px) {
      .card {
        flex: 1 1 calc(33.333% - 16px);
      }
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
  </div>
</body>
</html>

 

CSS 컨테이너 쿼리(Container Queries)와 스타일 쿼리(Style Queries)

**컨테이너 쿼리(Container Queries)**는 요소가 속한 컨테이너의 크기와 스타일을 기준으로 CSS를 적용할 수 있는 새로운 기능입니다. 이는 기존의 뷰포트를 기준으로 스타일을 적용하는 미디어 쿼리와는 다릅니다.
특히, 재사용 가능한 컴포넌트를 다양한 변형 버전으로 활용하거나, 컨테이너 크기별 디자인 변화를 적용할 때 매우 유용합니다.

1. 주요 특징

  1. 컨테이너 크기 기반 스타일링
    • 컨테이너의 width, height 등의 크기를 기준으로 스타일을 적용할 수 있습니다.
    • 미디어 쿼리처럼 뷰포트 전체를 기준으로 하지 않아도 됩니다.
  2. 스타일 쿼리
    • 컨테이너의 특정 CSS 커스텀 속성을 기반으로 스타일을 변경할 수 있습니다.
    • 현재는 CSS **커스텀 속성(--property-name)**에만 작동하지만, 앞으로 확장 가능성이 있습니다.
  3. 재사용 컴포넌트에 최적화
    • 동일한 컴포넌트를 다양한 크기나 스타일의 컨테이너에 넣어도 각각 다른 스타일을 적용할 수 있습니다.

2. 간단한 코드 예시

컨테이너 쿼리를 활용한 카드 스타일 변경

html
코드 복사
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Container Query Demo</title> <style> /* 컨테이너 정의 */ .card-container { container-type: inline-size; /* 컨테이너 쿼리를 활성화 */ display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; border: 2px solid #ccc; } /* 카드 기본 스타일 */ .card { flex: 1 1 100%; padding: 16px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* 컨테이너 크기에 따라 카드 스타일 변경 */ @container (min-width: 600px) { .card { flex: 1 1 calc(50% - 16px); } } @container (min-width: 900px) { .card { flex: 1 1 calc(33.333% - 16px); } } </style> </head> <body> <div class="card-container"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> </div> </body> </html>

3. 주요 설명

  1. container-type: inline-size;
    • 컨테이너 요소에 이 속성을 추가하면 해당 요소가 컨테이너 쿼리를 사용할 수 있게 됩니다.
  2. @container 쿼리
    • 컨테이너의 최소 크기를 조건으로 스타일을 변경할 수 있습니다.
    • 위 예시에서는 컨테이너가 600px 이상일 때 두 개씩 배치, 900px 이상일 때 세 개씩 배치합니다.

4. 스타일 쿼리 예시

스타일 쿼리를 활용한 다양한 컴포넌트 스타일 변경

5. 결과 화면

  1. 컨테이너에 **--box-bg-color**가 변경되면 박스의 텍스트와 테두리 색상이 변경됩니다.
  2. 이와 같은 스타일 쿼리를 통해 특정 스타일 조건에 맞춰 재사용 가능한 컴포넌트를 구성할 수 있습니다.

6. 현재 브라우저 지원 상황

컨테이너 쿼리와 스타일 쿼리는 최신 Chrome, Edge, Opera 등에서만 지원되며, 아직 Safari와 일부 브라우저에서는 사용할 수 없습니다.
지원 범위를 고려해 Progressive Enhancement(점진적 개선)을 적용해 사용하는 것이 좋습니다.

'👩‍💻 > 개발' 카테고리의 다른 글

Android(안드로이드) 앱 이전 방법  (0) 2025.01.10
FE 기능 - CSS 앵커 포지셔닝 API 사용하기  (0) 2025.01.09
flask(python)로 Android/iOS API 구현하기(파일 첨부 추가)  (0) 2025.01.09
macos(맥북) docker에 MSSQL 설치하기  (0) 2025.01.09
macos(맥북) docker에 OpenLDAP 설치하기  (0) 2025.01.09

'👩‍💻/개발' Related Articles

티스토리툴바