CSS Container Queries vs Media Queries, 반응형 웹디자인 선택 기준



반응형 웹디자인을 만들 때 예전에는 대부분 Media Queries를 기준으로 화면을 나눴습니다. 브라우저 너비가 1024px 이하일 때, 768px 이하일 때처럼 화면 전체 크기를 기준으로 레이아웃을 바꾸는 방식입니다.

하지만 실제 작업에서는 화면 전체 크기보다 콘텐츠가 들어가는 영역의 크기가 더 중요한 경우가 있습니다. 이때 사용할 수 있는 CSS 기능이 Container Queries입니다. Media Queries가 화면 기준이라면, Container Queries는 요소가 들어 있는 박스 기준으로 스타일을 조정합니다.

Media Queries만으로 부족한 순간이 있습니다

기업 홈페이지나 포트폴리오 사이트를 만들다 보면 같은 카드 UI가 여러 위치에 반복해서 들어가는 경우가 많습니다. 메인에서는 3단 그리드로 보이고, 사이드 영역에서는 좁은 카드로 보이고, 모바일에서는 1단으로 바뀌는 식입니다.

이때 Media Queries만 사용하면 화면 크기는 같아도 카드가 놓인 영역에 따라 디자인이 어색해질 수 있습니다. 화면은 넓지만 카드가 들어간 부모 영역은 좁을 수 있고, 반대로 모바일은 아니지만 특정 섹션 안에서는 콘텐츠 폭이 제한될 수 있기 때문입니다.

Container Queries는 이런 상황에서 유용합니다. 화면 전체가 아니라 컴포넌트가 실제로 차지하는 공간을 기준으로 디자인을 바꿀 수 있습니다.

Media Queries와 Container Queries의 차이

Media Queries는 브라우저나 기기의 조건을 기준으로 스타일을 적용합니다.

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

위 코드는 화면 너비가 768px 이하일 때 카드 구조를 세로로 바꾸는 방식입니다. 전체 페이지 레이아웃을 조정할 때 적합합니다.

Container Queries는 특정 요소를 컨테이너로 지정한 뒤, 그 요소의 크기에 따라 내부 스타일을 바꿉니다.

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

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

이 경우 화면 전체가 넓어도 .card-wrap의 폭이 500px 이하라면 카드 내부 디자인이 바뀝니다. 같은 카드 컴포넌트를 여러 위치에서 재사용해야 할 때 더 유연하게 대응할 수 있습니다.

어떤 상황에서 Media Queries가 적합할까요?

Media Queries는 여전히 반응형 웹디자인의 기본입니다. 전체 페이지 구조를 바꾸거나, PC·태블릿·모바일 구간을 나눠야 할 때는 Media Queries가 더 직관적입니다.

예를 들어 헤더 메뉴를 모바일에서 햄버거 메뉴로 바꾸거나, 전체 콘텐츠 폭을 조정하거나, 푸터 영역을 세로 정렬로 바꾸는 작업은 화면 크기 기준으로 처리하는 편이 자연스럽습니다.

즉, 페이지 전체의 큰 구조를 조정할 때는 Media Queries가 적합합니다.

어떤 상황에서 Container Queries가 적합할까요?

Container Queries는 카드, 배너, 게시판 목록, 상품 리스트처럼 독립적으로 재사용되는 UI에 잘 맞습니다.

예를 들어 같은 카드 디자인이라도 메인 콘텐츠 영역에서는 이미지와 텍스트를 가로로 배치하고, 좁은 사이드 영역에서는 세로로 배치해야 할 수 있습니다. 이때 화면 너비만 기준으로 판단하면 정확한 대응이 어렵습니다.

Container Queries를 사용하면 카드가 들어간 영역의 폭에 따라 이미지 크기, 텍스트 줄 수, 버튼 위치를 다르게 조정할 수 있습니다. 컴포넌트 단위로 반응형을 관리할 수 있다는 점이 가장 큰 장점입니다.

실제 작업에서는 둘을 함께 쓰는 편이 좋습니다

Media Queries와 Container Queries는 경쟁 관계라기보다 역할이 다릅니다. 전체 레이아웃은 Media Queries로 잡고, 반복되는 UI 컴포넌트는 Container Queries로 세밀하게 조정하는 방식이 실무에 더 적합합니다.

예를 들어 홈페이지 메인 구조는 화면 크기에 따라 1단, 2단, 3단으로 나누고, 그 안에 들어가는 카드나 배너는 컨테이너 크기에 따라 내부 배치를 바꾸는 식입니다.

이렇게 구성하면 같은 UI를 여러 페이지에서 재사용하기 쉬워지고, 수정할 때도 특정 컴포넌트 단위로 관리할 수 있습니다.

선택 전 체크리스트

전체 화면 기준의 반응형이라면 Media Queries가 적합하고, 컴포넌트가 놓이는 공간에 따라 디자인을 바꿔야 한다면 Container Queries를 검토하는 것이 좋습니다.

자주 묻는 질문

반응형 기준은 화면 크기만이 아닙니다

반응형 웹디자인은 단순히 PC, 태블릿, 모바일로 화면을 나누는 작업만 의미하지 않습니다. 콘텐츠가 실제로 놓이는 공간에 맞춰 보기 편하게 조정하는 것도 중요합니다.

Media Queries는 전체 화면 구조를 잡는 데 유용하고, Container Queries는 컴포넌트 단위의 세밀한 반응형을 만들 때 유리합니다. 디자인키트의 디자인 소스와 HTML 마크업을 활용할 때도 페이지 전체 구조와 개별 UI 요소를 구분해서 보면 수정 방향을 더 쉽게 잡을 수 있습니다.