CSS Rules

Editing

@container

컨테이너 컨텍스트에 스타일을 적용하는 조건부 그룹 규칙이다.

설명

스타일 선언은 조건에 따라 필터링되고 조건이 true이면 컨테이너에 적용된다. 조건은 컨테이너 크기가 변경될 때 평가된다.

스타일 선언은 해당 컨테이너의 컨텍스트에서만 유효하다. 즉, 컨테이너의 하위 요소들에게만 유효하다.

@container 룰은 { } 블록내에 다른 조건을 가진 @container 룰을 추가할 수 있다. 아래와 예시와 같이 중첩된 @container 룰은 and의 논리 조합을 갖는다.

@container mycontain (width > 300px) {
  /* styles1 */
  @container style(--responsive: true) {
    /* styles2 */
  }
}

위 예시 코드는 mycontain이라는 container-name을 가진 요소의 width300px보다 크면 styles1 적용된다. 그리고 컨테이너를 지정하지 않은 내부 @container 룰은 상위 요소들 중에서 --responsive 사용자 정의 속성의 값이 true이어야만 styles2도 함께 적용된다.

선언

<@container>

DEVDIC-Specified Data Types

@container 앳룰(at-rules)의 구문 형식을 나타낸다.

  • CSS Containment Module Level 3
    @container [ <container-name> ]? <container-condition> { <stylesheet>
    }

    <container-name>을 지정하면 해당 컨테이너의 컨텍스트만을 대상으로 하지만 생략한 경우 가장 가까운 상위 요소 중에서 container-type 속성을 정의한 컨테이너를 대상으로 한다.

    <stylesheet>는 컨테이너의 하위 요소들을 대상으로 작성되어야 한다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <container-condition>

    컨테이너 쿼리(container query)를 위한 조건의 조합을 나타낸다.

    • CSS Containment Module Level 3
      not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]
    Details

    포함된 타입

    • <query-in-parens>

      하위 표현식의 불리언(boolean) 결과를 나타낸다.

      • CSS Containment Module Level 3
        ( <container-condition> ) | ( <size-feature> ) | style( <style-query> ) | <general-enclosed>
      Details

      포함된 타입

      • <container-condition>

        컨테이너 쿼리(container query)를 위한 조건의 조합을 나타낸다.

        • CSS Containment Module Level 3
          not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<container-condition>]
      • <general-enclosed>

        작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.

        • Media Queries Level 5
          [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
        Details

        포함된 타입

        • <any-value>

          <declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.

          • CSS Syntax Module Level 3
            <any-value>?
        • <function-token>

          0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.

          Function Token Railroad Diagrams

          <ident-token> (

          Details

          포함된 타입

          • <ident-token>

            Ident Token Railroad Diagrams

            -- - a-z A-Z _ or non-ASCII escape a-z A-Z 0-9 _ - or non-ASCII escape
        • <ident>

          식별자로 사용되는 임의의 문자열을 나타낸다.

      • <size-feature>

        aspect-ratio, block-size, height, inline-size, orientation, width feature을 쿼리한다.

        • DEVDIC-Specified Data Types
          @container ( [[ width | height | inline-size | block-size ] <mf-comparison> <length> ] | [ aspect-ratio <mf-eq> <ratio> ] | [ orientation <mf-eq> <orientation> ] ) { <stylesheet>
          }
        Details

        포함된 타입

        • <orientation-feature>

          디바이스(device)의 스크린 방향을 나타낸다.

          • CSS Containment Module Level 3
            portrait | landscape

            두 개의 키워드 중 최종 하나가 일치하는 경우 true이다.

          Details

          사용되는 키워드

          • landscape

            Media Queries Level 5

            portrait가 아닌 반대 방향을 나타낸다.

          • portrait

            Media Queries Level 5

            height 미디어 특성의 값이 width 미디어 특성의 값보다 크거나 같으면 orientation 미디어 특성이 세로임을 나타낸다.

        • <length>

          숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

          • CSS Basic User Interface Module Level 4
            <length>
          Details

          사용되는 단위

          아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

          • cm

            1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

          • in

            1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

          • mm

            1cm의 1/10 값을 나타낸다.

          • pc

            1in의 1/16 값을 나타낸다.

          • pt

            1in의 1/72 값을 나타낸다.

          • px

            스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

          • Q

            1cm의 1/40을 나타낸다.

          • deg

            보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

          • grad

            400grad(그라디안)은 완전한 원을 만든다.

          • rad

            2π(라디안)이 완전한 원을 만든다.

          • turn

            1turn(턴)이 완전한 원을 만든다.

          • cap

            대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

          • ch

            글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

          • em

            대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

          • ex

            대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

          • ic

            한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

          • lh

            요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

          • rem

            html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

          • rlh

            html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

          • Hz

            1초당 발생한 진동수를 나타낸다.

          • kHz

            1000Hz를 나타낸다.

          • fr

            그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

          • vb

            html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

          • vh

            뷰포트 높이를 상대적으로 1% 높이를 갖는다.

          • vi

            html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

          • vmax

            vw 또는 vh 중 큰 값을 나타낸다.

          • vmin

            vw 또는 vh 중 작은 값을 나타낸다.

          • vw

            뷰포트 너비를 상대적으로 1% 폭을 갖는다.

          • dpcm

            1cm당 점(dot)의 수를 나타낸다.

          • dpi

            1in당 점(dot)의 수를 나타낸다.

          • dppx

            1픽셀(pixel)당 점(dot)의 수를 나타낸다.

          • ms

            1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

          • s

            초를 나타낸다.

        • <mf-comparison>

          <,  >,  <=,  =,  >= 연산자를 나타낸다.

          • Media Queries Level 5
            <mf-lt> | <mf-gt> | <mf-eq>
          Details

          포함된 타입

          • <mf-eq>

            =를 나타낸다.

            • Media Queries Level 5
              '='
          • <mf-gt>

            >,  >=를 나타낸다.

            • Media Queries Level 5
              '>' '='?
          • <mf-lt>

            <<=를 나타낸다.

            • Media Queries Level 5
              '<' '='?
        • <ratio>

          미디어 쿼리(media query)에서 스크린의 종횡비를 나타낸다.

          • [<number> / <number>]

            슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.

            (예) 16/9

          Details

          포함된 타입

          • <number>

            정수 또는 실수를 표현한다.

          관련 @Rules

        관련 특성

        • aspect-ratio

          〈ratio〉
          • [<number> / <number>]

            슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.

            (예) 16/9

          컨테이너의 width feature, height feature 값의 비율로 쿼리한다.

        • block-size

          〈length〉
          • CSS Basic User Interface Module Level 4
            <length>

          콘텐츠 박스의 블록 축에서 크기를 쿼리한다.

          • CSS Basic User Interface Module Level 4
            <length>

          콘텐츠 박스의 높이를 쿼리한다.

        • inline-size

          〈length〉
          • CSS Basic User Interface Module Level 4
            <length>

          콘텐츠 박스의 인라인 축에서 크기를 쿼리한다.

        • orientation

          • CSS Containment Module Level 3
            portrait | landscape

            두 개의 키워드 중 최종 하나가 일치하는 경우 true이다.

          width feature와 height feature 값의 비율로 정의되는 디바이스(device)의 방향을 쿼리한다.

          • CSS Basic User Interface Module Level 4
            <length>

          콘텐츠 박스의 너비를 쿼리한다.

      • <style-query>

        하위 표현식의 불리언(boolean) 결과를 포함하여 스타일 속성 값을 비교하여 일치 여부에 따른 불리언(boolean)을 나타낸다.

        • CSS Containment Module Level 3
          <style-condition> | <style-feature>
        Details

        포함된 타입

        • <style-condition>

          스타일 속성을 사용한 불리언(boolen) 조합을 나타낸다.

          • CSS Containment Module Level 3
            not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]
          Details

          포함된 타입

          • <style-in-parens>

            하위 표현식의 불리언(boolean)으로 평가되는 쿼리 결과를 나타낸다.

            • CSS Containment Module Level 3
              ( <style-condition> ) | ( <style-feature> ) | <general-enclosed>
            Details

            포함된 타입

            • <general-enclosed>

              작성자는 스타일시트에 사용해서는 안된다. 미래 호환성을 위해서만 존재하므로 새로운 구문 추가가 이전(구형) 유저 에이전트의 조건을 너무 많이 무효화하지 않는다.

              • Media Queries Level 5
                [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
              Details

              포함된 타입

              • <any-value>

                <declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.

                • CSS Syntax Module Level 3
                  <any-value>?
                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<any-value>]
              • <function-token>

                0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.

                Function Token Railroad Diagrams

                <ident-token> (

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<function-token>]
              • <ident>

                식별자로 사용되는 임의의 문자열을 나타낸다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<ident>]
            • <style-condition>

              스타일 속성을 사용한 불리언(boolen) 조합을 나타낸다.

              • CSS Containment Module Level 3
                not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]
              Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
              타입에 대한 자세한 설명은 다음 링크를 참조하라.[<style-condition>]
            • <style-feature>

              CSS-SYNTAX-3 선언과 동일하며 쿼리 컨테이너에서 주어진 속성의 계산된 값이 주어진 값과 일치하는 경우 해당 쿼리는 true이다. 하지만 현재 크롬 웹브라우저 기준으로 CSS 속성에 대한 쿼리는 작동하지 않고 사용자 정의 속성(CSS 변수)만 쿼리가 가능하다.

              (예)

              /* 현재 미지원 */
              @container style(background-color: #FFFF00) {
                /* styles */
              }
              
              /* 현재 지원 */
              @container style(--mycolor: #FFFF00) {
                /* styles */
              }
        • <style-feature>

          CSS-SYNTAX-3 선언과 동일하며 쿼리 컨테이너에서 주어진 속성의 계산된 값이 주어진 값과 일치하는 경우 해당 쿼리는 true이다. 하지만 현재 크롬 웹브라우저 기준으로 CSS 속성에 대한 쿼리는 작동하지 않고 사용자 정의 속성(CSS 변수)만 쿼리가 가능하다.

          (예)

          /* 현재 미지원 */
          @container style(background-color: #FFFF00) {
            /* styles */
          }
          
          /* 현재 지원 */
          @container style(--mycolor: #FFFF00) {
            /* styles */
          }
          Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
          타입에 대한 자세한 설명은 다음 링크를 참조하라.[<style-feature>]

    사용되는 키워드

    • and

      and 앞의 조건과 뒤의 조건의 평가가 모두 true이어야 한다.

    • not

      not 다음에 나오는 조건에 대한 평가를 부정한다.

    • or

      or 앞의 조건과 뒤의 조건의 평가 결과가 하나 이상 true이어야 한다.

  • <container-name>

    container-typecontainer-name 속성이 정의되어 있는 특정 대상을 나타낸다.

    • CSS Containment Module Level 3
      <custom-ident>
    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

  • <stylesheet>

    규칙 목록을 나타낸다. <rule-list>와 동일해 보이는데 이를 사용하는 블록은 특정 컨텍스트로 제한되지 않는 모든 규칙을 기본적으로 허용한다는 점을 제외하면 실제로 동일하다.

    정규화된 규칙으로서 구성 요소 값의 목록으로 구성되며 서두와 단순한 { }으로 구성된 블록 형식을 갖는다. CSS에서 대부분의 정규화된 규칙은 스타일 규칙이며 서두는 선택자(selector)이고 { } 블록은 속성의 선언 목록을 갖는다.

사용 가능한 디스크립터 및 특성

[사용 가능한 값]은 설정 가능한 모든 값을 나열하지 않을 수도 있다. 자세한 사항은 각 항목의 추가 정보를 확인하라.

aspect-ratio 

컨테이너의 width feature, height feature 값의 비율로 쿼리한다.

사용되는 타입

미디어 쿼리(media query)에서 스크린의 종횡비를 나타낸다.

  • [<number> / <number>]

    슬래시(/)를 기준으로 왼쪽의 <number>는 너비, 오른쪽의 <number>는 높이를 나타낸다.

    (예) 16/9

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <number>

    정수 또는 실수를 표현한다.

block-size 

콘텐츠 박스의 블록 축에서 크기를 쿼리한다.

writing-mode에 따라 블록 크기를 조건으로 사용한다.

사용되는 타입

숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

  • CSS Basic User Interface Module Level 4
    <length>

사용되는 단위

아래의 모든 단위를 사용할 수 있는 것이 아닐 수 있으므로 주의한다.

  • cm

    1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

  • in

    1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

  • mm

    1cm의 1/10 값을 나타낸다.

  • pc

    1in의 1/16 값을 나타낸다.

  • pt

    1in의 1/72 값을 나타낸다.

  • px

    스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

  • Q

    1cm의 1/40을 나타낸다.

  • deg

    보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

  • grad

    400grad(그라디안)은 완전한 원을 만든다.

  • rad

    2π(라디안)이 완전한 원을 만든다.

  • turn

    1turn(턴)이 완전한 원을 만든다.

  • cap

    대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

  • ch

    글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

  • em

    대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

  • ex

    대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

  • ic

    한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

  • lh

    요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

  • rem

    html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

  • rlh

    html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

  • Hz

    1초당 발생한 진동수를 나타낸다.

  • kHz

    1000Hz를 나타낸다.

  • fr

    그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

  • vb

    html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vh

    뷰포트 높이를 상대적으로 1% 높이를 갖는다.

  • vi

    html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vmax

    vw 또는 vh 중 큰 값을 나타낸다.

  • vmin

    vw 또는 vh 중 작은 값을 나타낸다.

  • vw

    뷰포트 너비를 상대적으로 1% 폭을 갖는다.

  • dpcm

    1cm당 점(dot)의 수를 나타낸다.

  • dpi

    1in당 점(dot)의 수를 나타낸다.

  • dppx

    1픽셀(pixel)당 점(dot)의 수를 나타낸다.

  • ms

    1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

  • s

    초를 나타낸다.

height 

콘텐츠 박스의 높이를 쿼리한다.

 높이를 조건으로 사용한다.

사용되는 타입

숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

  • CSS Basic User Interface Module Level 4
    <length>

사용되는 단위

아래의 모든 단위를 사용할 수 있는 것이 아닐 수 있으므로 주의한다.

  • cm

    1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

  • in

    1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

  • mm

    1cm의 1/10 값을 나타낸다.

  • pc

    1in의 1/16 값을 나타낸다.

  • pt

    1in의 1/72 값을 나타낸다.

  • px

    스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

  • Q

    1cm의 1/40을 나타낸다.

  • deg

    보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

  • grad

    400grad(그라디안)은 완전한 원을 만든다.

  • rad

    2π(라디안)이 완전한 원을 만든다.

  • turn

    1turn(턴)이 완전한 원을 만든다.

  • cap

    대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

  • ch

    글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

  • em

    대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

  • ex

    대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

  • ic

    한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

  • lh

    요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

  • rem

    html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

  • rlh

    html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

  • Hz

    1초당 발생한 진동수를 나타낸다.

  • kHz

    1000Hz를 나타낸다.

  • fr

    그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

  • vb

    html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vh

    뷰포트 높이를 상대적으로 1% 높이를 갖는다.

  • vi

    html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vmax

    vw 또는 vh 중 큰 값을 나타낸다.

  • vmin

    vw 또는 vh 중 작은 값을 나타낸다.

  • vw

    뷰포트 너비를 상대적으로 1% 폭을 갖는다.

  • dpcm

    1cm당 점(dot)의 수를 나타낸다.

  • dpi

    1in당 점(dot)의 수를 나타낸다.

  • dppx

    1픽셀(pixel)당 점(dot)의 수를 나타낸다.

  • ms

    1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

  • s

    초를 나타낸다.

inline-size 

콘텐츠 박스의 인라인 축에서 크기를 쿼리한다.

writing-mode에 따라 인라인 크기를 조건으로 사용한다.

사용되는 타입

숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

  • CSS Basic User Interface Module Level 4
    <length>

사용되는 단위

아래의 모든 단위를 사용할 수 있는 것이 아닐 수 있으므로 주의한다.

  • cm

    1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

  • in

    1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

  • mm

    1cm의 1/10 값을 나타낸다.

  • pc

    1in의 1/16 값을 나타낸다.

  • pt

    1in의 1/72 값을 나타낸다.

  • px

    스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

  • Q

    1cm의 1/40을 나타낸다.

  • deg

    보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

  • grad

    400grad(그라디안)은 완전한 원을 만든다.

  • rad

    2π(라디안)이 완전한 원을 만든다.

  • turn

    1turn(턴)이 완전한 원을 만든다.

  • cap

    대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

  • ch

    글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

  • em

    대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

  • ex

    대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

  • ic

    한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

  • lh

    요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

  • rem

    html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

  • rlh

    html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

  • Hz

    1초당 발생한 진동수를 나타낸다.

  • kHz

    1000Hz를 나타낸다.

  • fr

    그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

  • vb

    html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vh

    뷰포트 높이를 상대적으로 1% 높이를 갖는다.

  • vi

    html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vmax

    vw 또는 vh 중 큰 값을 나타낸다.

  • vmin

    vw 또는 vh 중 작은 값을 나타낸다.

  • vw

    뷰포트 너비를 상대적으로 1% 폭을 갖는다.

  • dpcm

    1cm당 점(dot)의 수를 나타낸다.

  • dpi

    1in당 점(dot)의 수를 나타낸다.

  • dppx

    1픽셀(pixel)당 점(dot)의 수를 나타낸다.

  • ms

    1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

  • s

    초를 나타낸다.

orientation 

width feature와 height feature 값의 비율로 정의되는 디바이스(device)의 방향을 쿼리한다.

사용되는 타입

<orientation-feature>

디바이스(device)의 스크린 방향을 나타낸다.

  • CSS Containment Module Level 3
    portrait | landscape

    두 개의 키워드 중 최종 하나가 일치하는 경우 true이다.

사용되는 키워드

  • landscape

    portrait가 아닌 반대 방향을 나타낸다.

  • portrait

    height 미디어 특성의 값이 width 미디어 특성의 값보다 크거나 같으면 orientation 미디어 특성이 세로임을 나타낸다.

width 

콘텐츠 박스의 너비를 쿼리한다.

가로 크기를 조건으로 사용한다.

사용되는 타입

숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

  • CSS Basic User Interface Module Level 4
    <length>

사용되는 단위

아래의 모든 단위를 사용할 수 있는 것이 아닐 수 있으므로 주의한다.

  • cm

    1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

  • in

    1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

  • mm

    1cm의 1/10 값을 나타낸다.

  • pc

    1in의 1/16 값을 나타낸다.

  • pt

    1in의 1/72 값을 나타낸다.

  • px

    스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

  • Q

    1cm의 1/40을 나타낸다.

  • deg

    보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

  • grad

    400grad(그라디안)은 완전한 원을 만든다.

  • rad

    2π(라디안)이 완전한 원을 만든다.

  • turn

    1turn(턴)이 완전한 원을 만든다.

  • cap

    대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

  • ch

    글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

  • em

    대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

  • ex

    대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

  • ic

    한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

  • lh

    요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

  • rem

    html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

  • rlh

    html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

  • Hz

    1초당 발생한 진동수를 나타낸다.

  • kHz

    1000Hz를 나타낸다.

  • fr

    그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

  • vb

    html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vh

    뷰포트 높이를 상대적으로 1% 높이를 갖는다.

  • vi

    html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vmax

    vw 또는 vh 중 큰 값을 나타낸다.

  • vmin

    vw 또는 vh 중 작은 값을 나타낸다.

  • vw

    뷰포트 너비를 상대적으로 1% 폭을 갖는다.

  • dpcm

    1cm당 점(dot)의 수를 나타낸다.

  • dpi

    1in당 점(dot)의 수를 나타낸다.

  • dppx

    1픽셀(pixel)당 점(dot)의 수를 나타낸다.

  • ms

    1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

  • s

    초를 나타낸다.

구문

  • CSS Containment Module Level 3
    @container mycontainer (inline-size 〈 300px) { 〈stylesheet〉
    }

버전 명세

Modules
Module NameStatusSummary
CSS Containment Module Level 3

Last review date: 2023-3-30

지원 웹브라우저