미디어 쿼리 3단계

W3C 권고안, 2024년 5월 21일

이 문서에 대한 자세한 정보

이 버전:: https://www.w3.org/TR/2024/REC-mediaqueries-3-20240521/
최신 버전:: https://www.w3.org/TR/mediaqueries-3/
최신 편집자 버전:: https://drafts.csswg.org/mediaqueries-3/
이전 버전:: https://www.w3.org/TR/2022/REC-mediaqueries-3-20220405/
변경 이력:: https://www.w3.org/standards/history/mediaqueries-3/
의견 처리 결과:: https://drafts.csswg.org/mediaqueries-3/issues-2012-and-later
구현 보고서:: https://drafts.csswg.org/mediaqueries-3/impl-report
편집자:: Florian Rivoal (초청 전문가)
이전 편집자:: Håkon Wium Lie <howcome @opera.com>; Tantek Çelik <tantek @cs.stanford.edu>; Daniel Glazman <daniel.glazman @disruptive-innovations.com>; Anne van Kesteren <annevk@opera.com>
피드백:: GitHub 이슈에서 이 명세에 대한 논의가 권장됩니다. 이슈를 등록할 때 제목에 “mediaqueries-3”를 포함해 주세요, 예를 들면: “[mediaqueries-3] …의견 요약…”. 모든 이슈 및 의견은 아카이브되며, 과거 아카이브도 제공됩니다.
정오표:: http://www.w3.org/Style/2022/REC-mediaqueries-3-20220405-errata.html

요약

HTML과 CSS는 현재 다양한 미디어 유형에 맞춘 미디어 의존 스타일 시트를 지원합니다. 예를 들어, 문서는 화면에 표시될 때는 산세리프 폰트를, 인쇄될 때는 세리프 폰트를 사용할 수 있습니다. ‘screen’과 ‘print’는 정의된 두 가지 미디어 유형입니다. 미디어 쿼리는 스타일 시트의 라벨링을 더 정밀하게 할 수 있도록 미디어 유형의 기능을 확장합니다.

미디어 쿼리는 미디어 유형과 하나 이상의 미디어 특징 조건을 확인하는 표현식으로 구성됩니다. 미디어 쿼리에서 사용할 수 있는 미디어 특징에는 ‘width’, ‘height’, ‘color’ 등이 있습니다. 미디어 쿼리를 사용하면 프레젠테이션을 콘텐츠 자체를 변경하지 않고도 특정 출력 장치 범위에 맞게 조정할 수 있습니다.

문서 상태

이 섹션은 문서가 발행된 시점의 상태를 설명합니다. 최신 W3C 출판물 목록과 이 기술 보고서의 최신 버전은 W3C 기술 보고서 인덱스 https://www.w3.org/TR/에서 확인하실 수 있습니다.

이 문서는 CSS 작업 그룹 에서 권고안(Recommendation)으로 발행되었습니다. 권고안 절차를 따릅니다. 제안된 수정 사항이 포함되어 있습니다.

W3C 권고안은 광범위한 합의 과정을 거쳐 W3C와 회원들이 승인한 명세이며, 작업 그룹 회원들이 구현에 대해 로열티 없는 라이선스를 약속합니다.

W3C는 이 명세를 웹 표준으로 널리 도입할 것을 권장합니다.

피드백은 GitHub 이슈 등록(권장)으로 보내주십시오. 제목에 “mediaqueries-3”를 포함해 주세요, 예시: “[mediaqueries-3] …의견 요약…”. 모든 이슈와 의견은 아카이브됩니다. 또는, (아카이브) 공개 메일링 리스트 www-style@w3.org로도 보낼 수 있습니다. 의견 제출 마감일은 2024년 7월 21일입니다.

이 권고안의 향후 업데이트에는 새로운 기능이 포함될 수 있습니다.

이 문서는 2023년 11월 3일 W3C 프로세스 문서를 따릅니다.

이 문서는 W3C 특허 정책에 따라 운영되는 그룹에서 작성되었습니다. W3C는 그룹 산출물과 관련하여 공개 특허 공개 목록을 유지합니다; 해당 페이지에는 특허 공개 방법도 안내되어 있습니다. 특정 필수 청구항이 포함된 특허를 알고 있는 개인은 W3C 특허 정책 6조에 따라 정보를 공개해야 합니다.

제안된 수정 사항은 문서 내에 표시되어 있습니다.

1. 배경

(이 섹션은 규범적이지 않습니다.)

HTML4 [HTML401] 및 CSS2 [CSS21] 는 현재 다양한 미디어 유형에 맞춘 미디어 의존 스타일 시트를 지원합니다. 예를 들어, 문서는 화면과 인쇄용으로 서로 다른 스타일 시트를 사용할 수 있습니다. HTML4에서는 다음과 같이 작성할 수 있습니다:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

CSS 스타일 시트 내부에서는 특정 미디어 유형에 적용되는 섹션을 선언할 수 있습니다:

@media screen {
  * { font-family: sans-serif }
}

‘print’와 ‘screen’ 미디어 유형은 HTML4에서 정의되어 있습니다. HTML4에서의 전체 미디어 유형 목록은: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’입니다. CSS2는 동일한 목록을 정의하며, ‘aural’을 폐지하고 ‘embossed’와 ‘speech’를 추가합니다. 또한, ‘all’은 스타일 시트가 모든 미디어 유형에 적용됨을 나타냅니다.

여러 사용자 에이전트에서 미디어별 스타일 시트를 지원합니다. 가장 많이 사용되는 기능은 ‘screen’과 ‘print’를 구분하는 것입니다.

스타일 시트가 어떤 출력 장치 유형에 적용되는지 더 자세히 설명할 방법에 대한 요청이 있었습니다. 다행히도 HTML4는 이러한 요청을 미리 고려하여 미디어 유형에 대한 전방 호환 구문을 정의했습니다. 아래는 HTML4, 섹션 6.13의 인용문입니다:

HTML의 향후 버전은 새로운 값을 도입하거나 파라미터가 있는 값을 허용할 수 있습니다. 이러한 확장 기능 도입을 쉽게 하기 위해, 적합한 사용자 에이전트는 media 속성 값을 다음과 같이 파싱할 수 있어야 합니다:
값은 쉼표로 구분된 항목 목록입니다. 예를 들어,
media="screen, 3d-glasses, print and resolution > 90dpi"
는 다음과 같이 매핑됩니다:
"screen"
"3d-glasses"
"print and resolution > 90dpi"
각 항목은 US ASCII 문자 [a-zA-Z] (유니코드 65-90, 97-122), 숫자 [0-9] (유니코드 30-39), 또는 하이픈(45)이 아닌 첫 번째 문자 바로 앞에서 잘립니다. 예시에서는 다음과 같습니다:
"screen"
"3d-glasses"
"print"

이 명세서에서 설명하는 미디어 쿼리는 HTML4에 기술된 메커니즘을 기반으로 합니다. 미디어 쿼리의 구문은 HTML4에 예약된 미디어 유형 구문에 맞춰져 있습니다. HTML4의 media 속성은 XHTML 및 일반 XML에서도 존재합니다. 동일한 구문은 ‘@media’와 ‘@import’ CSS 규칙에서도 사용할 수 있습니다.

하지만, 미디어 쿼리의 파싱 규칙은 HTML4와 호환되지 않으므로 CSS에서 사용되는 미디어 쿼리의 규칙과 일치하도록 되어 있습니다.

HTML의 최신 버전 [HTML] 은 미디어 쿼리 명세를 직접 참조하므로 HTML의 규칙이 업데이트됩니다.

2. 미디어 쿼리

미디어 쿼리는 미디어 유형과 특정 expression 조건을 확인하는 0개 이상의 media feature로 구성됩니다.

이 섹션에서의 미디어 쿼리 관련 설명은 구문 섹션을 따르는 것으로 가정합니다. 구문을 준수하지 않는 미디어 쿼리는 오류 처리 섹션에서 논의됩니다. 즉, 이 섹션의 요구사항보다 구문이 우선합니다.

HTML로 작성된 간단한 예시입니다:

<link rel="stylesheet" media="screen and (color)" href="example.css" />

이 예시는 특정 스타일 시트 (example.css)가 특정 미디어 유형 (‘screen’)과 특정 기능(컬러 화면이어야 함)에 적용됨을 나타냅니다.

동일한 미디어 쿼리를 CSS의 @import 규칙으로 작성한 예시:

@import url(color.css) screen and (color);

미디어 쿼리는 참 또는 거짓이 될 수 있는 논리 표현식입니다. 미디어 쿼리가 참이 되려면, 미디어 쿼리의 미디어 유형이 사용자 에이전트가 실행 중인 장치의 미디어 유형과 일치해야 하며("적용 대상" 줄에 정의됨), 미디어 쿼리 내 모든 표현식이 참이어야 합니다.

모든 미디어 유형에 적용되는 미디어 쿼리를 위한 축약 구문이 제공됩니다. 키워드 ‘all’은 생략할 수 있습니다(마지막 ‘and’와 함께). 즉, 미디어 유형이 명시적으로 지정되지 않으면 ‘all’입니다.

즉, 다음 예시는 동일합니다:

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

다음도 마찬가지입니다:

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

여러 미디어 쿼리는 미디어 쿼리 리스트로 조합할 수 있습니다. 쉼표로 구분된 미디어 쿼리 목록에서 하나 이상의 미디어 쿼리가 참이면 전체 목록은 참이 되고, 그렇지 않으면 거짓입니다. 미디어 쿼리 구문에서 쉼표는 논리 OR을, ‘and’ 키워드는 논리 AND를 나타냅니다.

CSS의 @media 규칙에서 쉼표로 구분된 여러 미디어 쿼리 예시:

@media screen and (color), projection and (color) { … }

미디어 쿼리 리스트가 비어 있으면(즉, 선언이 빈 문자열이거나 공백만 있음) 참으로 평가됩니다.

즉, 다음 예시는 동일합니다:

@media all { … }
@media { … }

논리 NOT은 ‘not’ 키워드를 통해 표현할 수 있습니다. 미디어 쿼리 앞에 ‘not’ 키워드가 있으면 결과가 반전됩니다. 즉, 원래 참이었던 미디어 쿼리는 거짓이 되고, 반대로도 마찬가지입니다. HTML4에서 미디어 유형만 지원하는 사용자 에이전트는 ‘not’ 키워드를 인식하지 못하므로 해당 스타일 시트가 적용되지 않습니다.

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

‘only’ 키워드는 구형 사용자 에이전트로부터 스타일 시트를 숨기기 위해 사용할 수 있습니다. 사용자 에이전트는 ‘only’로 시작하는 미디어 쿼리를 ‘only’ 키워드가 없는 것처럼 처리해야 합니다.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

미디어 쿼리 구문은 HTML, XHTML, XML [XMLSTYLE] 및 CSS의 @import, @media 규칙에서 사용할 수 있습니다.

동일한 예시를 HTML, XHTML, XML, @import, @media로 작성한 예시:

<link media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">

<link media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />

<?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }

[XMLSTYLE] 명세는 아직 media 의사 속성에서 미디어 쿼리를 사용하도록 업데이트되지 않았습니다.

미디어 특징이 UA가 실행 중인 장치에 적용되지 않으면, 해당 미디어 특징을 포함하는 표현식은 항상 거짓이 됩니다.

미디어 특징 ‘device-aspect-ratio’는 시각적 장치에만 적용됩니다. 오디오 장치에서는 ‘device-aspect-ratio’를 포함하는 표현식이 항상 거짓이 됩니다:

<link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" />

측정 단위가 장치에 적용되지 않으면 표현식은 항상 거짓이 됩니다.

‘px’ 단위는 ‘speech’ 장치에는 적용되지 않으므로 다음 미디어 쿼리는 항상 거짓이 됩니다:

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

이 예시의 미디어 쿼리 앞에 ‘not’ 키워드를 추가하면 참이 됩니다.

순환 의존성을 피하기 위해, 다른 기능이 미디어 쿼리의 평가에 영향을 준다고 명시하지 않는 한, 표현식을 평가하기 위해 스타일 시트를 적용할 필요가 없습니다. 예를 들어, 인쇄 문서의 종횡비는 스타일 시트에 의해 영향을 받을 수 있지만 ‘device-aspect-ratio’에 관련된 표현식은 UA의 기본 종횡비를 기반으로 합니다.

사용자 에이전트는 사용자 환경이 변할 때(예: 장치를 가로에서 세로로 회전할 때) 페이지를 다시 평가하고 다시 레이아웃하는 것이 기대되지만 반드시 요구되는 것은 아닙니다.

3. 구문

미디어 쿼리 구문은 CSS2 문법을 기준으로 설명됩니다. 따라서, 여기서 정의하지 않은 규칙은 CSS2에서 정의됩니다. 아래에 정의된 media_query_list 생성규칙은 CSS2의 media_list 생성규칙을 대체합니다. [CSS21]

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
media_feature
 : IDENT
 ;

CSS2에서 정의된 COMMENT 토큰은 (가독성을 위해) 문법에는 나타나지 않지만, 이 토큰들은 언제든지 다른 토큰 사이에 임의의 개수로 등장할 수 있습니다. [CSS21]

다음과 같은 새로운 정의가 도입되었습니다:

L  l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|[ \t\r\n\f])?|\\y

다음과 같은 새로운 토큰이 도입되었습니다:

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

RESOLUTION은 CSS2의 term 생성규칙에 추가되어야 합니다.

CSS 스타일 시트는 일반적으로 ASCII 대소문자 구분 없음이며, 미디어 쿼리도 마찬가지입니다.

구문을 따르는 것 외에도, 각 미디어 쿼리는 각각의 명세에 따라 미디어 유형과 미디어 특징을 사용해야 적합한 것으로 간주됩니다.

아래 예시에서 첫 번째 미디어 쿼리만 적합하며, "example" 미디어 유형은 존재하지 않기 때문입니다.

@media all { body { background:lime } }
@media example { body { background:red } }

3.1. 오류 처리

적합하지 않은 미디어 쿼리에 대해서는 사용자 에이전트가 이 섹션의 규칙을 따라야 합니다.

제안된 수정 2: ‘layer’도 알 수 없는 미디어 유형으로 취급하지 말고, 미디어 유형 자리에 사용하면 구문 오류로 처리해야 합니다.

이 변경사항은 이슈 7225의 결과로 도입되었습니다.

이 변경사항은 테스트가 있습니다

이 변경사항에 대한 테스트가 WPT에 추가되었습니다. 결과는 wpt.fyi에서 확인할 수 있습니다.

알 수 없는 미디어 유형. 알 수 없는 미디어 유형은 false로 평가됩니다. 실질적으로, 장치의 미디어 유형과 일치하지 않는 알려진 미디어 유형과 동일하게 처리됩니다. 하지만, ‘layer’, ‘not’, ‘and’, ‘only’, ‘or’ 미디어 유형은 예외입니다. 이들은 IDENT 생성규칙에는 일치하지만, 알 수 없는 미디어 유형으로 처리하지 않고, 잘못된 쿼리 절을 트리거해야 합니다.

참고: ‘layer’ 제외 이유는 @import url(…) layer; 구문에서 cascade layers를 위해 사용될 때 모호할 수 있기 때문입니다. [CSS-CASCADE-5] 참고.

미디어 쿼리 "unknown"은 실제로 지원되는 미디어 유형이 아니라면 false로 평가됩니다. 마찬가지로, "not unknown"은 true로 평가됩니다.
다음은 ‘only’와 ‘or’를 미디어 유형으로 사용했기 때문에 잘못된 미디어 쿼리입니다.
```
@media only and or { … }
```
알 수 없는 미디어 유형은 IDENT 생성규칙에 실제로 일치하지 않는 미디어 유형과 구별됩니다. 후자는 잘못된 미디어 쿼리 절에 해당합니다.
알 수 없는 미디어 특징. 지정된 미디어 특징 중 하나가 알려지지 않은 경우, 사용자 에이전트는 해당 미디어 쿼리를 "not all"로 나타내야 합니다.
```
<link rel="stylesheet" media="screen and (max-weight: 3kg) and (color), (color)" href="example.css" />
```
이 예시에서 첫 번째 미디어 쿼리는 "not all"로 나타내어 false로 평가되고, 두 번째 미디어 쿼리는 첫 번째가 지정되지 않은 것처럼 평가됩니다.
```
@media (min-orientation:portrait) { … }
```
이 경우 ‘orientation’ 특징이 ‘min-’ 접두사를 허용하지 않으므로 "not all"로 나타냅니다.
알 수 없는 미디어 특징 값. 알 수 없는 미디어 특징과 마찬가지로, 지정된 미디어 특징 값 중 하나가 알려지지 않은 경우 사용자 에이전트는 해당 미디어 쿼리를 "not all"로 나타내야 합니다.

미디어 쿼리 (color:20example)는 ‘color’ 미디어 특징에 대해 알 수 없는 값을 지정하므로 "not all"로 나타냅니다.
다음 미디어 쿼리는 음수 길이가 ‘width’ 미디어 특징에 허용되지 않으므로 "not all"로 나타냅니다:
```
@media (min-width: -100px) { … }
```
잘못된 미디어 쿼리. 사용자 에이전트는 미디어 쿼리를 파싱하는 동안 예상치 못한 토큰이 나타나면 (), [], {}, "", '' 쌍을 맞추는 규칙과 이스케이프 처리를 올바르게 적용하면서 미디어 쿼리 끝까지 읽어야 합니다. 예기치 않은 토큰이 포함된 미디어 쿼리는 "not all"로 나타냅니다. [CSS21]
```
@media (example, all,), speech { /* only applicable to speech devices */ }
@media &test, screen           { /* only applicable to screen devices */ }
```
아래는 ‘and’와 표현식 사이에 공백이 없으므로 잘못된 미디어 쿼리입니다. (이 구문은 함수 표기법으로 예약되어 있습니다.)
```
@media all and(color) { … }
```
미디어 쿼리는 호스트 언어의 오류 처리 규칙도 따라야 합니다.
```
@media test;,all { body { background:lime } }
```
…는 세미콜론이 @media 규칙을 종료시키기 때문에 적용되지 않습니다.

4. 미디어 특징

구문적으로 미디어 특징은 CSS 속성과 유사하게 이름을 가지며 특정 값을 허용합니다. 하지만, 속성과 미디어 특징 사이에는 몇 가지 중요한 차이점이 있습니다:

속성은 선언에서 문서의 표시 방법에 대한 정보를 제공하는 데 사용됩니다. 미디어 특징은 표현식에서 출력 장치의 요구사항을 설명하는 데 사용됩니다.
대부분의 미디어 특징은 "크거나 같다" 및 "작거나 같다" 제약을 표시하기 위한 ‘min-’ 또는 ‘max-’ 접두사를 선택적으로 허용합니다. 이 구문은 HTML 및 XML과 충돌할 수 있는 "<" 및 ">" 문자를 피하기 위해 사용됩니다. 접두사를 허용하는 미디어 특징은 대부분 접두사와 함께 사용되지만 단독으로도 사용할 수 있습니다.
속성은 선언을 완성하기 위해 항상 값이 필요합니다. 반면, 미디어 특징은 값 없이도 사용할 수 있습니다. feature 미디어 특징의 경우 (feature)는 (feature:x)가 0 또는 단위 식별자가 붙은 0(즉, 0, 0px, 0em 등)이 아닌 값 x에 대해 true로 평가된다면 true로 평가됩니다. min/max로 접두사가 붙은 미디어 특징은 값 없이 사용할 수 없습니다. min/max 접두사 미디어 특징에 값 없이 사용하면 미디어 쿼리가 잘못된 것으로 간주됩니다.
속성은 여러 값을 포함하는 복잡한 값을 허용할 수 있습니다(예: 여러 값을 포함하는 계산). 미디어 특징은 하나의 값만 허용합니다: 하나의 키워드, 하나의 숫자, 또는 단위 식별자가 붙은 숫자. (예외는 ‘aspect-ratio’ 및 ‘device-aspect-ratio’ 미디어 특징입니다.)

예를 들어, ‘color’ 미디어 특징은 값 없이(‘(color)’) 혹은 값과 함께(‘(min-color: 1)’) 표현식을 만들 수 있습니다.

이 명세서는 시각 및 촉각 장치에서 사용할 수 있는 미디어 특징을 정의합니다. 이와 유사하게, 청각 미디어 유형에 대한 미디어 특징도 정의할 수 있습니다.

4.1. width

값: <length>
적용 대상: 시각 및 촉각 미디어 유형
min/max 접두사 허용: 예

‘width’ 미디어 특징은 출력 장치의 타겟 표시 영역의 너비를 나타냅니다. 연속 미디어의 경우, 이는 CSS2 섹션 9.1.1 [CSS21]에서 설명한 뷰포트의 너비(스크롤 바 크기 포함)입니다. 페이지 미디어의 경우, 이는 CSS2 섹션 13.2 [CSS21]에서 설명한 페이지 박스의 너비입니다.

지정된 <length>는 음수일 수 없습니다.

예시: 아래 미디어 쿼리는 스타일 시트가 25cm보다 넓은 인쇄 출력에서 사용 가능함을 나타냅니다:

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

이 미디어 쿼리는 스타일 시트가 뷰포트(문서가 렌더링 되는 화면/용지 영역)의 너비가 400~700픽셀 사이인 장치에서 사용 가능함을 나타냅니다:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

이 미디어 쿼리는 뷰포트의 너비가 20em보다 큰 경우, 화면과 휴대 장치에서 스타일 시트가 사용 가능함을 나타냅니다.

@media handheld and (min-width: 20em),
  screen and (min-width: 20em) { … }

‘em’ 값은 ‘font-size’의 초기 값에 상대적입니다.

4.2. height

값: <length>
적용 대상: 시각 및 촉각 미디어 유형
min/max 접두사 허용: 예

‘height’ 미디어 특징은 출력 장치의 타겟 표시 영역의 높이를 나타냅니다. 연속 미디어의 경우, 이는 렌더링된 스크롤 바 크기를 포함한 뷰포트의 높이입니다. 페이지 미디어의 경우, 이는 페이지 박스의 높이입니다.

지정된 <length>는 음수일 수 없습니다.

4.3. device-width

값: <length>
적용 대상: 시각 및 촉각 미디어 유형
min/max 접두사 허용: 예

‘device-width’ 미디어 특징은 출력 장치의 렌더링 표면의 너비를 나타냅니다. 연속 미디어의 경우, 이는 화면의 너비입니다. 페이지 미디어의 경우, 이는 페이지 시트 크기의 너비입니다.

지정된 <length>는 음수일 수 없습니다.

@media screen and (device-width: 800px) { … }

위 예시에서는 스타일 시트가 현재 800픽셀의 가로 해상도를 가진 화면에만 적용됩니다. ‘px’ 단위는 단위 섹션에서 설명한 논리적 단위입니다.

4.4. device-height

값: <length>
적용 대상: 시각 및 촉각 미디어 유형
min/max 접두사 허용: 예

‘device-height’ 미디어 특징은 출력 장치의 렌더링 표면의 높이를 설명합니다. 연속 미디어의 경우, 이는 화면의 높이이며, 페이지 미디어의 경우 페이지 시트 크기의 높이입니다.

지정된 <length>는 음수일 수 없습니다.

<link rel="stylesheet" media="screen and (device-height: 600px)" />

위 예시에서 스타일 시트는 세로 픽셀이 정확히 600인 화면에만 적용됩니다. ‘px’ 단위의 정의는 CSS의 다른 부분과 동일합니다.

4.5. orientation

값: portrait | landscape
적용 대상: 비트맵 미디어 유형
min/max 접두사 허용: 아니오

‘orientation’ 미디어 특징은 ‘height’ 미디어 특징의 값이 ‘width’ 미디어 특징의 값보다 크거나 같을 때 ‘portrait’이 됩니다. 그렇지 않으면 ‘orientation’은 ‘landscape’입니다.

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

4.6. aspect-ratio

값: <ratio>
적용 대상: 비트맵 미디어 유형
min/max 접두사 허용: 예

‘aspect-ratio’ 미디어 특징은 ‘width’ 미디어 특징 값과 ‘height’ 미디어 특징 값의 비율로 정의됩니다.

4.7. device-aspect-ratio

값: <ratio>
적용 대상: 비트맵 미디어 유형
min/max 접두사 허용: 예

‘device-aspect-ratio’ 미디어 특징은 ‘device-width’ 미디어 특징 값과 ‘device-height’ 미디어 특징 값의 비율로 정의됩니다.

예를 들어, 사각 픽셀의 화면 장치가 1280의 가로 픽셀과 720의 세로 픽셀(일반적으로 "16:9"로 불림)을 가진다면, 다음 미디어 쿼리는 모두 해당 장치에 일치합니다:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }

4.8. color

값: <integer>
적용 대상: 시각 미디어 유형
min/max 접두사 허용: 예

‘color’ 미디어 특징은 출력 장치의 색상 구성요소당 비트 수를 나타냅니다. 장치가 컬러 장치가 아닌 경우 값은 0입니다.

지정된 <integer>는 음수일 수 없습니다.

예를 들어, 다음 두 미디어 쿼리는 스타일 시트가 모든 컬러 장치에 적용됨을 나타냅니다:

@media all and (color) { … }
@media all and (min-color: 1) { … }

이 미디어 쿼리는 색상 구성요소당 2비트 이상인 컬러 장치에 스타일 시트가 적용됨을 나타냅니다:

@media all and (min-color: 2) { … }

색상 구성요소마다 비트 수가 다르면 가장 작은 값을 사용합니다.

예를 들어, 8비트 색상 시스템이 빨간색 3비트, 초록색 3비트, 파란색 2비트를 사용하는 경우, ‘color’ 미디어 특징 값은 2입니다.

인덱스 컬러를 사용하는 장치에서는 룩업 테이블에서 색상 구성요소당 최소 비트 수를 사용합니다.

설명된 기능은 색상 기능을 피상적으로만 설명할 수 있습니다. 더 상세한 기능이 필요할 경우 RFC2531 [RFC2531]은 이후 단계에서 지원될 수 있는 더 구체적인 미디어 특징을 제공합니다.

4.9. color-index

값: <integer>
적용 대상: 시각 미디어 유형
min/max 접두사 허용: 예

‘color-index’ 미디어 특징은 출력 장치의 색상 룩업 테이블에 있는 항목 수를 나타냅니다. 장치가 색상 룩업 테이블을 사용하지 않으면 값은 0입니다.

지정된 <integer>는 음수일 수 없습니다.

예를 들어, 아래 두 방법은 스타일 시트가 모든 컬러 인덱스 장치에 적용됨을 나타냅니다:

@media all and (color-index) { … }
@media all and (min-color-index: 1) { … }

이 미디어 쿼리는 256개 이상의 항목이 있는 컬러 인덱스 장치에 스타일 시트가 적용됨을 나타냅니다:

<?xml-stylesheet media="all and (min-color-index: 256)"
  href="http://www.example.com/…" ?>

4.10. monochrome

값: <integer>
적용 대상: 시각 미디어 유형
min/max 접두사 허용: 예

‘monochrome’ 미디어 특징은 모노크롬 프레임 버퍼의 픽셀당 비트 수를 설명합니다. 장치가 모노크롬 장치가 아니면 값은 0입니다.

지정된 <integer>는 음수일 수 없습니다.

예를 들어, 아래 두 방법은 스타일 시트가 모든 모노크롬 장치에 적용됨을 나타냅니다:

@media all and (monochrome) { … }
@media all and (min-monochrome: 1) { … }

픽셀당 2비트보다 많은 모노크롬 장치에 스타일 시트가 적용됨을 표현:

@media all and (min-monochrome: 2) { … }

컬러 페이지용 스타일 시트와 모노크롬 페이지용 스타일 시트를 각각 적용:

<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

4.11. resolution

값: <resolution>
적용 대상: 비트맵 미디어 유형
min/max 접두사 허용: 예

‘resolution’ 미디어 특징은 출력 장치의 해상도, 즉 픽셀의 밀도를 설명합니다. 비정사각형 픽셀을 가진 장치에서 ‘min-resolution’ 쿼리는 가장 밀도가 낮은 차원을, ‘max-resolution’ 쿼리는 가장 밀도가 높은 차원을 비교해야 합니다. ‘resolution’(접두사 없이) 쿼리는 비정사각형 픽셀 장치에 절대 일치하지 않습니다.

프린터의 경우, 이는 임의 색상의 점을 인쇄하는 스크리닝 해상도에 해당합니다.

예를 들어, 이 미디어 쿼리는 해상도가 300dpi보다 큰 장치에서 스타일 시트가 사용 가능함을 나타냅니다:

@media print and (min-resolution: 300dpi) { … }

이 미디어 쿼리는 해상도가 118dpcm보다 큰 장치에서 스타일 시트가 사용 가능함을 나타냅니다:

@media print and (min-resolution: 118dpcm) { … }

4.12. scan

값: progressive | interlace
적용 대상: "tv" 미디어 유형
min/max 접두사 허용: 아니오

‘scan’ 미디어 특징은 "tv" 출력 장치의 스캔 방식을 설명합니다.

예를 들어, 이 미디어 쿼리는 프로그레시브 스캔 방식의 tv 장치에서 스타일 시트가 사용 가능함을 나타냅니다:

@media tv and (scan: progressive) { … }

4.13. grid

값: <integer>
적용 대상: 시각 및 촉각 미디어 유형
min/max 접두사 허용: 아니오

‘grid’ 미디어 특징은 출력 장치가 그리드 기반인지 비트맵 기반인지 질의하는 데 사용됩니다. 출력 장치가 그리드 기반(예: "tty" 터미널, 고정 폰트만 사용하는 휴대폰 디스플레이)인 경우 값은 1입니다. 그렇지 않으면 값은 0입니다.

0과 1만 유효한 값입니다. (-0도 포함) 그 외의 값은 모두 잘못된 미디어 쿼리를 만듭니다.

아래는 두 가지 예시입니다:

@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (max-device-height: 7em) { … }

5. 값

이 명세는 두 가지 새로운 값을 도입합니다.

<ratio> 값은 양수(0이나 음수 아님) <integer> 뒤에 선택적 공백, 이어서 슬래시(‘/’), 다시 선택적 공백, 그리고 양수 <integer>가 옵니다.

<resolution> 값은 양수 <number> 뒤에 바로 단위 식별자(‘dpi’ 또는 ‘dpcm’)가 옵니다.

공백, <integer>, <number> 및 이 명세에서 사용하는 기타 값들은 CSS의 다른 부분과 동일하며, CSS 2.1에서 규범적으로 정의됩니다. [CSS21]

6. 단위

미디어 쿼리에서 사용하는 단위는 CSS의 다른 부분에서 사용하는 단위와 동일합니다. 예를 들어, 픽셀 단위는 CSS 픽셀을 나타내며 실제 물리적 픽셀이 아닙니다.

미디어 쿼리에서의 상대 단위는 초기 값에 기반합니다. 즉, 단위는 선언의 결과를 기반으로 하지 않습니다. 예를 들어, HTML에서 ‘em’ 단위는 ‘font-size’의 초기 값에 상대적입니다.

6.1. 해상도

‘dpi’ 및 ‘dpcm’ 단위는 출력 장치의 해상도, 즉 장치 픽셀의 밀도를 설명합니다. 해상도 단위 식별자는 다음과 같습니다:

dpi: CSS ‘inch’당 도트 수
dpcm: CSS ‘centimeter’당 도트 수

이 명세에서는, 이 단위들은 ‘resolution’ 미디어 특징에서만 사용됩니다.

7. 변경 사항

7.1. 2022년 4월 5일 권고안 이후 변경 사항

이전 제안된 수정 사항이 권고안에 규범적으로 통합되었습니다:

섹션 3.1의 이전 “제안된 수정 1”: ‘not’, ‘and’, ‘only’, ‘or’ 키워드는 미디어 유형 자리에서 알 수 없는 미디어 유형으로 취급하지 않고, 구문 오류로 처리해야 함을 명확히 함.

알 수 없는 미디어 유형은 false로 평가됩니다. 실질적으로, 장치의 미디어 유형과 일치하지 않는 알려진 미디어 유형과 동일하게 처리됩니다. 하지만 ‘not’, ‘and’, ‘only’, ‘or’ 미디어 유형은 예외입니다. 이들은 IDENT 생성 규칙에 일치하지만, 알 수 없는 미디어 유형으로 취급하지 않고, 잘못된 쿼리 절을 트리거해야 합니다.

이 변경의 이유는 2013-05-30 CSS WG 회의록과 관련 이메일에서 확인할 수 있습니다.
이 변경사항에 대한 테스트가 WPT에 추가되었습니다. 결과는 wpt.fyi에서 볼 수 있습니다.

새로운 제안된 수정 사항이 도입되었습니다:

제안된 수정 2는 섹션 3.1에 포함됨: ‘layer’도 미디어 유형 자리에서 알 수 없는 미디어 유형으로 취급하지 않고, 구문 오류로 처리해야 함을 요구합니다.

7.2. 2012년 6월 19일 권고안 이후 변경 사항

제안된 수정 사항이 도입되었습니다:

제안된 수정 1는 섹션 3.1에 포함됨: ‘not’, ‘and’, ‘only’, ‘or’ 키워드는 미디어 유형 자리에서 알 수 없는 미디어 유형으로 취급하지 않고, 구문 오류로 처리해야 함을 명확히 함.

소수의 편집 및 마크업 수정도 이루어졌습니다:

섹션 2: 예시에서 중복된 속성 제거.

<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">

<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />

섹션 2: 다른 명세에서 이 명세를 확장하기 쉽도록 문장을 수정.
순환 의존성을 피하기 위해, ~~it is never~~다른 기능이 명시적으로 미디어 쿼리의 평가에 영향을 준다고 지정하지 않는 한, 스타일 시트를 적용할 필요가 없습니다.
섹션 3: CSS 구문을 설명하는 문장에서 더 정확한 용어 사용.
CSS 스타일 시트는 일반적으로 ~~case-insensitive~~ ASCII 대소문자 구분 없음이며, 미디어 쿼리도 동일합니다.
이 주장은 테스트로 확인되었습니다.

섹션 4.13: 예시의 구문 오류 수정.

@media handheld and (grid) and (device-max-heightmax-device-height: 7em) { … }

참고문헌 링크가 최신 버전으로 업데이트되었습니다.
명세 전체의 여러 링크가 http에서 https로 변경되었습니다.

7.3. 2010년 7월 27일 후보 권고안 이후 변경 사항

2010년 7월 27일 후보 권고안 이후 이 명세에 적용된 변경 사항은 다음과 같습니다:

섹션 4.11: 프린터의 경우 해상도에서 도트의 의미가 모호했으므로, 해상도의 의미를 명확히 설명.

프린터의 경우, 이는 임의 색상의 점을 인쇄하는 스크리닝 해상도에 해당합니다.
섹션 6.1: ‘inch’와 ‘cm’가 실제 단위가 아니라 CSS 단위임을 명확히 함.

dpi
도트/ CSS ‘inch’~~inch~~
dpcm
도트/ CSS ‘centimeter’cm
섹션 4.1: 비규범적 문구를 올바른 규범적 문구로 수정(섹션 6 참조).

‘em’ 값은 ~~루트 요소의 글꼴 크기~~‘font-size’의 초기 값에 상대적입니다.
섹션 6: 단위가 선언의 결과를 기반으로 하지 않음을 명확히 함.

미디어 쿼리에서의 상대 단위는 초기 값에 기반하며, 단위는 선언의 결과를 기반으로 하지 않음. 예를 들어, HTML에서 ‘em’ 단위는 ‘font-size’의 초기 값에 상대적입니다.

감사의 글

이 명세는 W3C CSS 작업 그룹이 작성한 결과물입니다.

Björn Höhrmann, Christoph Päper, Chris Lilley, Simon Pieters, Rijk van Geijtenbeek, Sigurd Lerstad, Arve Bersvendsen, Susan Lesch, Philipp Hoschka, Roger Gimson, Steven Pemberton, Simon Kissane, Melinda Grant, 그리고 L. David Baron의 의견이 이 명세서의 품질을 높여주었습니다.

프라이버시 고려사항

이 명세에 대해 보고된 새로운 프라이버시 고려사항은 없습니다.

보안 고려사항

이 명세에 대해 보고된 새로운 보안 고려사항은 없습니다.

참고문헌

규범적 참고문헌


[CSS21]: Bert Bos; 외. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) 명세서. 2011년 6월 7일. W3C 권고안. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

기타 참고문헌


[HTML401]: Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 명세서. 1999년 12월 24일, 2018년 3월 27일에 대체됨. W3C 권고안. URL: https://www.w3.org/TR/2018/SPSD-html401-20180327/
[HTML]: Anne van Kesteren; 외. HTML 표준. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[RFC2531]: G. Klyne; L. McIntyre. 인터넷 팩스용 Content Feature Schema. 1999년 3월. Internet RFC 2531. URL: http://www.ietf.org/rfc/rfc2531.txt
[XMLSTYLE]: James Clark; Simon Pieters; Henry S. Thompson XML 문서와 스타일 시트 연결 1.0 (두 번째 판) 2010년 10월 28일. W3C 권고안. URL: http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/
[CSS-CASCADE-5]: Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2022년 1월 13일. CR. URL: https://www.w3.org/TR/css-cascade-5/