컨테이너 컨텍스트에 스타일을 적용하는 조건부 그룹 규칙이다.
스타일 선언은 조건에 따라 필터링되고 조건이 true
이면 컨테이너에 적용된다. 조건은 컨테이너 크기가 변경될 때 평가된다.
스타일 선언은 해당 컨테이너의 컨텍스트에서만 유효하다. 즉, 컨테이너의 하위 요소들에게만 유효하다.
@container
룰은 {
}
블록내에 다른 조건을 가진 @container
룰을 추가할 수 있다. 아래와 예시와 같이 중첩된 @container
룰은 and
의 논리 조합을 갖는다.
@container mycontain (width > 300px) {
/* styles1 */
@container style(--responsive: true) {
/* styles2 */
}
}
위 예시 코드는 mycontain
이라는 container-name
을 가진 요소의 width
가 300px
보다 크면 styles1 적용된다. 그리고 컨테이너를 지정하지 않은 내부 @container
룰은 상위 요소들 중에서 --responsive
사용자 정의 속성의 값이 true
이어야만 styles2도 함께 적용된다.
@container [ <container-name> ]? <container-condition> { <stylesheet> }
<container-name>을 지정하면 해당 컨테이너의 컨텍스트만을 대상으로 하지만 생략한 경우 가장 가까운 상위 요소 중에서 container-type
속성을 정의한 컨테이너를 대상으로 한다.
<stylesheet>는 컨테이너의 하위 요소들을 대상으로 작성되어야 한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
컨테이너 쿼리(container query)를 위한 조건의 조합을 나타낸다.
not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]
하위 표현식의 불리언(boolean) 결과를 나타낸다.
( <container-condition> ) | ( <size-feature> ) | style( <style-query> ) | <general-enclosed>
컨테이너 쿼리(container query)를 위한 조건의 조합을 나타낸다.
not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
<any-value>?
0
개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.
식별자로 사용되는 임의의 문자열을 나타낸다.
aspect-ratio
, block-size
, height
, inline-size
, orientation
, width
feature을 쿼리한다.
@container ( [[ width | height | inline-size | block-size ] <mf-comparison> <length> ] | [ aspect-ratio <mf-eq> <ratio> ] | [ orientation <mf-eq> <orientation> ] ) { <stylesheet> }
디바이스(device)의 스크린 방향을 나타낸다.
portrait | landscape
두 개의 키워드 중 최종 하나가 일치하는 경우 true
이다.
portrait
가 아닌 반대 방향을 나타낸다.
height
미디어 특성의 값이 width
미디어 특성의 값보다 크거나 같으면 orientation
미디어 특성이 세로임을 나타낸다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 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)를 나타낸다.
초를 나타낸다.
<
, >
, <=
, =
, >=
연산자를 나타낸다.
<mf-lt> | <mf-gt> | <mf-eq>
미디어 쿼리(media query)에서 스크린의 종횡비를 나타낸다.
[<number> / <number>]
슬래시(/
)를 기준으로 왼쪽의 <number>
는 너비, 오른쪽의 <number>
는 높이를 나타낸다.
(예) 16/9
[<number> / <number>]
슬래시(/
)를 기준으로 왼쪽의 <number>
는 너비, 오른쪽의 <number>
는 높이를 나타낸다.
(예) 16/9
컨테이너의 width
feature, height
feature 값의 비율로 쿼리한다.
<length>
콘텐츠 박스의 블록 축에서 크기를 쿼리한다.
<length>
콘텐츠 박스의 높이를 쿼리한다.
<length>
콘텐츠 박스의 인라인 축에서 크기를 쿼리한다.
portrait | landscape
두 개의 키워드 중 최종 하나가 일치하는 경우 true
이다.
width
feature와 height
feature 값의 비율로 정의되는 디바이스(device)의 방향을 쿼리한다.
<length>
콘텐츠 박스의 너비를 쿼리한다.
하위 표현식의 불리언(boolean) 결과를 포함하여 스타일 속성 값을 비교하여 일치 여부에 따른 불리언(boolean)을 나타낸다.
<style-condition> | <style-feature>
스타일 속성을 사용한 불리언(boolen) 조합을 나타낸다.
not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]
하위 표현식의 불리언(boolean)으로 평가되는 쿼리 결과를 나타낸다.
( <style-condition> ) | ( <style-feature> ) | <general-enclosed>
작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.
[ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
<any-value>?
0
개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.
식별자로 사용되는 임의의 문자열을 나타낸다.
스타일 속성을 사용한 불리언(boolen) 조합을 나타낸다.
not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]
CSS-SYNTAX-3 선언과 동일하며 쿼리 컨테이너에서 주어진 속성의 계산된 값이 주어진 값과 일치하는 경우 해당 쿼리는 true
이다. 하지만 현재 크롬 웹브라우저 기준으로 CSS 속성에 대한 쿼리는 작동하지 않고 사용자 정의 속성(CSS 변수)만 쿼리가 가능하다.
(예)
/* 현재 미지원 */
@container style(background-color: #FFFF00) {
/* styles */
}
/* 현재 지원 */
@container style(--mycolor: #FFFF00) {
/* styles */
}
CSS-SYNTAX-3 선언과 동일하며 쿼리 컨테이너에서 주어진 속성의 계산된 값이 주어진 값과 일치하는 경우 해당 쿼리는 true
이다. 하지만 현재 크롬 웹브라우저 기준으로 CSS 속성에 대한 쿼리는 작동하지 않고 사용자 정의 속성(CSS 변수)만 쿼리가 가능하다.
(예)
/* 현재 미지원 */
@container style(background-color: #FFFF00) {
/* styles */
}
/* 현재 지원 */
@container style(--mycolor: #FFFF00) {
/* styles */
}
and
앞의 조건과 뒤의 조건의 평가가 모두 true
이어야 한다.
not
다음에 나오는 조건에 대한 평가를 부정한다.
or
앞의 조건과 뒤의 조건의 평가 결과가 하나 이상 true
이어야 한다.
container-type
과 container-name
속성이 정의되어 있는 특정 대상을 나타낸다.
<custom-ident>
임의의 사용자 정의 문자열을 나타낸다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
규칙 목록을 나타낸다. <rule-list>
와 동일해 보이는데 이를 사용하는 블록은 특정 컨텍스트로 제한되지 않는 모든 규칙을 기본적으로 허용한다는 점을 제외하면 실제로 동일하다.
정규화된 규칙으로서 구성 요소 값의 목록으로 구성되며 서두와 단순한 { }
으로 구성된 블록 형식을 갖는다. CSS에서 대부분의 정규화된 규칙은 스타일 규칙이며 서두는 선택자(selector)이고 { }
블록은 속성의 선언 목록을 갖는다.
[사용 가능한 값]은 설정 가능한 모든 값을 나열하지 않을 수도 있다. 자세한 사항은 각 항목의 추가 정보를 확인하라.
컨테이너의 width
feature, height
feature 값의 비율로 쿼리한다.
미디어 쿼리(media query)에서 스크린의 종횡비를 나타낸다.
[<number> / <number>]
슬래시(/
)를 기준으로 왼쪽의 <number>
는 너비, 오른쪽의 <number>
는 높이를 나타낸다.
(예) 16/9
콘텐츠 박스의 블록 축에서 크기를 쿼리한다.
writing-mode
에 따라 블록 크기를 조건으로 사용한다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 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)를 나타낸다.
초를 나타낸다.
콘텐츠 박스의 높이를 쿼리한다.
높이를 조건으로 사용한다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 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)를 나타낸다.
초를 나타낸다.
콘텐츠 박스의 인라인 축에서 크기를 쿼리한다.
writing-mode
에 따라 인라인 크기를 조건으로 사용한다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 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)를 나타낸다.
초를 나타낸다.
width
feature와 height
feature 값의 비율로 정의되는 디바이스(device)의 방향을 쿼리한다.
디바이스(device)의 스크린 방향을 나타낸다.
portrait | landscape
두 개의 키워드 중 최종 하나가 일치하는 경우 true
이다.
portrait
가 아닌 반대 방향을 나타낸다.
height
미디어 특성의 값이 width
미디어 특성의 값보다 크거나 같으면 orientation
미디어 특성이 세로임을 나타낸다.
콘텐츠 박스의 너비를 쿼리한다.
가로 크기를 조건으로 사용한다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 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)를 나타낸다.
초를 나타낸다.
@container mycontainer (inline-size 〈 300px) { 〈stylesheet〉 }
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Containment Module Level 3 | Last review date: 2023-3-30 |