CSS Academy · 강의

컨테이너 쿼리와 미디어 쿼리 비교

구성 요소 기반 디자인에서 컨테이너 쿼리와 뷰포트 미디어 쿼리 중 언제 무엇을 사용해야 하는지 이해합니다.

레슨 4/412개 단계

컨테이너 쿼리와 미디어 쿼리 비교은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

근본적인 차이

미디어 쿼리는 뷰포트의 크기에 반응합니다. 컨테이너 쿼리는 부모 컨테이너의 크기에 반응합니다. 이 차이에 따라 각 문제에 사용할 도구가 결정됩니다.

미디어 쿼리를 사용하는 경우

다음과 같은 경우 미디어 쿼리를 사용합니다:

전역 페이지 레이아웃 변경(한 열에서 두 열로 변경)
페이지의 큰 섹션 표시 또는 숨기기(모바일에서 탐색 서랍 표시)
페이지 수준의 타이포그래피 기준 크기 조정
인쇄 스타일
사용자 기본 설정 쿼리(어두운 모드, 동작 줄이기)

컨테이너 쿼리를 사용하는 경우

다음과 같은 경우 컨테이너 쿼리를 사용합니다:

컴포넌트 수준의 레이아웃 변경(가로 카드에서 세로 카드로 변경)
알 수 없는 컨테이너에 배치되는 컴포넌트(사이드바, 주요 영역, 주요 영역 안의 사이드바)
재사용 가능한 디자인 시스템 컴포넌트
타사 페이지에 삽입되는 위젯

이식성의 이점

미디어 쿼리로 스타일을 지정한 카드는 너비 1200px 페이지의 한 중단점에서 작동합니다. 이 카드를 사이드바로 옮기면 다른 중단점이 필요할 수 있습니다. 컨테이너 쿼리를 사용하면 동일한 카드가 별도의 수정 없이 자체적으로 사용할 수 있는 공간에 맞게 적응합니다.

함께 사용하기

실제 애플리케이션에서는 두 가지를 모두 사용합니다. 미디어 쿼리는 큰 틀의 레이아웃을 정의하고(데스크톱 너비에서 사이드바가 존재하도록 함), 컨테이너 쿼리는 해당 레이아웃 안에서 컴포넌트의 동작을 정의합니다.

<div class="layout">
  <div class="sidebar"><div class="card">Sidebar card</div></div>
  <div class="main-content"><div class="card">Main card</div></div>
</div>

컨테이너 쿼리의 명시도

명시도를 추가하지 않는 미디어 쿼리와 달리 컨테이너 쿼리는 컨텍스트별 명시도를 추가합니다. @container (min-width: 400px) 내부의 규칙은 외부에 있는 동일한 규칙과 명시도가 같지만, 해당 컨테이너 컨텍스트 안에서만 적용됩니다.

브라우저 지원

컨테이너 쿼리는 2023년 이후 모든 최신 브라우저에서 지원됩니다(크롬 105 이상, 파이어폭스 110 이상, 사파리 16 이상). 최신 브라우저를 대상으로 하는 새 프로젝트에서는 대체 처리를 추가하지 않고도 안전하게 사용할 수 있습니다.

@supports를 사용한 점진적 향상

이전 브라우저 지원이 필요한 프로젝트에서는 @supports를 사용해 컨테이너 쿼리 지원 여부를 확인합니다:

<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>

성능 비교

컨테이너 쿼리에는 고유한 성능 특성이 있습니다. 각 container-type 요소가 레이아웃 격리 경계를 만들기 때문입니다. 이 경계는 내부의 크기 변경이 외부에 영향을 주지 않도록 하며, 실제로 성능상의 이점이 됩니다. 미디어 쿼리 변경은 전역 레이아웃 재계산을 일으킬 수 있습니다.

컨테이너 쿼리 디버깅

Chrome DevTools는 요소 패널에서 컨테이너 요소 옆에 “cq” 배지를 표시합니다. 이 배지를 클릭하면 컨테이너 경계를 시각화하고 DevTools의 레이아웃 검사기로 컨테이너 쿼리 조건을 테스트할 수 있습니다.

빠른 확인

디자인 시스템의 카드 컴포넌트가 어떤 컨텍스트에서든 사용 가능한 너비에 따라 쌓인 레이아웃에서 나란히 배치된 레이아웃으로 전환되어야 합니다. 어떤 접근 방식이 더 적합할까요?

인터랙티브 레슨에서 답해보세요

요약

미디어 쿼리는 전역 뷰포트에 반응하고, 컨테이너 쿼리는 부모 컨테이너의 크기에 반응합니다. 전역 레이아웃 결정과 사용자 기본 설정 쿼리에는 미디어 쿼리를 사용합니다. 컨텍스트에 맞게 적응해야 하는 재사용 가능한 컴포넌트에는 컨테이너 쿼리를 사용합니다. 두 가지를 함께 사용하세요. 큰 틀의 페이지 레이아웃에는 미디어 쿼리를, 해당 레이아웃 안에서 컴포넌트를 조정하는 데는 컨테이너 쿼리를 사용합니다.

무료로 시작

AI 튜터와 함께 CSS을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 40
레슨: 159

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“컨테이너 쿼리와 미디어 쿼리 비교” 강의는 무료인가요?

네 — “컨테이너 쿼리와 미디어 쿼리 비교” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“컨테이너 쿼리와 미디어 쿼리 비교”에서 뭘 배우나요?

구성 요소 기반 디자인에서 컨테이너 쿼리와 뷰포트 미디어 쿼리 중 언제 무엇을 사용해야 하는지 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“컨테이너 쿼리와 미디어 쿼리 비교” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기