다른 스타일시트에서 스타일 규칙을 가져올 수 있다.
모든 @import 규칙은 스타일 시트의 다른 모든 유효한 앳-룰(at-rules) 및 스타일 규칙보다 선행되어야 하며 이전 @import 규칙과 사이에 다른 유효한 앳-룰(at-rules) 또는 스타일 규칙이 없어야 한다.
@import [ <url> | <string> ] [ layer | layer(<layer-name>) ]? [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>? ;
<url> 또는 <string>은 가져올 스타일 시트의 URL을 나타낸다.
선택적인 layer 키워드 또는 layer() 함수는 스타일 시트의 내용을 고유한 익명 캐스케이드 레이어 또는 명명된 캐스케이드 레이어에 할당한다.
선택적인 [ <supports-condition> | <declaration> ] 및 <media-query-list> 가져오는 조건을 나타낸다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
구문상에서 선언을 나타낸다.
구문상 명시적 레이어 이름으로 @layer 및 @import 규칙에서 표시되며 마침표로 구분된 <ident> 토큰의 목록으로 공백이 없다.
<ident> [ '.' <ident> ]*
콤마로 구분된 하나 이상의 <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로 다시 평가한다. 그 반대의 경우도 마찬가지이다.
초기의 미디어 쿼리는 미디어의 유형만 정의했기에 현재의 호환성을 위해서 존재한다. 미디어 유형에서만 접두어로 사용이 가능한다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
하위 표현식의 불리언(boolean) 결과의 조합을 나타낸다.
not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*
하위 표현식의 불리언(boolean)으로 평가되는 쿼리 결과를 나타낸다.
( <supports-condition> ) | <supports-feature> | <general-enclosed>
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
하위 표현식의 불리언(boolean) 결과의 조합을 나타낸다.
not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*
하나의 논리 결과를 갖는 <supports-decl>를 나타낸다.
<supports-decl>
<supports-selector-fn> | <supports-decl>유저 에이전트(user agent)가 괄호 안의 선언을 지원하는 여부에 따라 불리언(boolean)으로 나타낸다.
( <declaration> )
유저 에이전트가 selector() 함수의 인수로 제공된 선택자(selector)의 지원 여부에 따라 불리언(boolean)으로 평가한 결과를 나타낸다.
selector( <complex-selector> )
모든 함수를 표시하지 않을 수도 있다.
and 앞의 조건과 뒤의 조건의 평가가 모두 true이어야 한다.
not 다음에 나오는 조건에 대한 평가를 부정한다.
or 앞의 조건과 뒤의 조건의 평가 결과가 하나 이상 true이어야 한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>src() 함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
고유한 익명 캐스케이드 레이어를 나타낸다.
모든 함수를 표시하지 않을 수도 있다.
@import [ 〈url〉 | 〈string〉]
@import "./style.css";
@import [ 〈url〉 | 〈string〉 ] 〈media-query-list〉?;
외부 CSS를 미디어쿼리를 적용해서 가져오기 할 수 있다.
@import "./style.css" screen and (max-width: 800px);
@import [ 〈url〉 | 〈string〉 ] [ layer | layer(〈layer-name〉) ]?;
캐스케이드 레이어로 가져온다. 레이어에 대한 자세한 내용은 @layer를 참고하기 바란다.
@import "./style.css" layer(default);
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Cascading and Inheritance Level 5 | Last review date: 2023-4-7 | |