🌱 기초 프론트엔드
미디어 쿼리(Media Query)란?
쉽게 이해하기
옷장에서 날씨에 따라 옷을 골라 입는 것과 비슷해요. 추우면 두꺼운 옷, 더우면 얇은 옷을 입듯이, 미디어 쿼리는 화면이 크면 PC용 레이아웃, 작으면 모바일용 레이아웃을 보여주는 거예요.
핵심 정리
화면 크기나 디바이스 특성에 따라 다른 CSS를 적용하는 기법이에요.
자세히 알아보기
미디어 쿼리는 @media로 시작해요. 예를 들어 @media (max-width: 768px) { ... } 이렇게 쓰면 화면 너비가 768px 이하일 때만 안쪽 CSS가 적용돼요.
반응형 웹을 만들 때 핵심 기술이에요. 같은 HTML 파일 하나로 PC, 태블릿, 스마폰 모두에서 잘 보이는 사이트를 만들 수 있거든요. 요즘은 모바일 트래픽이 PC보다 많아서 미디어 쿼리 없이는 제대로 된 웹사이트를 만들기 어려워요.
실무에서 자주 쓰는 브레이크포인트는 768px(태블릿), 1024px(작은 노트북), 1280px(데스크톱) 정도예요. 모바일 퍼스트 방식으로 개발할 때는 min-width를 써서 작은 화면부터 스타일을 정의하고, 큰 화면은 나중에 추가해요.
화면 크기 말고도 orientation: portrait(세로), prefers-color-scheme: dark(다크모드 선호) 같은 조건도 미디어 쿼리로 감지할 수 있어요. 사용자 환경에 맞춰 최적의 경험을 제공하는 게 목표입니다.