정의
미디어 쿼리(Media Query)는 웹 문서의 스타일시트를 적용할 때, 사용자의 출력 장치나 환경에 따라 서로 다른 CSS 규칙을 선택적으로 적용할 수 있게 하는 CSS 표준 기능이다. 주로 화면 크기, 해상도, 색상 깊이, 방향(가로·세로) 등 미디어 특성에 따라 스타일을 조정함으로써 반응형 웹 디자인을 구현한다.
개요
미디어 쿼리는 @media 규칙을 사용하여 선언한다. 기본 형식은 다음과 같다.
@media <미디어 타입> and (<조건>) {
/* 적용할 CSS 규칙 */
}
- 미디어 타입은
screen,print,speech등 출력 매체를 구분한다. - 조건은
(max-width: 768px),(orientation: portrait)와 같은 특성 값을 논리 연산자(and,or,not)와 결합하여 지정한다. - 조건이 만족될 경우 해당 블록 내부의 스타일이 적용되고, 그렇지 않으면 무시된다.
이 메커니즘은 다양한 디바이스(데스크톱, 태블릿, 스마트폰 등)와 사용자 환경에 맞춰 레이아웃과 시각 요소를 동적으로 최적화하게 해준다. CSS3 표준에 포함되어 있으며, 대부분의 현대 브라우저에서 지원한다.
어원/유래
- Media는 라틴어 media(중간, 매개)에서 유래한 영어 단어로, 여기서는 "출력 매체"를 의미한다.
- Query는 “질의”, “묻다”라는 뜻의 영어 단어이며, 조건을 물어보고 그 결과에 따라 동작한다는 의미를 담고 있다.
- 용어 자체는 1990년대 후반 CSS2.1 초안에 등장했으며, 2011년 W3C가 공식적으로 CSS3 Media Queries Level 1을 권고안으로 발표하면서 표준화되었다.
특징
| 구분 | 내용 |
|---|---|
| 조건 지정 | 화면 폭, 높이, 해상도, 색상 깊이, 방향, 디바이스 픽셀 비율 등 다양한 미디어 특성을 사용 가능 |
| 논리 연산 | and, or, not을 통해 복합 조건을 구성할 수 있다 |
| 미디어 타입 | all, screen, print, speech 등, 필요에 따라 특정 매체에만 적용 가능 |
| 반응형 디자인 | 뷰포트 크기에 따라 레이아웃을 전환하는 Breakpoint 설정에 핵심적인 역할을 한다 |
| 호환성 | Chrome, Firefox, Safari, Edge, Opera 등 주요 브라우저에서 거의 완전 지원 |
| 우선순위 | 미디어 쿼리 내부 규칙은 일반 CSS 규칙과 동일한 계층 구조와 우선순위를 따른다 |
관련 항목
- CSS – Cascading Style Sheets, 웹 페이지 스타일링을 담당하는 언어.
- 반응형 웹 디자인(Responsive Web Design) – 미디어 쿼리를 활용해 다양한 디바이스에 최적화된 레이아웃을 구현하는 설계 기법.
- 뷰포트(Viewport) – 브라우저 화면에 표시되는 영역의 크기와 비율을 정의하는 개념;
meta viewport태그와 함께 사용된다. - CSS @media 규칙 – 미디어 쿼리를 선언하는 구문 자체를 가리키는 용어.
- 디바이스 픽셀 비율(Device Pixel Ratio, DPR) – 고해상도 디스플레이를 구분하기 위해 사용되는 특성;
min-resolution혹은-webkit-min-device-pixel-ratio와 같은 조건으로 지정한다.
※ 본 내용은 2023년 현재 공개된 기술 문서와 W3C 권고안을 기반으로 작성되었으며, 최신 사양에 따라 추가·변경될 수 있다.