미디어 장치의 다양한 환경에 따라 CSS 코드를 분기할 수 있는 조건식을 작성할 수 있다.
장치의 유형(출력방식 또는 화면)과 장치의 환경(화면 해상도, 뷰포트의 크기 등), 상태(기기의 방향 등)에 따라서 CSS 코드를 분기할 때 사용하는 규칙이다.
@media <media-query-list> { <stylesheet>
}아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
콤마로 구분된 하나 이상의 <media-query> 목록을 나타낸다.
<media-query>#콘텐츠가 사용 중인 장치에 대해 CSS 적용 여부를 판단하기 위한 구문을 나타낸다.
<media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
<media-feature>를 평가하는 <media-or>를 제외한 논리의 조합을 나타낸다.
<media-not> | <media-in-parens> <media-and>*
이전 <media-in-parens>의 평가 결과에 대한 and 논리 조합을 나타낸다. 즉 and 앞과 뒤의 논리 평가가 모두 true이어야 한다.
and <media-in-parens>
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
<any-value>?0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.
식별자로 사용되는 임의의 문자열을 나타낸다.
<media-feature>를 평가하는 논리의 조합을 나타낸다.
<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
이전 <media-in-parens>의 평가 결과에 대한 and 논리 조합을 나타낸다. 즉 and 앞과 뒤의 논리 평가가 모두 true이어야 한다.
and <media-in-parens>
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
평가의 결과를 부정한다. 예를 들어서 true일 경우 최종 평가는 false이다.
not <media-in-parens>
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<media-feature>를 평가하는 논리의 조합을 나타낸다.
<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
콘텐츠가 사용 중인 장치의 특성을 나타낸다.
[ <mf-plain> | <mf-boolean> | <mf-range> ]
미디어 특성 유무를 boolean으로 평가한다.
<mf-name>
미디어 특성의 이름과 값의 매칭을 나타낸다.
<mf-name> : <mf-value>
미디어 특성의 이름을 나타낸다.
<ident>
미디어 특성의 값을 나타낸다.
<number> | <dimension> | <ident> | <ratio>
단위로 연결된 <number> 타입을 나타낸다. <length>, <angle>, <time>, <resolution>를 포함하는 상위 개념이다.
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
뷰포트 높이를 상대적으로 1% 높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
식별자로 사용되는 임의의 문자열을 나타낸다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
뷰포트 높이를 상대적으로 1% 높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
정수 또는 실수를 표현한다.
미디어 쿼리(media query)에서 스크린의 종횡비를 나타낸다.
[<number> / <number>]
슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.
(예) 16/9
범위를 이용한 평가식을 나타낸다.
<mf-name> <mf-comparison> <mf-value> | <mf-value> <mf-comparison> <mf-name> | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value> | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>
<, >, <=, =, >= 연산자를 나타낸다.
<mf-lt> | <mf-gt> | <mf-eq>
>, >=를 나타낸다.
'>' '='?<, <=를 나타낸다.
'<' '='?미디어 특성의 이름을 나타낸다.
<ident>
미디어 특성의 값을 나타낸다.
<number> | <dimension> | <ident> | <ratio>
none | hoverhover 특성과 동일하지만 사용자가 사용할 수 있는 모든 포인팅 장치의 기능 조합을 나타낸다. 포인팅 장치마다 특성이 다른 경우 둘 이상의 값이 일치할 수 있다.
모든 포인팅 장치가 해당 쿼리에 대해 아무것도 일치하지 않거나 포인팅 장치가 전혀 없는 경우에만 any-hover가 일치해야 한다.
none | coarse | fine
pointer 특성과 동일하지만 사용자가 사용할 수 있는 모든 포인팅 장치의 기능 조합을 나타낸다. 포인팅 장치마다 특성이 다른 경우 둘 이상의 값이 일치할 수 있다.
모든 포인팅 장치가 해당 쿼리에 대해 아무것도 일치하지 않거나 포인팅 장치가 전혀 없는 경우에만 any-pointer가 일치해야 한다.
[<number> / <number>]
슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.
(예) 16/9
width 미디어 특성 값과 height 미디어 특성 값의 비율로 정의되는 특성이다. 접두어를 붙여 min-aspect-ratio, max-aspect-ratio 최소값과 최대값을 쿼리할 수도 있다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
출력 장치의 컬러 구성 요소당 비트 수를 나타낸다. 장치가 컬러 장치가 아닌 경우 0으로 평가한다.
srgb | p3 | rec2020
유저 에이전트 및 출력 장치에서 지원하는 대략적인 색상 범위를 설명하는 특성이다. 이를 기반으로 CSS 스타일을 적용할 수 있다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
출력 장치의 색상 조회 테이블에 있는 항목 수를 나타낸다. 장치에서 색상 조회 테이블을 사용하지 않는 경우 0으로 평가한다. 접두사가 붙은 min-color-index, max-color-index 변형을 사용하여 최소값과 최대값을 쿼리할 수도 있다.
0 | 1출력 장치가 그리드인지 비트맵인지를 쿼리하는 데 사용하는 특성이다. 대부분의 최신 컴퓨터와 스마트폰의 디스플레이는 비트맵 기반 장치이다. 그리드 기반 장치의 예로는 텍스트 전용 단말기 및 고정 글꼴이 하나만 있는 모바일 기기의 디스플레이가 있다.
출력 장치가 그리드 기반 장치인 경우에 값은 1이며 그렇지 않은 경우는 0이다.
<length>
출력 장치의 대상 디스플레이 영역의 높이이다. 연속 미디어의 경우 렌더링된 스크롤 막대(존재하는 경우)의 크기를 포함한 뷰포트의 높이이다. 페이징된 미디어의 경우 페이지 컨테이너의 높이이다. 접두어를 붙여 min-height, max-height 변형을 사용하여 최소값과 최대값을 쿼리할 수 있다.
none | hover사용자가 기본 포인팅 장치로 페이지의 요소 위로 마우스를 가져갈 수 있는 특성을 쿼리한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
흑백 프레임 버퍼의 픽셀당 비트 수를 나타낸다. 장치가 흑백 장치가 아닌 경우 출력 장치 값은 0이다. 접두어를 붙여 min-monochrome, max-monochrome 변형을 사용하여 퀴리할 수도 있다.
portrait | landscape두 개의 키워드 중 최종 하나가 일치하는 경우 true이다.
미디어의 방향을 갖는 특성이다.
none | scroll | paged
콘텐츠가 블록 축의 초기 포함 블록을 넘칠 때 장치의 동작의 특성이다.
none | scroll콘텐츠가 인라인 축의 초기 포함 블록을 넘칠 때 장치의 동작의 특성이다.
none | coarse | fine
마우스와 같은 포인팅 장치의 존재 여부와 정확도를 쿼리하는 데 사용되는 특성이다.
<resolution> | infinite페이지 줌을 고려하지만 핀치 줌을 1.0으로 가정하여 출력 장치의 해상도, 즉 픽셀의 밀도를 나타낸다. 음수 범위는 false이다.
정사각형이 아닌 픽셀이 있는 미디어를 쿼리할 때 해상도는 수직 차원의 밀도를 쿼리한다.
프린트터의 경우 스크리닝(screening) 해상도(임의 색상의 점을 인쇄하기 위한 해상도)에 해당한다. 그레이스케일 인쇄에 대해 프린터의 해상도가 다를 수 있다.
해상도에 물리적인 제약이 없는 출력 매체(예: 벡터 그래픽으로 출력)의 경우 resolution 특성은 infinite 값과 일치한다.
접두어를 사용하여 min-resolution, max-resolution 변형을 사용하여 최소값과 최대값을 쿼리할 수도 있다.
none | slow | fast
렌더링된 콘텐츠의 모양을 수정하는 출력 장치의 기능을 쿼리하는 데 사용한다.
<length>
스크롤바를 포함한 뷰포트의 너비를 쿼리한다. 접두어를 붙여 min-width, max-width 변형을 사용하여 최소값과 최대값을 쿼리할 수 있다.
미디어 쿼리(media query)의 결과를 부정한다. 즉 true로 평가되는 경우에 false로 다시 평가한다. 그 반대의 경우도 마찬가지이다.
이전 <media-in-parens>의 평가 결과에 대한 or 논리 조합을 나타낸다. 즉 or 앞과 뒤의 논리 평가가 하나 이상 true이어야 한다.
or <media-in-parens>
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
or 앞의 조건과 뒤의 조건의 평가 결과가 하나 이상 true이어야 한다.
콘텐츠가 사용 중인 장치의 특성을 나타낸다.
[ <mf-plain> | <mf-boolean> | <mf-range> ]
and 앞의 조건과 뒤의 조건의 평가가 모두 true이어야 한다.
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
<any-value>?0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.
식별자로 사용되는 임의의 문자열을 나타낸다.
<media-feature>를 평가하는 논리의 조합을 나타낸다.
<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
이전 <media-in-parens>의 평가 결과에 대한 and 논리 조합을 나타낸다. 즉 and 앞과 뒤의 논리 평가가 모두 true이어야 한다.
and <media-in-parens>
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
and 앞의 조건과 뒤의 조건의 평가가 모두 true이어야 한다.
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<media-feature>를 평가하는 논리의 조합을 나타낸다.
<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
콘텐츠가 사용 중인 장치의 특성을 나타낸다.
[ <mf-plain> | <mf-boolean> | <mf-range> ]
미디어 특성 유무를 boolean으로 평가한다.
<mf-name>
미디어 특성의 이름과 값의 매칭을 나타낸다.
<mf-name> : <mf-value>
범위를 이용한 평가식을 나타낸다.
<mf-name> <mf-comparison> <mf-value> | <mf-value> <mf-comparison> <mf-name> | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value> | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>
none | hoverhover 특성과 동일하지만 사용자가 사용할 수 있는 모든 포인팅 장치의 기능 조합을 나타낸다. 포인팅 장치마다 특성이 다른 경우 둘 이상의 값이 일치할 수 있다.
모든 포인팅 장치가 해당 쿼리에 대해 아무것도 일치하지 않거나 포인팅 장치가 전혀 없는 경우에만 any-hover가 일치해야 한다.
none | coarse | fine
pointer 특성과 동일하지만 사용자가 사용할 수 있는 모든 포인팅 장치의 기능 조합을 나타낸다. 포인팅 장치마다 특성이 다른 경우 둘 이상의 값이 일치할 수 있다.
모든 포인팅 장치가 해당 쿼리에 대해 아무것도 일치하지 않거나 포인팅 장치가 전혀 없는 경우에만 any-pointer가 일치해야 한다.
[<number> / <number>]
슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.
(예) 16/9
width 미디어 특성 값과 height 미디어 특성 값의 비율로 정의되는 특성이다. 접두어를 붙여 min-aspect-ratio, max-aspect-ratio 최소값과 최대값을 쿼리할 수도 있다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
출력 장치의 컬러 구성 요소당 비트 수를 나타낸다. 장치가 컬러 장치가 아닌 경우 0으로 평가한다.
srgb | p3 | rec2020
유저 에이전트 및 출력 장치에서 지원하는 대략적인 색상 범위를 설명하는 특성이다. 이를 기반으로 CSS 스타일을 적용할 수 있다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
출력 장치의 색상 조회 테이블에 있는 항목 수를 나타낸다. 장치에서 색상 조회 테이블을 사용하지 않는 경우 0으로 평가한다. 접두사가 붙은 min-color-index, max-color-index 변형을 사용하여 최소값과 최대값을 쿼리할 수도 있다.
0 | 1출력 장치가 그리드인지 비트맵인지를 쿼리하는 데 사용하는 특성이다. 대부분의 최신 컴퓨터와 스마트폰의 디스플레이는 비트맵 기반 장치이다. 그리드 기반 장치의 예로는 텍스트 전용 단말기 및 고정 글꼴이 하나만 있는 모바일 기기의 디스플레이가 있다.
출력 장치가 그리드 기반 장치인 경우에 값은 1이며 그렇지 않은 경우는 0이다.
<length>
출력 장치의 대상 디스플레이 영역의 높이이다. 연속 미디어의 경우 렌더링된 스크롤 막대(존재하는 경우)의 크기를 포함한 뷰포트의 높이이다. 페이징된 미디어의 경우 페이지 컨테이너의 높이이다. 접두어를 붙여 min-height, max-height 변형을 사용하여 최소값과 최대값을 쿼리할 수 있다.
none | hover사용자가 기본 포인팅 장치로 페이지의 요소 위로 마우스를 가져갈 수 있는 특성을 쿼리한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
흑백 프레임 버퍼의 픽셀당 비트 수를 나타낸다. 장치가 흑백 장치가 아닌 경우 출력 장치 값은 0이다. 접두어를 붙여 min-monochrome, max-monochrome 변형을 사용하여 퀴리할 수도 있다.
portrait | landscape두 개의 키워드 중 최종 하나가 일치하는 경우 true이다.
미디어의 방향을 갖는 특성이다.
none | scroll | paged
콘텐츠가 블록 축의 초기 포함 블록을 넘칠 때 장치의 동작의 특성이다.
none | scroll콘텐츠가 인라인 축의 초기 포함 블록을 넘칠 때 장치의 동작의 특성이다.
none | coarse | fine
마우스와 같은 포인팅 장치의 존재 여부와 정확도를 쿼리하는 데 사용되는 특성이다.
<resolution> | infinite페이지 줌을 고려하지만 핀치 줌을 1.0으로 가정하여 출력 장치의 해상도, 즉 픽셀의 밀도를 나타낸다. 음수 범위는 false이다.
정사각형이 아닌 픽셀이 있는 미디어를 쿼리할 때 해상도는 수직 차원의 밀도를 쿼리한다.
프린트터의 경우 스크리닝(screening) 해상도(임의 색상의 점을 인쇄하기 위한 해상도)에 해당한다. 그레이스케일 인쇄에 대해 프린터의 해상도가 다를 수 있다.
해상도에 물리적인 제약이 없는 출력 매체(예: 벡터 그래픽으로 출력)의 경우 resolution 특성은 infinite 값과 일치한다.
접두어를 사용하여 min-resolution, max-resolution 변형을 사용하여 최소값과 최대값을 쿼리할 수도 있다.
none | slow | fast
렌더링된 콘텐츠의 모양을 수정하는 출력 장치의 기능을 쿼리하는 데 사용한다.
<length>
스크롤바를 포함한 뷰포트의 너비를 쿼리한다. 접두어를 붙여 min-width, max-width 변형을 사용하여 최소값과 최대값을 쿼리할 수 있다.
평가의 결과를 부정한다. 예를 들어서 true일 경우 최종 평가는 false이다.
not <media-in-parens>
이전 <media-in-parens>의 평가 결과에 대한 or 논리 조합을 나타낸다. 즉 or 앞과 뒤의 논리 평가가 하나 이상 true이어야 한다.
or <media-in-parens>
콘텐츠가 사용 중인 장치의 특성을 나타낸다.
[ <mf-plain> | <mf-boolean> | <mf-range> ]
평가의 결과를 부정한다. 예를 들어서 true일 경우 최종 평가는 false이다.
not <media-in-parens>
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
미디어 쿼리(media query)의 결과를 부정한다. 즉 true로 평가되는 경우에 false로 다시 평가한다. 그 반대의 경우도 마찬가지이다.
<media-feature>를 평가하는 논리의 조합을 나타낸다.
<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
이전 <media-in-parens>의 평가 결과에 대한 and 논리 조합을 나타낸다. 즉 and 앞과 뒤의 논리 평가가 모두 true이어야 한다.
and <media-in-parens>
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
<any-value>?0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.
식별자로 사용되는 임의의 문자열을 나타낸다.
<media-feature>를 평가하는 논리의 조합을 나타낸다.
<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
콘텐츠가 사용 중인 장치의 특성을 나타낸다.
[ <mf-plain> | <mf-boolean> | <mf-range> ]
미디어 특성 유무를 boolean으로 평가한다.
<mf-name>
미디어 특성의 이름과 값의 매칭을 나타낸다.
<mf-name> : <mf-value>
미디어 특성의 이름을 나타낸다.
<ident>
미디어 특성의 값을 나타낸다.
<number> | <dimension> | <ident> | <ratio>
단위로 연결된 <number> 타입을 나타낸다. <length>, <angle>, <time>, <resolution>를 포함하는 상위 개념이다.
식별자로 사용되는 임의의 문자열을 나타낸다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
정수 또는 실수를 표현한다.
미디어 쿼리(media query)에서 스크린의 종횡비를 나타낸다.
[<number> / <number>]
슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.
(예) 16/9
범위를 이용한 평가식을 나타낸다.
<mf-name> <mf-comparison> <mf-value> | <mf-value> <mf-comparison> <mf-name> | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value> | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>
<, >, <=, =, >= 연산자를 나타낸다.
<mf-lt> | <mf-gt> | <mf-eq>
>, >=를 나타낸다.
'>' '='?<, <=를 나타낸다.
'<' '='?미디어 특성의 이름을 나타낸다.
<ident>
미디어 특성의 값을 나타낸다.
<number> | <dimension> | <ident> | <ratio>
none | hoverhover 특성과 동일하지만 사용자가 사용할 수 있는 모든 포인팅 장치의 기능 조합을 나타낸다. 포인팅 장치마다 특성이 다른 경우 둘 이상의 값이 일치할 수 있다.
모든 포인팅 장치가 해당 쿼리에 대해 아무것도 일치하지 않거나 포인팅 장치가 전혀 없는 경우에만 any-hover가 일치해야 한다.
none | coarse | fine
pointer 특성과 동일하지만 사용자가 사용할 수 있는 모든 포인팅 장치의 기능 조합을 나타낸다. 포인팅 장치마다 특성이 다른 경우 둘 이상의 값이 일치할 수 있다.
모든 포인팅 장치가 해당 쿼리에 대해 아무것도 일치하지 않거나 포인팅 장치가 전혀 없는 경우에만 any-pointer가 일치해야 한다.
[<number> / <number>]
슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.
(예) 16/9
width 미디어 특성 값과 height 미디어 특성 값의 비율로 정의되는 특성이다. 접두어를 붙여 min-aspect-ratio, max-aspect-ratio 최소값과 최대값을 쿼리할 수도 있다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
출력 장치의 컬러 구성 요소당 비트 수를 나타낸다. 장치가 컬러 장치가 아닌 경우 0으로 평가한다.
srgb | p3 | rec2020
유저 에이전트 및 출력 장치에서 지원하는 대략적인 색상 범위를 설명하는 특성이다. 이를 기반으로 CSS 스타일을 적용할 수 있다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
출력 장치의 색상 조회 테이블에 있는 항목 수를 나타낸다. 장치에서 색상 조회 테이블을 사용하지 않는 경우 0으로 평가한다. 접두사가 붙은 min-color-index, max-color-index 변형을 사용하여 최소값과 최대값을 쿼리할 수도 있다.
0 | 1출력 장치가 그리드인지 비트맵인지를 쿼리하는 데 사용하는 특성이다. 대부분의 최신 컴퓨터와 스마트폰의 디스플레이는 비트맵 기반 장치이다. 그리드 기반 장치의 예로는 텍스트 전용 단말기 및 고정 글꼴이 하나만 있는 모바일 기기의 디스플레이가 있다.
출력 장치가 그리드 기반 장치인 경우에 값은 1이며 그렇지 않은 경우는 0이다.
<length>
출력 장치의 대상 디스플레이 영역의 높이이다. 연속 미디어의 경우 렌더링된 스크롤 막대(존재하는 경우)의 크기를 포함한 뷰포트의 높이이다. 페이징된 미디어의 경우 페이지 컨테이너의 높이이다. 접두어를 붙여 min-height, max-height 변형을 사용하여 최소값과 최대값을 쿼리할 수 있다.
none | hover사용자가 기본 포인팅 장치로 페이지의 요소 위로 마우스를 가져갈 수 있는 특성을 쿼리한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
흑백 프레임 버퍼의 픽셀당 비트 수를 나타낸다. 장치가 흑백 장치가 아닌 경우 출력 장치 값은 0이다. 접두어를 붙여 min-monochrome, max-monochrome 변형을 사용하여 퀴리할 수도 있다.
portrait | landscape두 개의 키워드 중 최종 하나가 일치하는 경우 true이다.
미디어의 방향을 갖는 특성이다.
none | scroll | paged
콘텐츠가 블록 축의 초기 포함 블록을 넘칠 때 장치의 동작의 특성이다.
none | scroll콘텐츠가 인라인 축의 초기 포함 블록을 넘칠 때 장치의 동작의 특성이다.
none | coarse | fine
마우스와 같은 포인팅 장치의 존재 여부와 정확도를 쿼리하는 데 사용되는 특성이다.
<resolution> | infinite페이지 줌을 고려하지만 핀치 줌을 1.0으로 가정하여 출력 장치의 해상도, 즉 픽셀의 밀도를 나타낸다. 음수 범위는 false이다.
정사각형이 아닌 픽셀이 있는 미디어를 쿼리할 때 해상도는 수직 차원의 밀도를 쿼리한다.
프린트터의 경우 스크리닝(screening) 해상도(임의 색상의 점을 인쇄하기 위한 해상도)에 해당한다. 그레이스케일 인쇄에 대해 프린터의 해상도가 다를 수 있다.
해상도에 물리적인 제약이 없는 출력 매체(예: 벡터 그래픽으로 출력)의 경우 resolution 특성은 infinite 값과 일치한다.
접두어를 사용하여 min-resolution, max-resolution 변형을 사용하여 최소값과 최대값을 쿼리할 수도 있다.
none | slow | fast
렌더링된 콘텐츠의 모양을 수정하는 출력 장치의 기능을 쿼리하는 데 사용한다.
<length>
스크롤바를 포함한 뷰포트의 너비를 쿼리한다. 접두어를 붙여 min-width, max-width 변형을 사용하여 최소값과 최대값을 쿼리할 수 있다.
평가의 결과를 부정한다. 예를 들어서 true일 경우 최종 평가는 false이다.
not <media-in-parens>
이전 <media-in-parens>의 평가 결과에 대한 or 논리 조합을 나타낸다. 즉 or 앞과 뒤의 논리 평가가 하나 이상 true이어야 한다.
or <media-in-parens>
괄호 안의 평가식을 나타낸다.
( <media-condition> ) | ( <media-feature> ) | <general-enclosed>
or 앞의 조건과 뒤의 조건의 평가 결과가 하나 이상 true이어야 한다.
미디어의 유형을 나타낸다. all, print, screen을 제외한 Media Queries Level 3에서 정의한 모든 미디어 유형은 Media Queries Level 4에서 모두 제거되었으므로 사용하지 않아야 한다.
<ident>
식별자로 사용되는 임의의 문자열을 나타낸다.
모든 장치와 일치한다.
프린터 및 '인쇄 미리 보기' 기능에서 인쇄될 문서를 미리 표시하는 웹브라우저와 같이 출력을 재현하기 위한 장치와 일치한다.
print로 일치하지 않는 모든 장치와 일치한다.
and 앞의 조건과 뒤의 조건의 평가가 모두 true이어야 한다.
or 앞의 조건과 뒤의 조건의 평가 결과가 하나 이상 true이어야 한다.
미디어 쿼리(media query)의 결과를 부정한다. 즉 true로 평가되는 경우에 false로 다시 평가한다. 그 반대의 경우도 마찬가지이다.
초기의 미디어 쿼리는 미디어의 유형만 정의했기에 현재의 호환성을 위해서 존재한다. 미디어 유형에서만 접두어로 사용이 가능한다.
규칙 목록을 나타낸다. <rule-list>와 동일해 보이는데 이를 사용하는 블록은 특정 컨텍스트로 제한되지 않는 모든 규칙을 기본적으로 허용한다는 점을 제외하면 실제로 동일하다.
정규화된 규칙으로서 구성 요소 값의 목록으로 구성되며 서두와 단순한 { }으로 구성된 블록 형식을 갖는다. CSS에서 대부분의 정규화된 규칙은 스타일 규칙이며 서두는 선택자(selector)이고 { } 블록은 속성의 선언 목록을 갖는다.
[사용 가능한 값]은 설정 가능한 모든 값을 나열하지 않을 수도 있다. 자세한 사항은 각 항목의 추가 정보를 확인하라.
hover 특성과 동일하지만 사용자가 사용할 수 있는 모든 포인팅 장치의 기능 조합을 나타낸다. 포인팅 장치마다 특성이 다른 경우 둘 이상의 값이 일치할 수 있다.
모든 포인팅 장치가 해당 쿼리에 대해 아무것도 일치하지 않거나 포인팅 장치가 전혀 없는 경우에만 any-hover가 일치해야 한다.
@media (any-hover: hover) { <stylesheet>
}none | hover기본 포인팅 장치로 마우스를 가져갈 수 있음을 나타낸다. 호버링(hovering)이 완벽하게 가능한 포인팅 장치를 의미한다.
기본 포인팅 장치로 마우스를 가져갈 수 없거나 포인팅 장치가 없음을 나타낸다. 호버링(hovering)은 가능하지만 호버링이 불편하고 일반적인 사용 방식이 아닌 포인팅 장치도 동일하게 평가한다. 예를 들어서 길게 누르면 호버링으로 처리되는 터치 스크린은 none 값과 일치한다.
pointer 특성과 동일하지만 사용자가 사용할 수 있는 모든 포인팅 장치의 기능 조합을 나타낸다. 포인팅 장치마다 특성이 다른 경우 둘 이상의 값이 일치할 수 있다.
모든 포인팅 장치가 해당 쿼리에 대해 아무것도 일치하지 않거나 포인팅 장치가 전혀 없는 경우에만 any-pointer가 일치해야 한다.
@media (any-pointer: fine) { <stylesheet>
}none | coarse | fine
장치의 기본 입력 메커니즘에 정확도가 제한된 포인팅 장치가 포함되어 있음을 나타낸다.(예: 터치 스크린 및 동작 감지 센서)
장치의 기본 입력 메커니즘에 정확한 포인팅 장치가 포함되어 있음을 나타낸다.(예: 마우스, 터치패드, 드로잉 스타일러스 등)
장치의 기본 입력 메커니즘에 포인팅 장치가 포함되어 있지 않음을 나타낸다.
width 미디어 특성 값과 height 미디어 특성 값의 비율로 정의되는 특성이다. 접두어를 붙여 min-aspect-ratio, max-aspect-ratio 최소값과 최대값을 쿼리할 수도 있다.
@media (min-aspect-ratio: 8/5) { <stylesheet>
}미디어 쿼리(media query)에서 스크린의 종횡비를 나타낸다.
[<number> / <number>]
슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.
(예) 16/9
출력 장치의 컬러 구성 요소당 비트 수를 나타낸다. 장치가 컬러 장치가 아닌 경우 0으로 평가한다.
@media (color) { <stylesheet>
}
@media (min-color: 1) { <stylesheet>
}모든 색상 장치에 적용된다.
@media (color >= 8) { <stylesheet>
}스타일 시트가 색상 구성 요소당 최소 8비트가 있는 색상 장치에 적용됨을 나타낸다.
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
유저 에이전트 및 출력 장치에서 지원하는 대략적인 색상 범위를 설명하는 특성이다. 이를 기반으로 CSS 스타일을 적용할 수 있다.
@media (color-gamut: srgb) { <stylesheet>
}색상이 sRGB 영역 이상을 지원해야 적용될 수 있다.
srgb | p3 | rec2020
DCI P3 색 공간에서 지정한 대략적인 색 영역 이상을 지원함을 나타낸다.
ITU-R 권장 사항 BT.2020 색 공간에서 지정한 대략적인 색 영역 이상을 지원함을 나타낸다.
sRGB 색 영역 이상을 나타낸다.
출력 장치의 색상 조회 테이블에 있는 항목 수를 나타낸다. 장치에서 색상 조회 테이블을 사용하지 않는 경우 0으로 평가한다. 접두사가 붙은 min-color-index, max-color-index 변형을 사용하여 최소값과 최대값을 쿼리할 수도 있다.
@media (color-index) { <stylesheet>
}
@media (color-index >= 1) { <stylesheet>
}스타일 시트가 모든 색상 인덱스 장치에 적용된다.
@media (min-color-index: 256) { <stylesheet>
}스타일 시트가 256개 이상의 항목이 있는 색상 인덱스 장치에 적용된다.
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
웹 애플리케이션의 디스플레이 모드를 나타내는 특성이다. 하위 브라우징 컨텍스트는 최상위 브라우징 컨텍스트의 디스플레이 모드를 반영한다.
@media (display-mode: fullscreen) { <stylesheet>
}fullscreen | standalone | minimal-ui | browser
웹 애플리케이션은 유저 에이전트에서 하이퍼링크를 열기 위한 플랫폼별 규칙(예: 탭 또는 새 창)을 사용하여 표시되는 모드이다.
웹 애플리케이션은 웹브라우저의 UI 요소가 숨겨진 상태로 표시되며 사용 가능한 디스플레이 영역을 차지함을 나타낸다.
standalone과 유사하지만 최종 사용자에게 탐색 제어를 위한 최소한 UI 요소(예: 뒤로, 앞으로, 다시 로드, 문서 주소 보기 등)에 액세스 할 수 있는 몇 가지 수단을 제공하는 모드이다.
웹 애플리케이션은 독립형 네이티브 애플리케이션과 같은 모양과 느낌으로 표시됨을 나타낸다. 이 상태는 웹브라우저의 URL 표시줄과 같은 표준 웹브라우저의 UI 요소를 제외하지만 창 장식, 시스템 상태 표시줄 및 시스템 뒤로 가기 버튼과 같은 표준 시스템 UI 요소는 계속 사용할 수 있는 상태이다.
유저 에이전트와 출력 장치에서 지원하는 최대 밝기, 색 심도, 명암비의 조합을 나타내는 특성이다.
@media (dynamic-range: high) { <stylesheet>
}standard | high유저 에이전트와 출력 장치가 다음 모든 기준을 모두 충족해야 한다.
모든 시각적 장치에서 일치하며 시각적 기능이 없는 장치에서는 일치하지 않는다.
강제 색상 모드의 활성 또는 비활성 여부를 파악하는 데 사용되는 특성이다.
@media (forced-color: active) { <stylesheet>
}none | active강제 색상 모드가 활성화되어 있음을 나타낸다.
강제 색상 모드가 활성화되어 있지 않음을 나타낸다.
출력 장치가 그리드인지 비트맵인지를 쿼리하는 데 사용하는 특성이다. 대부분의 최신 컴퓨터와 스마트폰의 디스플레이는 비트맵 기반 장치이다. 그리드 기반 장치의 예로는 텍스트 전용 단말기 및 고정 글꼴이 하나만 있는 모바일 기기의 디스플레이가 있다.
출력 장치가 그리드 기반 장치인 경우에 값은 1이며 그렇지 않은 경우는 0이다.
@media (grid: 1) { <stylesheet>
}값이 0 또는 1인 <interger>이다. 다른 정수 값은 유효하지 않다. -0은 CSS에서 항상 0과 동일하므로 유효한 값으로 허용된다.
0 | 1아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
출력 장치의 대상 디스플레이 영역의 높이이다. 연속 미디어의 경우 렌더링된 스크롤 막대(존재하는 경우)의 크기를 포함한 뷰포트의 높이이다. 페이징된 미디어의 경우 페이지 컨테이너의 높이이다. 접두어를 붙여 min-height, max-height 변형을 사용하여 최소값과 최대값을 쿼리할 수 있다.
@media (min-height: 100px) { <stylesheet>
}숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는 것이 아닐 수 있으므로 주의한다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
뷰포트 높이를 상대적으로 1% 높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
사용자가 기본 포인팅 장치로 페이지의 요소 위로 마우스를 가져갈 수 있는 특성을 쿼리한다.
@media (hover: hover) { <stylesheet>
}none | hover기본 포인팅 장치로 마우스를 가져갈 수 있음을 나타낸다. 호버링(hovering)이 완벽하게 가능한 포인팅 장치를 의미한다.
기본 포인팅 장치로 마우스를 가져갈 수 없거나 포인팅 장치가 없음을 나타낸다. 호버링(hovering)은 가능하지만 호버링이 불편하고 일반적인 사용 방식이 아닌 포인팅 장치도 동일하게 평가한다. 예를 들어서 길게 누르면 호버링으로 처리되는 터치 스크린은 none 값과 일치한다.
콘텐츠가 정상적으로 표시되는지 또는 색상이 반전되었는지 여부를 나타낸다.
@media (inverted-colors: inverted) { <stylesheet>
}none | inverted표시된 영역 내의 모든 픽셀이 반전되었음을 나타낸다.
색상이 정상적으로 표시된다.
흑백 프레임 버퍼의 픽셀당 비트 수를 나타낸다. 장치가 흑백 장치가 아닌 경우 출력 장치 값은 0이다. 접두어를 붙여 min-monochrome, max-monochrome 변형을 사용하여 퀴리할 수도 있다.
@media (monochrome: 0) { <stylesheet>
}<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
미디어의 방향을 갖는 특성이다.
@media (orientation: landscape) { <stylesheet>
}디바이스(device)의 스크린 방향을 나타낸다.
portrait | landscape두 개의 키워드 중 최종 하나가 일치하는 경우 true이다.
portrait가 아닌 반대 방향을 나타낸다.
height 미디어 특성의 값이 width 미디어 특성의 값보다 크거나 같으면 orientation 미디어 특성이 세로임을 나타낸다.
콘텐츠가 블록 축의 초기 포함 블록을 넘칠 때 장치의 동작의 특성이다.
@media (overflow-block: scroll) { <stylesheet>
}none | scroll | paged
블록 축에는 오버플로우에 대한 어포던스(affordance)가 없다. 오버플로우 콘텐츠는 단순히 표시되지 않는다.(예: 광고판)
콘텐츠는 개별 페이지로 분할되며 블록 축에서 한 페이지를 초과하는 콘텐츠는 다음 페이지에 표시된다.(예: 프린터, 전자책 리더기)
블록 축에서 넘쳐나는 콘텐츠는 사용자가 스크롤할 수 있도록 하여 노출된다.(예: 컴퓨터, 스마트 기기 화면)
콘텐츠가 인라인 축의 초기 포함 블록을 넘칠 때 장치의 동작의 특성이다.
@media (overflow-inline: scroll) { <stylesheet>
}none | scroll인라인 축에는 오버플로우에 대한 어포던스(affordance)가 없다. 오버플로우 콘텐츠는 단순히 표시되지 않는다.(예: 광고판)
인라인 축에서 넘쳐나는 콘텐츠는 사용자가 스크롤할 수 있도록 하여 노출된다.
마우스와 같은 포인팅 장치의 존재 여부와 정확도를 쿼리하는 데 사용되는 특성이다.
@media (pointer: fine) { <stylesheet>
}none | coarse | fine
장치의 기본 입력 메커니즘에 정확도가 제한된 포인팅 장치가 포함되어 있음을 나타낸다.(예: 터치 스크린 및 동작 감지 센서)
장치의 기본 입력 메커니즘에 정확한 포인팅 장치가 포함되어 있음을 나타낸다.(예: 마우스, 터치패드, 드로잉 스타일러스 등)
장치의 기본 입력 메커니즘에 포인팅 장치가 포함되어 있지 않음을 나타낸다.
페이지에 밝은 색상 또는 어두운 색상 테마를 사용하려는 사용자의 요구를 확인하는 특성이다.
@media (prefers: dark) { <stylesheet>
}light | dark사용자가 어두운 테마(어두운 배경에 밝은 텍스트)의 페이지를 선호한다는 것을 나타낸다.
사용자가 밝은 테마(밝은 배경에 어두운 텍스트)의 페이지에 대한 선호도를 표시했거나 적극적인 선호도를 표시하지 않았으므로 밝은 테마의 'web default' 값을 받아야 함을 나타낸다.
사용자가 시스템에게 고대비 또는 저대비를 요청했는지 감지하는 특성이다.
@media (prefers-contrast: less) { <stylesheet>
}no-preference | less | more | custom
사용자가 시스템에 기본 설정을 알리지 않았음을 나타낸다. 이 키워드 값은 false로 평가된다.
사용자가 특정 색상 세트를 사용하도록 지정했지만 이러한 특정 색상이 암시하는 대비가 더 많거나 덜 일치하지 않음을 나타낸다.
사용자가 대비 수준이 낮은 인터페이스를 선호한다고 시스템에 알렸음을 나타낸다.
사용자가 더 높은 수준의 대비를 가진 인터페이스를 선호한다고 시스템에 알렸음을 나타낸다.
사용자가 페이지 렌더링에 더 적은 데이터를 사용하는 대체 콘텐츠를 제공받기를 원하는지 감지하는 데 사용되는 특성이다.
@media (prefers-reduced-data: reduce) { <stylesheet>
}no-preference | reduce사용자가 시스템에 기본 설정을 알리지 않았음을 나타낸다. 이 키워드 값은 false로 평가된다.
사용자가 가벼운 대체 콘텐츠에 대한 선호도를 표시했음을 확인하는 특성이다.
사용자가 시스템에서 사용하는 애니메이션 또는 모션의 양을 최소화하도록 요청했는지 감지하는 데 사용되는 특성이다.
@media (prefers-reduced-motion: reduce) { <stylesheet>
}no-preference | reduce사용자가 시스템에 기본 설정을 알리지 않았음을 나타낸다. 이 키워드 값은 false로 평가된다.
사용자가 움직임이나 애니메이션의 양을 최소화하는 인터페이스, 가급적이면 불필요한 움직임이 모두 제거된 인터페이스를 선호한다고 시스템에게 알렸음을 나타낸다.
페이지 줌을 고려하지만 핀치 줌을 1.0으로 가정하여 출력 장치의 해상도, 즉 픽셀의 밀도를 나타낸다. 음수 범위는 false이다.
정사각형이 아닌 픽셀이 있는 미디어를 쿼리할 때 해상도는 수직 차원의 밀도를 쿼리한다.
프린트터의 경우 스크리닝(screening) 해상도(임의 색상의 점을 인쇄하기 위한 해상도)에 해당한다. 그레이스케일 인쇄에 대해 프린터의 해상도가 다를 수 있다.
해상도에 물리적인 제약이 없는 출력 매체(예: 벡터 그래픽으로 출력)의 경우 resolution 특성은 infinite 값과 일치한다.
접두어를 사용하여 min-resolution, max-resolution 변형을 사용하여 최소값과 최대값을 쿼리할 수도 있다.
@media (min-resolution: 72dpi) { <stylesheet>
}<resolution> | infinite무한대 값을 나타낸다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
출력 장치의 해상도를 나타낸다.
@media print and (min-resolution: 500dpi) { }이 구문은 미디어 쿼리에(media query)에서 값을 사용하는 예를 나타낸다. 500dpi 값을 <resolution>으로 지정 했다. 그 밖에 <resolution> 값이 필요한 경우에는 아래 형식처럼 작성할 수 있다.
72dpi
40.45dpcm
10dppx
현재 문서에서 자바스크립트와 같은 스크립팅 언어가 지원되지는 여부를 쿼리하는 데 사용하는 특성이다.
@media (scripting: enabled) { <stylesheet>
}none | initial-only | enabled
유저 에이전트가 페이지의 스크립팅을 지원하며 현재 문서의 스크립팅이 문서가 유지되는 동안 활성화되어 있음을 나타낸다.
유저 에이전트가 페이지의 스크립팅을 지원하며 현재 문서의 스크립팅이 초기 페이지 로드 중에 활성화되지만 이후에는 지원되지 않음을 나타낸다.(예: 서버에서 페이지를 렌더링하고 거의 정적인 페이지를 사용자에게 보내는 사전 렌더링 네트워크 프록시의 경우)
유저 에이전트가 이 문서에 대한 스크립트를 실행하지 않음을 나타낸다. 스크립팅 언어를 지원하지 않거나 현재 문서에 대한 지원이 활성화되어 있지 않음을 의미한다.
렌더링된 콘텐츠의 모양을 수정하는 출력 장치의 기능을 쿼리하는 데 사용한다.
@media (update: fast) { <stylesheet>
}none | slow | fast
레이아웃은 일반적인 CSS 규칙에 따라 동적으로 변경될 수 있으며 출력 장치는 속도에 특별히 제한을 받지 않으므로 CSS 애니메이션과 같이 주기적으로 업데이트되는 것을 사용할 수 있다.(예: 컴퓨터, 스마트 기기 화면)
일단 렌더링되면 레이아웃을 더 이상 업데이트할 수 없다.(예: 종이에 인쇄된 문서)
레이아웃은 일반적인 CSS 규칙에 따라 동적으로 변경될 수 있지만 출력 장치는 부드러운 애니메이션으로 인식될 만큼 빠르게 변경 사항을 렌더링하거나 표시할 수 없다.(예: E-ink 스크린 또는 심각하게 전력이 부족한 장치)
유저 에이전트와 출력 장치의 비디오 플레인에서 지원하는 최대 밝기, 색 심도 및 명암비의 조합을 나타낸다.
dynamic-range 특성에서 사용하는 값과 동일하다.
@media (video-dynamic-range: high) { <stylesheet>
}standard | high유저 에이전트와 출력 장치가 다음 모든 기준을 모두 충족해야 한다.
모든 시각적 장치에서 일치하며 시각적 기능이 없는 장치에서는 일치하지 않는다.
스크롤바를 포함한 뷰포트의 너비를 쿼리한다. 접두어를 붙여 min-width, max-width 변형을 사용하여 최소값과 최대값을 쿼리할 수 있다.
@media (<mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value>) { <stylesheet>
}@media (400px <= width <= 700px) { <stylesheet>
}@media (max-width: 1200px) { <stylesheet>
}숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는 것이 아닐 수 있으므로 주의한다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
뷰포트 높이를 상대적으로 1% 높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
@media screen and (min-width: 800px) { }미디어 장치는 스크린이고 최소 가로 해상도가 800픽셀을 유지할 경우에 CSS 코드가 사용된다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| Media Queries Level 4 | 편집자 초안 | 미디어 쿼리, 미디어 유형, 미디어 기능의 메커니즘과 구문을 설명한다. Last review date: 2022-6-6 |
| CSS Conditional Rules Module Level 3 | Last review date: 2023-3-24 | |