CSS 미디어 쿼리 기본기와 prefers-color-scheme 적용
개요 미디어 쿼리는 뷰포트나 사용자 환경에 따라 CSS를 조건부로 적용하기 위한 기능임 다른 언어의 if 조건문과 유사하게 조건이 참일 때만 특정 스타일이 활성화됨 핵심 개념 @media 규칙과 하나 이상의 조건으로 구성 조건은 화면 폭, 해상도, 사용자 선호도 등 미디어 특성으로 표현됨 조건이 참이면 블록 내부 스타일이 캐스케이딩에 참여하고 거짓이면 무시됨 문법과 구조 @media (조건) { /* 스타일 */ }조건 예시 max-width: 상한 폭 이하에서 적용 min-width: 하한 폭 이상에서 적용 논리 결합 and, not 사용 가능 동작 원리 브라우저가 런타임에 조건을 평가함 윈도우 리사이즈나 기기 회전, OS 설정 변경 시 즉시 재평가되어 스타일 재적용됨 충돌 시 일반 CSS 우선순위 규칙을 따름 우선순위 > 특이성 > 선언 순서 모바일 퍼스트 전략 권장 min-width 기준으로 점진적 확장 구성 ...