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와 병행 사용 - 테스트 필수: 다양한 컨테이너 크기에서 레이아웃 전환 테스트
- 실무 적용: 반복 사용 컴포넌트에 적용하여 반응형 디자인 효율성 극대화