개요
미디어 쿼리는 뷰포트나 사용자 환경에 따라 CSS를 조건부로 적용하기 위한 기능임 다른 언어의 if 조건문과 유사하게 조건이 참일 때만 특정 스타일이 활성화됨
핵심 개념
@media 규칙과 하나 이상의 조건으로 구성 조건은 화면 폭, 해상도, 사용자 선호도 등 미디어 특성으로 표현됨 조건이 참이면 블록 내부 스타일이 캐스케이딩에 참여하고 거짓이면 무시됨
문법과 구조
@media (조건) { /* 스타일 */ }조건 예시
- max-width: 상한 폭 이하에서 적용
- min-width: 하한 폭 이상에서 적용
- 논리 결합 and, not 사용 가능
동작 원리
브라우저가 런타임에 조건을 평가함 윈도우 리사이즈나 기기 회전, OS 설정 변경 시 즉시 재평가되어 스타일 재적용됨 충돌 시 일반 CSS 우선순위 규칙을 따름 우선순위 > 특이성 > 선언 순서 모바일 퍼스트 전략 권장 min-width 기준으로 점진적 확장 구성
간단 예시
폭 600px 이하에서 .desktop 숨김, 1000px 이상에서 .mobile 숨김
@media (max-width: 600px) { .desktop { display: none } }
@media (min-width: 1000px) { .mobile { display: none } }prefers-color-scheme
운영 체제의 라이트/다크 모드 선호를 감지하여 스타일 분기 가능 값은 대개 light, dark, no-preference 사용 기본 스타일을 라이트로 두고 다크만 덮어쓰는 방식이 단순함
@media (prefers-color-scheme: light) { /* 라이트 전용 */ }
@media (prefers-color-scheme: dark) { /* 다크 전용 */ }접근성 고려 필요 대비, 명도, 링크 가시성 점검 권장
주의와 베스트 프랙티스
- 브레이크포인트는 겹침 최소화 인접 구간 경계 명확히 정의
- 단위 일관성 유지 px 기준 사용 시 팀 컨벤션 문서화
- 선언 순서 관리 공통 스타일 → 특화 스타일 → 미디어 쿼리 순으로 배치
- DevTools로 다양한 뷰포트와 OS 테마 전환 테스트 수행
마무리
미디어 쿼리는 조건부 스타일의 표준 수단임 뷰포트 기반 분기와 prefers-color-scheme를 조합하면 반응형과 테마 대응을 단순하게 유지 가능함