CSS 컨테이너 쿼리 튜토리얼: 초보자 가이드
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

CSS 컨테이너 쿼리 튜토리얼: 초보자를 위한 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 대상: HTML/CSS 기본 지식을 가진 초보 웹 개발자

- 난이도: 초보자 중심 (기초 개념 설명 및 실습 예제 포함)

핵심 요약

  • container-type@container 규칙 사용: 컨테이너 내부 요소의 스타일을 부모 컨테이너 크기 기준으로 조정 가능
  • 반응형 디자인 혁신: viewport 기반의 media query 대신, 컴포넌트 레벨에서 유연한 레이아웃 가능
  • 모던 브라우저 지원: Chrome 105+, Firefox 110+, Safari 16+ 등 2025년 기준 전 주요 브라우저 호환

섹션별 세부 요약

1. 컨테이너 쿼리란?

  • 기능 정의: 부모 컨테이너의 크기(가로/세로/비율) 기준으로 요소 스타일 변경
  • 장점: 반복 사용 가능한 컴포넌트(카드, 위젯 등)의 유연한 레이아웃 구현 가능
  • 사용 예시: 컨테이너 너비 300px 이상일 때 .child 요소에 lightblue 배경 적용

2. 컨테이너 쿼리 구현 방법

  • 컨테이너 정의: container-type: inline-size;로 컨테이너 지정
  • 쿼리 작성: @container card-container (min-width: 400px)로 조건 적용
  • 레이아웃 변경: flex-direction: row로 스택형에서 가로형으로 전환

3. 실습 예제: 반응형 카드 컴포넌트

  • 기본 스타일: .card 요소를 세로 스택형으로 설정
  • 컨테이너 크기 기준 조건:

- min-width: 300px → 글자 크기 증가

- min-width: 400px → 이미지/내용 가로 배치

- min-width: 500px → 글자 크기 추가 증가

4. 브라우저 호환성 및 대체 방안

  • 지원 브라우저: 2025년 기준 Chrome, Firefox, Safari, Edge 등 전 주요 브라우저
  • 대체 전략:

- @supports (container-type: inline-size)로 호환성 체크

- flex-direction: column 기본 스타일로 떄려 넣기

결론

  • 핵심 팁: inline-size 사용 권장, 컨테이너 명명 규칙 준수, media query와 병행 사용
  • 테스트 필수: 다양한 컨테이너 크기에서 레이아웃 전환 테스트
  • 실무 적용: 반복 사용 컴포넌트에 적용하여 반응형 디자인 효율성 극대화