1.4.1 Container Query

Container Query란?

Container Query는 CSS의 혁신적인 기능으로, 부모 컨테이너의 크기에 따라 스타일을 적용할 수 있게 해줍니다. 이는 기존의 미디어 쿼리와는 다른 접근 방식을 제공합니다. 이전까지는 주로 viewport의 크기에 기반한 디자인만 가능했으나, Container Query를 통해 구성요소의 크기를 기준으로 반응형 디자인을 구현할 수 있습니다.

기본 사용법

Container Query는 @container 규칙을 사용하여 설정합니다. 아래의 예제를 통해 사용법을 살펴보겠습니다.

위 코드에서 .card 클래스의 요소는 부모 컨테이너의 너비가 500px 이상일 때만 특정 스타일을 적용받습니다. 이처럼 Container Query를 이용하면 디바이스가 아닌 컨테이너 자체의 크기에 따라 CSS 속성을 조정할 수 있습니다.

예제

아래는 Container Query를 활용한 간단한 카드 레이아웃 예제입니다. 이 예제에서는 카드의 부모 컨테이너가 변화함에 따라 카드 디자인이 어떻게 바뀌는지 확인할 수 있습니다.

<div class="container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
</div>

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

.card {
    width: 100%;
    margin: 10px 0;
    background-color: lightgray;
    transition: background-color 0.3s;
}

@container (min-width: 400px) {
    .card {
        background-color: lightblue;
        padding: 10px;
    }
}

@container (min-width: 600px) {
    .card {
        background-color: lightcoral;
        padding: 15px;
    }
}

이 코드는 .container 요소에 container-type: inline-size;를 설정하여, 자식 요소인 .card의 스타일을 컨테이너의 크기에 따라 변경합니다.

실습

1. 위의 HTML과 CSS 코드를 복사하여 본인의 코드 편집기에 붙여넣기 하세요.
2. 브라우저에서 결과를 확인한 후, 컨테이너의 크기를 조정하여 카드 스타일이 어떻게 변화하는지 관찰하세요.
3. 카드를 더 추가해 보고, 다양한 Container Query를 사용하여 디자인을 바꿔 보세요.
4. 최종적으로, 자신만의 Container Query를 활용한 디자인을 만들어 보세요!

정리

Container Query는 CSS의 진일보한 개념으로, 부모 컨테이너의 크기를 기준으로 스타일을 적용할 수 있습니다. 이는 더 유연하고 강력한 반응형 디자인을 구현하는 데 도움을 줍니다. 이번 강의를 통해 최신 CSS 기능인 Container Query의 기본 개념과 실제 사용법을 익혔으니, 앞으로의 프로젝트에 잘 활용해보기를 바랍니다.