WIPIVERSE

미디어 쿼리

미디어 쿼리(Media Query)는 CSS(Cascading Style Sheets)에서 사용되는 조건부 스타일 적용 기법으로, 사용자 장치의 특성이나 환경에 따라 서로 다른 CSS 스타일을 선택적으로 적용할 수 있게 하는 표준 기술이다. W3C(World Wide Web Consortium)에 의해 Level 3와 Level 4 명세로 표준화되어 있으며, 모든 최신 웹 브라우저에서 지원된다.

정의 및 목적

미디어 쿼리는 출력 장치의 유형(화면, 인쇄물 등)이나 화면 해상도, 방향(가로/세로), 종횡비, 뷰포트 너비와 높이, 사용자 접근성 선호도(모션 감소, 투명도 감소, 색상 테마 등)와 같은 다양한 조건을 검사하여, 해당 조건이 참(true)일 때만 특정 CSS 스타일을 적용하는 역할을 한다. 이를 통해 하나의 HTML 문서가 데스크톱, 태블릿, 스마트폰 등 다양한 화면 크기와 환경에 유연하게 대응하는 반응형 웹 디자인(Responsive Web Design)을 구현할 수 있다.

사용 문법

미디어 쿼리는 기본적으로 다음과 같은 구조로 작성된다.

@media [미디어 유형] and/not/only (미디어 특성: 값) {
    /* 조건이 참일 때 적용할 CSS 스타일 */
}
  • 미디어 유형(Media Type): 장치의 종류를 지정한다. all(모든 장치), screen(화면), print(인쇄물)의 세 가지가 주로 사용된다. 생략 시 기본값은 all이다.
  • 미디어 특성(Media Feature): 조건으로 사용할 장치의 구체적인 특징을 괄호 안에 표현한다. 대표적인 특성으로는 width, height, aspect-ratio, orientation, resolution, color, hover, prefers-color-scheme 등이 있다.
  • 논리 연산자(Logical Operators): and, not, only, or(쉼표)를 사용해 여러 조건을 조합할 수 있다.

주요 활용 예시

반응형 웹 디자인에서 가장 널리 사용되는 패턴은 뷰포트 너비에 따른 분기이다.

/* 뷰포트 너비가 768px 이하일 때 적용 (모바일) */
@media (max-width: 768px) {
    /* 모바일용 스타일 */
}

/* 뷰포트 너비가 769px 이상 1024px 이하일 때 적용 (태블릿) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 태블릿용 스타일 */
}

/* 뷰포트 너비가 1025px 이상일 때 적용 (데스크톱) */
@media (min-width: 1025px) {
    /* 데스크톱용 스타일 */
}

CSS Level 4부터는 min-/max- 접두사 없이 비교 연산자(<=, >=)를 사용한 범위 구문도 지원된다.

적용 컨텍스트

미디어 쿼리는 다음과 같은 세 가지 맥락에서 사용될 수 있다.

  1. CSS @media 규칙: 스타일시트 내에서 조건부 스타일 블록을 정의할 때 사용한다.
  2. HTML 요소의 media 속성: <link>, <style>, <source> 등의 HTML 요소에 media 속성을 추가해 특정 조건에서만 해당 리소스가 적용되도록 한다.
  3. JavaScript API: Window.matchMedia() 메서드와 MediaQueryList.addListener()를 통해 JavaScript 코드에서 미디어 쿼리 상태를 동적으로 판별하고 변화를 감지할 수 있다.

표준화 현황

미디어 쿼리는 W3C의 CSS 표준의 일부로 관리되고 있다. Media Queries Level 3(권고안)은 2012년 6월에 발표되었고, 이후 기능이 확장된 Media Queries Level 4는 2021년 12월 W3C 후보 권고안(Candidate Recommendation) 단계에 도달했다. Level 4에서는 prefers-color-scheme(다크 모드), prefers-reduced-motion(모션 감소), prefers-reduced-transparency(투명도 감소), dynamic-range, video-dynamic-range 등 사용자 환경과 접근성 관련 특성이 새롭게 추가되었다.

호환성

모든 주요 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 미디어 쿼리를 지원한다. Internet Explorer 8 이하 버전에서는 지원되지 않으며, 이 경우 폴리필(polyfill) 라이브러리를 사용하여 유사한 기능을 구현할 수 있다.

둘러보기

더 찾아볼 만한 주제

    전체 문서 보기