[CSS]컨테이너 쿼리(Container queries)

Html과 CSS에 대해 조금씩 학습하던 중 해당 부분에 대한 경험이 부족하다고 판단되어 작성합니다.

컨테이너 쿼리란?

컨테이너 쿼리에 대해 설명하기에 앞서 미디어 쿼리에 대하여 간략하게 알아보겠습니다.
미디어 쿼리는 다양한 화면 크기를 가진 장치에 대해 뷰포트의 크기를 기준으로 CSS의 차이를 두어 반응형 디자인을 제작하는 핵심 요소입니다.
컨테이너 쿼리는 이런 미디어 쿼리의 대안으로 기준이 뷰포트의 크기가 아니라 Html요소(인라인 및 블록)입니다.

컨테이너 쿼리 사용

사용법은 크게 어렵거나 복잡하지 않습니다.
특정 요소에 container-type을 사용하여 컨테이너 쿼리를 사용할 것이라고 지정해줍니다.

• size
  쿼리는 컨테이너의 인라인 및 블록 차원을 기반으로 합니다 . 컨테이너에 레이아웃, 스타일 및 크기 포함을 적용합니다.
• inline-size
  쿼리는 컨테이너의 인라인 크기를 기반으로 합니다 . 요소에 레이아웃, 스타일 및 인라인 크기 포함을 적용합니다.
• normal
  요소는 모든 컨테이너 크기 쿼리에 대한 쿼리 컨테이너가 아니지만 컨테이너 스타일 쿼리에 대한 쿼리 컨테이너로 유지됩니다.

다음은 사용법 예시입니다.

<div class='card-container'>
  <div class="card">
    <div class="card-header">
      <img
        src="https://images.unsplash.com/photo-1682289571752-c14e69310e64?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80"
        alt="Nice image" />
    </div>

    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.
      </p>
      <button>Details</button>
      <button>Contact me</button>
    </div>
  </div>
</div>

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

.card {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  border: 1px solid #ccc;
  padding: 1rem;
}

.card-header {
  max-width: 400px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

컨테이너 쿼리를 사용 하는 이유는?

브라우저 뷰포트가 아닌 크기를 기준으로 요소 스타일 지정

앞서 설명했듯 미디어 쿼리를 이용한 반응형 페이지 제작시 뷰포트의 크기를 기준으로 반응형 요소를 제작하게 됩니다.
컨테이너 쿼리를 사용하면 너비, 높이, 블록 크기 및 인라인 크기를 기준으로 요소의 스타일을 지정할 수 있습니다.

새로운 반응 단위 사용

컨테이너 쿼리에선 새로운 길이 단위를 사용할 수 있는데 이는 컨테이너의 크기를 기준으로 길이를 지정합니다.

쿼리 컨테이너 너비의 1%

cqw

쿼리 컨테이너 높이의 1%

cqh

쿼리 컨테이너 인라인 크기의 1%

cqi

쿼리 컨테이너 블록 크기의 1%

cqb

cqi와 cqb중 더 작은 값

cqmin

cqi와 cqb중 더 큰 값

cqmax

호환성

작성일 기준 거의 모든 주요 브라우저에서 사용할 수 있는 것으로 확인됩니다.

마치며

컨테이너 쿼리의 도입으로 좀 더 유연한 반응형 디자인을 제작하는 것에 가까워 진 건 사실이지만 직접적으로 사용해보지 않은 현재 단계에서 미디어 쿼리를 완벽하게 대체했다고 하기엔 어려울 것 같습니다. 필요한 경우에 따라 미디어 쿼리와 컨테이너 쿼리를 함께 사용하는 것이 가장 적절해 보입니다.