CSS Types

CSS Types

CSS Types

CSS 데이터 타입은 CSS 속성과 함수 등에서 사용이 가능한 값의 유형(types)을 정의한다.

개요

CSS 초기에는 CSS 속성의 값에 대해 규칙은 있되 유형을 체계적으로 나누지 않았다. 속성 값의 유형이라는 것은 일반 로직(logic) 기반 언어에서 다루는 데이터 타입과 다를게 없지만 CSS에서 모든 속성의 값을 데이터 타입으로 구분하여 정리하는 게 밖에서 봐도 쉽지 않은 작업이라 생각이 든다.

하지만 오늘날 CSS 속성은 다양한 디자인 요구에 따라 놀라울 정도로 늘어났고 설정하는 값 또한 매우 복잡해졌다. 따라서 설정하는 값에 대한 유형을 정립하지 않고는 규모를 키울 수 없다는 판단을 했을 것이다. 새롭게 개편된 모듈 버전 관리 체계에서는 데이터 타입이라는 기술적인 내용을 포함하기 시작했다. 이러한 이유로 데브딕도 데이터 타입을 중요하게 다루기로 하고 CSS 레퍼런스 설계를 변경했다.

CSS 데이터 타입은 각 레퍼런스에서 표시되는 모든 것들이 공식적인 표준 타입이라고 말하기는 어렵지만 꺽음괄호를 사용('<' 와 '>'로 감쌈)하여 표기한다. 모듈 사양에서는 이 표기법에 따라 소개하고 있으며 데브딕은  이러한 데이터 타입에 대한 분류를 'W3C Standards'라고 정했다. 그리고 실제 모듈의 버전(예: CSS Syntax Module Level 3)을 레이블로 표기했다.

데브딕에서도 레퍼런스 설계에 따라 자체적으로 정한 타입이 있다. 이 데이터 타입은 마찬가지로 꺽음괄호를 사용('<' 와 '>'로 감쌈)하여 표기를 하고 W3C Standards와 구분하기 위해 DEVDIC-Specified Data Types라고 레이블을 표기했다.

타입

  • W3C Standards

    • 〈absolute-color-base〉

      기본적인 절대 색상 값을 나타낸다. 웹이 전통적으로 사용해 왔던 색상값이다.

    • 〈absolute-color-function〉

      CSS에 내장된 색상을 생성하는 함수가 반환하는 값을 나타낸다. 초기의 rgb() 함수부터 현재 다양한 함수가 존재하고 있다.

    • 〈absolute-size〉

      유저 에이전트가 계산하고 보관하는 글꼴 크기를 키워드로 나타내는 타입이다.

    • 〈alpha-value〉

      0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

    • 〈an+b〉

      An+B 표기법은 원래 다른 CSS와 약간 다른 토큰화자를 사용하여 정의되었기 때문에 CSS 토큰으로 표현할 때 다소 이상하게 정의되지만 :nth-child() 등의 함수형 가상 클래스에서 형제 관계의 요소를 찾는 매우 다양한 공식을 제공한다. 추가적인 내용은 상세 설명을 참고한다.

    • 〈angle-percentage〉

      각도를 나타내는 <angle>과 상대적 값을 나타내는 <percentage> 모두 가능한 타입을 나타낸다.

    • 〈angle〉

      0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

    • 〈angular-color-hint〉

      회전 방식의 그라데이션에서 색상의 회전 위치를 나타낸다. 각도(<angle>)이거나 퍼센트(<percentage>) 값을 가질 수 있다.

    • 〈angular-color-stop-list〉

      회전 방식의 그라데이션에서 색이 지정될 회전 위치(<angular-color-hint>)를 선택적으로 가질 수 있는 색상 값의 목록을 나타낸다. 주의할 점은 색이 지정되는 위치는 색의 범위가 포함되는 <angular-color-stop>과는 다르다.

    • 〈angular-color-stop〉

      회전 방식의 그라데이션에서 회전 위치에 지정할 색상 값을 나타낸다. 선택적으로 색상 값 뒤에 범위를 지정할 수 있다.

    • 〈animateable-feature〉

      요소에게 어떤 종류의 변경을 수행할 것으로 예상되는지 유저 에이전트에게 렌더링 힌트를 제공하기 위한 값을 나타낸다. 이것은 유저 에이전트가 해당 변경 사항을 원활하게 렌더링하는 데 필요한 최적화를 미리 수행하여 변경(예: 애니메이션 등)이 되는 시점에 끊김 현상을 방지할 수 있다.

    • 〈any-value〉

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

    • 〈attachment〉

      배경 이미지가 지정된 경우 뷰포트로 부터 고정(fixed), 스크롤(scroll) 또는 콘텐츠와 함께 스크롤(local)할지를 나타내는 타입이다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

    • 〈attr-type〉

      속성 값이 어떤 종류의 CSS 값으로 해석될 것인지(attr() 함수의 결과 값 사용)와 해당 값에 어떤 특수 구문 분석이 수행될 것인지를 나타낸다.

    • 〈auto-repeat〉

      가변 크기의 그리드 컨테이너에 반복적으로 그리드 항목을 배치하는 경우 그리드 컨테이너의 공간을 채우는 메커니즘을 나타낸다.

    • 〈auto-track-list〉

      그리드 컨테이너의 크기에 따라 트랙(track)의 수가 자동으로 지정되는 메커니즘을 나타낸다.

    • 〈baseline-position〉

      기준선 정렬은 정렬 기준선을 일치시켜 공유 정렬 컨텍스트 내에서 여러 정렬 대상을 정렬한다.

    • 〈basic-shape〉

      clip-path, shape-outside, offset-path 속성에 사용되는 형태를 나타낸다.

    • 〈bg-image〉

      <'background-image'> 속성에 사용되는 값을 나타낸다.  url() 함수를 사용해서 2차원 이미지를 설정하거나 그라디언트를 설정할 수 있다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

    • 〈bg-layer〉

      배경 레이어가 겹쳐있는 경우 맨 마지막(아래)이(가) 아닌 위치의 배경에 대한 설정 값을 나타낸다. <'background-color'> 값을 지정할 수 없다.

    • 〈bg-position〉

      <'background-position'> 속성에 사용되는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

    • 〈bg-size〉

      <'background-size'> 속성에 사용하는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

    • 〈blend-mode〉

      요소가 겹쳐 있는 경우 각 요소의 색상이 겹쳐서 보여지는 방식을 정의한다.

    • 〈box〉

      배경이 그려지는 영역을 결정하는 배경 페인팅 영역을 설정하는 값을 나타낸다.

    • 〈calc-constant〉

      e 및 pi와 같이 기본적으로 정의되어 제공되는 상수를 나타낸다.

    • 〈calc-number-product〉

      <number> 값으로 곱셈(*) 또는 나눗셈(/) 연산의 결과를 나타낸다.

    • 〈calc-number-sum〉

      <number> 값으로 덧셈(+) 또는 뺄셈(-) 연산의 결과를 나타낸다.

    • 〈calc-number-value〉

      calc() 함수에서 계산 표현식에 사용되는 <number> 또는 calc() 함수로 덧셈 혹은 뺄셈한 결과값을 나타낸다.

    • 〈calc-product〉

      곱셈(*) 또는 나누기(/)의 결과값을 나타낸다.

    • 〈calc-sum〉

      덧셈(+), 뺄셈(-)으로 계산되는 값을 나타낸다.

    • 〈calc-value〉

      calc() 함수에서 연산 표현식에 사용되는 <number>, <dimension>, <percentage>, <calc-sum> 값을 나타낸다.

    • 〈cf-image〉

      cross-fade() 함수의 매개 변수 타입을 나타낸다. 쉼표로 구분해서 추가할 수 있다.

    • 〈clip-source〉

      클리핑 소스로 사용할 리소스의 경로를 나타내는 타입이다.

    • 〈color()〉

      color() 함수의 인수를 나타내는 타입이다.

    • 〈color-font-tech〉

      다양한 유형의 색상 글꼴 파일 기술을 나타낸다.

    • 〈color-interpolation-method〉

      <color> 값 사이의 보간에 사용되는 색상 공간(color space)을 나타낸다. 기본적으로 보간 색상 공간은 Oklab이다.

    • 〈color-stop-angle〉

      회전 각도를 사용해서 색상의 범위를 지정한 값을 나타낸다.

    • 〈color-stop-length〉

      그라디언트(gradient)에서 지정된 색의 범위를 나타낸다.

    • 〈color-stop-list〉

      <length-percentage> 값으로 그라데이션에서 색이 지정될 위치(<linear-color-hint>)를 선택적으로 가질 수 있는 색상 값의 목록을 나타낸다. 주의할 점은 색이 지정되는 위치는 색의 범위가 포함되는 <linear-color-stop>과는 다르다.

    • 〈colorspace-params〉

      color() 함수에서 사용 가능한 매개 변수의 데이터 타입을 나타낸다.  RGB 계열의 미리 정의된 색 공간(predefined color spaces)에서 표현되는 색상 값이거나 XYZ 색 공간(xyz color space)의 색상 값을 나타낸다.

    • 〈color〉

      sRGB 색상 공간의 색상값을 나타낸다. 알파 채널 투명도 값을 포함 할 수 있으며, 색상이 배경과 합성되는 방법을 나타낸다.  색을 생성하는 방법은 UA 표준 색상명, 16진수 값 그리고 함수로는 rgb(), rgba(), hsl(), hsla(), hwb(),  color(),lab(), lch(), oklab(), oklch() 함수가 있다.

    • 〈common-lig-values〉

      글꼴의 공통 합자 표시를 활성 또는 비활성한 키워드를 나타낸다.

    • 〈compositing-operator〉

      합성(compositing)하는 연산 방법을 키워드로 나타낸다.

    • 〈conic-gradient-syntax〉

      conic-gradient() 함수의 매개 변수 타입을 나타낸다.

    • 〈container-condition〉

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

    • 〈container-name〉

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

    • 〈content-distribution〉

      justify-content, align-content 속성에서 사용되는 정렬 키워드를 나타낸다.

    • 〈content-list〉

      요소 또는 가상 요소의 내부에 렌더링되는 콘텐츠를 지정하기 위한 하나 이상의 순서를 갖는 목록을 나타낸다. 렌더링이 되면 목록에 포함된 각 값은 순서대로 익명 인라인 상자(anonymous inline boxes)로 바뀐다.

    • 〈content-position〉

      justify-content, align-content 속성에서 사용되는 정렬 키워드를 나타낸다.

    • 〈content-replacement〉

      지정된 <image> 타입으로 채워진 요소 또는 가상 요소를 대체 요소로 생성한다. 지정된 <image> 타입의 값이 유효하지 않은 이미지를 나타내는 경우 투명한 검정색으로 채워진 자연적인 너비와 높이가 0인 이미지를 나타내는 것으로 처리된다.

    • 〈contextual-alt-values〉

      문맥 대체 표시를 활성 또는 비활성한 값을 나타낸다.

    • 〈counter-name〉

      <custom-ident> 타입의 카운터의 이름을 나타낸다.

    • 〈counter-style-name〉

      트리 범위(tree-scoped)의 이름이며 ASCII 대소문자를 구분하지 않는 <custom-ident> 이다.

    • 〈counter-style〉

      카운터 스타일을 지정하는 키워드를 나타낸다.

    • 〈counter〉

      순번 매김같은 값을 문자열이나 이미지로 나타내는 counter() 및 counters() 함수를 통해 생성된 값을 나타낸다.

    • 〈cubic-bezier-easing-function〉

      3차 베지어 곡선을 나타내는 값으로 움직임이 발생시 속도 변화를 나타낸다.

    • 〈custom-ident〉

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

    • 〈custom-property-name〉

      사용자 정의 속성명을 나타낸다.

    • 〈dashed-ident〉

      <custom-ident> 의 하위 타입이며 암시하는 모든 대소문자 구분과 두 개의 대시(U+002D HYPHEN-MINUS)로 시작해야 한다는 추가 제한이 있다.

    • 〈dashndashdigit-ident〉

      '-n-*'에 대한 ASCII 대소문자 구분 일치 항목인 <ident-token>이다. '*'는 일련의 하나 이상의 숫자이다.

    • 〈declaration-list〉

      선언 목록을 나타낸다. 문법에서 블록의 유일한 값으로만 사용할 수 있으며 선언 목록 처리 알고리즘을 사용하여 블록의 내용을 구문 분석해야 함을 나타낸다.

    • 〈declaration-value〉

      <declaration-value> 타입은 시퀀스에 허용되지 않는 토큰이 포함되지 않는 한 하나 이상의 토큰 시퀀스와 일치한다. 유효한 선언이 값으로 가질 수 있는 전체를 나타낸다.

    • 〈declaration〉

      구문상에서 선언을 나타낸다.

    • 〈dimension-unit〉

      리터럴 "%" 문자(값이 "%"인 <delim-token>)와 일치하거나 값이 <length>, <angle>, <time>, <frequency> 또는 <flex> 값(예: px 또는 ms)에 대한 CSS 단위 중 하나인 식별자와 일치한다.

    • 〈dimension〉

      단위로 연결된 <number> 타입을 나타낸다. <length>, <angle>, <time>, <resolution>를 포함하는 상위 개념이다.

    • 〈discretionary-lig-values〉

      임의 합자를 표시하거나 표시하지 않는 값을 나타낸다.

    • 〈display-box〉

      요소가 상자를 생성할지 여부를 제어하는 값을 나타낸다.

    • 〈display-inside〉

      요소의 내부 표시 유형을 지정하는 값을 나타낸다. 이는 콘텐츠를 배치하는 서식 컨텍스트(formatting context) 유형을 정의한다.

    • 〈display-internal〉

      <table>, <ruby> 등 일부 레이아웃 모델은 복잡한 내부 구조 출력 메커니즘을 지닌다. 하나의 디스플레이 유형이 아닌 내부 요소가 역할에 맞는 디스플레이 유형을 동시에 갖는다. <display-internal>은 이러한 키워드 그룹을 나타낸다.

    • 〈display-legacy〉

      CSS Level 2에서 사용했던 단일 키워드를 나타낸다.

    • 〈display-listitem〉

      목록의 항목으로 표시 되도록 하는 값을 나타낸다.

    • 〈display-outside〉

      요소의 외부 디스플레이 유형을 지정하는 키워드를 나타낸다.

    • 〈easing-function〉

      애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수가 있다.

    • 〈east-asian-variant-values〉

      동아시아 텍스트에서 글리프(glyph)의 렌더링을 제어하는 키워드를 나타낸다.

    • 〈east-asian-width-values〉

      동아시아 텍스트에서 글리프(glyph)의 크기 조정을 제어하는 키워드를 나타낸다.

    • 〈ending-shape〉

      그라디언트의 끝 모양이 원(circle) 또는 타원(ellipse)일지를 나타낸다.

    • 〈explicit-track-list〉

      명시적인 트랙 목록을 나타낸다.

    • 〈extent-keyword〉

      그라디언트의 끝 모양 크기를 결정하는 값을 나타낸다. 

    • 〈family-name〉

      일반 구성이 아닌 글꼴명을 자료로 하는 타입이다. 따옴표로 인용되어야 한다.

    • 〈feature-tag-value〉

      OpenType 글꼴 기능(font features)에 대한 하위 수준 제어를 위한 값을 나타낸다.

    • 〈feature-value-block〉

      글꼴 기능(features)을 선언하는 구문을 나타낸다.

    • 〈feature-value-name〉

      @font-feature-values 앳룰(at-rule)에서 선언한  <font-feature-value-type>에 정의된 대체 글리프(glyph) 값의 이름을 나타낸다. 대체 글리프(glyph)에 대한 이름은 해당 글꼴의 레퍼런스를 참고한다.

    • 〈filter-function〉

      이미지의 모습을 변형할 수 있는 그래픽 효과를 지정할 수 있다.

    • 〈filter-value-list〉

      filter 속성으로 효과를 지정하기 위해 설정된 값 목록을 나타낸다.

    • 〈final-bg-layer〉

      배경 레이어가 겹쳐있는 경우 맨 마지막(아래)에 위치할 배경에 대한 설정 값 타입이다. <'background-color'> 설정이 가능하다.

    • 〈fixed-breadth〉

      그리드 트랙(grid track)의 고정폭을 나타낸다.

    • 〈fixed-repeat〉

      그리드 트랙(grid track) 생성을 위해 <fixed-size>로 반복되는 값을 나타낸다.

    • 〈fixed-size〉

      고정된 그리드 트랙(grid track) 크기를 나타낸다.

    • 〈flex〉

      그리드 트랙(grid track)의 플렉스 펙터(flex factor)를 지정하는 음수가 아닌 fr 단위의 치수를 나타낸다.

    • 〈font-face-name〉

      local() 함수형 구문의 인수로서 더 큰 폰트 패밀리(font family) 내에서 단일 폰트를 고유하게 식별하는 문자열이다. 선택적으로 따옴표로 묶을 수 있다. 따옴표로 묶지 않으면 따옴표로 묶지 않은 폰트 패밀리(font family) 네임 처리 규칙이  적용되며 이름은 공백으로 구분된 시퀀스여야 한다. 식별자를 하나의 공백으로 구분, 결합하여 문자열로 변환한다. 

    • 〈font-feature-tech〉

      features-opentype, features-aat, features-graphite 등과 같은 글꼴 기능 지원 기술을 나타낸다.

    • 〈font-feature-value-type〉

      글꼴 기능(features) 선언 타입을 나타낸다.

    • 〈font-format〉

      format() 함수형 구문에 인수로 사용되는 값을 나타낸다.

    • 〈font-stretch-css3〉

      텍스트를 넓이거나 좁히는 키워드를 나타낸다. CSS Fonts Module Level 4의 font 속기 속성에만 사용되는 font-stretch 값을 따로 분류하기 위해서 정한 유형이다.

    • 〈font-tech〉

      다양한 글꼴 기능 지원 기술을 나타낸다.

    • 〈font-variant-css21〉

      CSS Fonts Module Level 3에서 정한 font 속기 속성에서만 사용되는 CSS 2.1 사양의 font-variant 값을 나타낸다.

    • 〈font-variant-css2〉

      CSS Fonts Module Level 4의 font 속기 속성에만 사용되는 CSS 2의 font-variant 값을 따로 분류하기 위해서 정한 유형이다.

    • 〈font-weight-absolute〉

      font-weight 속성에 사용되는 글꼴 굵기의 절대값을 나타낸다.

    • 〈frequency〉

      목소리의 높낮이 등의 주파수를 나타낸다.

    • 〈general-enclosed〉

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

    • 〈generic-family〉

      CSS에서 정의한 일반적으로 사용되는 시스템에 설치된 범주에 속하는 글꼴을 나타내는 타입이다. 따옴표로 인용될 수 없다.

    • 〈geometry-box〉

      <basic-shape>과 함께 지정하면 <basic-shape>에 대한 참조 박스를 제공한다.

    • 〈gradient〉

      두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

    • 〈grid-line〉

      그리드를 구성하는 행(row)과 열(column)의 시작과 끝을 지정하여 항목의 크기를 결정하는 값을 나타낸다. 또한 span 키워드로 행과 열의 범위를 병합하는 값을 나타낸다.

    • 〈hex-color〉

      값이 3, 4, 6 또는 8개의 16진수로 구성된 <hash-token> 토큰이다. 즉 16진수 색상은 해시 문자 '#' 다음에 숫자[0-9],  대소문자 구분이 없는 알파벳 문자[a-f]의 조합으로 작성된다.

    • 〈historical-lig-values〉

      기록 합자 표시를 활성하거나 비활성한 값을 나타낸다.

    • 〈hsl()〉

      hsl() 함수의 매개 변수를 나타낸다. 레거시로 색상(hue), 채도(saturation), 밝기(lightness) 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.

    • 〈hue-interpolation-method〉

      색조(hue) 각도를 사용하는 색상 함수(lch(), hsl(), hwb() 등)의 보간을 위한 알고리즘을 나타낸다.

    • 〈hue〉

      색상환에서 각도로 표시되는 색조 값을 나타낸다.

    • 〈hwb()〉

      hwb() 함수의 매개변수를 나타낸다.

    • 〈id-selector〉

      id 식별값을 사용한 선택자를 나타낸다.

    • 〈ident〉

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

    • 〈image-set-option〉

      image-set() 함수의 매개 변수 타입을 나타낸다.

    • 〈image〉

      2차원 이미지를 나타낸다.

    • 〈inflexible-breadth〉

      유연하지 않은(inflexible) 의미를 가진 이름에서 알 듯이 <track-breadth> 타입에서 fr 단위가 제외되었다.

    • 〈integer〉

      <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

    • 〈isolation-mode〉

      isolation 속성에 사용되는 값을 나타낸다.

    • 〈keyframe-block〉

      <keyframe-selector>와 { }  내부의 선언 목록을 갖는 구조를 나타낸다.

    • 〈keyframe-selector〉

      쉼표로 구분된 백분율(0%~100%) 값 목록 또는 from과 to 키워드로 구성된 값을 나타낸다.

    • 〈keyframes-name〉

      animation-name 속성에 사용할 키프레임을 이름을 나타낸다.

    • 〈lab()〉

      lab() 함수의 매개변수를 나타낸다. 

    • 〈layer-name〉

      구문상 명시적 레이어 이름으로  @layer 및 @import 규칙에서 표시되며 마침표로 구분된 <ident> 토큰의 목록으로 공백이 없다.

    • 〈lch()〉

      lch() 함수의 매개 변수를 나타낸다. 

    • 〈length-percentage〉

      <length>와 <percentage> 타입을 나타낸다.

    • 〈length〉

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

    • 〈line-name-list〉

      하나 이상의 <line-names>이거나 <name-repeat>를 나타낸다.

    • 〈line-names〉

      그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.

    • 〈line-style〉

      선의 모양에 대한 키워드를 나타낸다. solid, dotted, dashed 이외의 값은 선의 두께가 어느 정도 지정되어야 제대로 보여진다.

    • 〈line-width〉

      선의 두께를 나타낸다. <length> 또는 지정된 키워드를 사용한다.

    • 〈linear-color-hint〉

      그라디언트(gradient)에서 색상의 위치를 나타낸다. <length>이거나 <percentage> 값을 가질 수 있다.

    • 〈linear-color-stop〉

      그라디언트(gradient)에서 해당 위치의 색상 값을 나타낸다. 선택적으로 색상 값 뒤에 범위를 지정할 수도 있다.

    • 〈linear-gradient-syntax〉

      linear-gradient() 함수의 매개 변수를 나타낸다.

    • 〈make-source〉

      마스크 요소(예: url(commonmasks.svg#mask)) 또는 CSS 이미지에 대한 URL을 나타낸다.

    • 〈mask-layer〉

      마스크를 지정하기 위해서 설정되는 관련 값 집합을 나타낸다.

    • 〈mask-reference〉

      마스크 레이어로 사용되는 이미지 설정값을 나타낸다.

    • 〈masking-mode〉

      <mask-reference>가  마스킹(masking)되는 방식을 나타낸다.

    • 〈media-and〉

      이전 <media-in-parens>의 평가 결과에 대한 and 논리 조합을 나타낸다. 즉 and 앞과 뒤의 논리 평가가 모두 true이어야 한다.

    • 〈media-condition-without-or〉

      <media-feature>를 평가하는 <media-or>를 제외한 논리의 조합을  나타낸다.

    • 〈media-condition〉

      <media-feature>를 평가하는 논리의 조합을 나타낸다.

    • 〈media-feature〉

      콘텐츠가 사용 중인 장치의 특성을 나타낸다.

    • 〈media-in-parens〉

      괄호 안의 평가식을 나타낸다.

    • 〈media-not〉

      평가의 결과를 부정한다. 예를 들어서 true일 경우 최종 평가는 false이다.

    • 〈media-or〉

      이전 <media-in-parens>의 평가 결과에 대한 or 논리 조합을 나타낸다. 즉 or 앞과 뒤의 논리 평가가 하나 이상 true이어야 한다.

    • 〈media-query-list〉

      콤마로 구분된 하나 이상의 <media-query> 목록을 나타낸다.

    • 〈media-query〉

      콘텐츠가 사용 중인 장치에 대해 CSS 적용 여부를 판단하기 위한 구문을 나타낸다.

    • 〈media-type〉

      미디어의 유형을 나타낸다. all, print, screen을 제외한 Media Queries Level 3에서 정의한 모든 미디어 유형은 Media Queries Level 4에서 모두 제거되었으므로 사용하지 않아야 한다.

    • 〈mf-boolean〉

      미디어 특성 유무를 boolean으로 평가한다.

    • 〈mf-comparison〉

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

    • 〈mf-eq〉

      =를 나타낸다.

    • 〈mf-gt〉

      >,  >=를 나타낸다.

    • 〈mf-lt〉

      <,  <=를 나타낸다.

    • 〈mf-name〉

      미디어 특성의 이름을 나타낸다.

    • 〈mf-plain〉

      미디어 특성의 이름과 값의 매칭을 나타낸다.

    • 〈mf-range〉

      범위를 이용한 평가식을 나타낸다.

    • 〈mf-value〉

      미디어 특성의 값을 나타낸다.

    • 〈mq-boolean〉

      값이 0 또는 1인 <interger>이다. 다른 정수 값은 유효하지 않다. -0은 CSS에서 항상 0과 동일하므로 유효한 값으로 허용된다.

    • 〈n-dimension〉

      유형 플래그 'integer'로 설정된 <dimension-token>이며 'n'에 대한 ASCII 대소문자 구분 일치 단위이다.

    • 〈name-repeat〉

      그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 이름을 지정하여 repeat() 함수를 사용해서 반복 작업으로 그리드 트랙(grid-track)을 생성하는 값을 나타낸다.

    • 〈named-color〉

      일반적인 색상을 더 쉽게 쓰고 읽을 수 있도록 이름이 지정된 색상 세트를 나타낸다. <ident>로 작성되며 <color>가 필요한 모든 곳에서 허용된다. 모든 색상 키워드는 ASCII 대소문자를 구분하지 않는다.

    • 〈namespace-prefix〉

      네임스페이스(namespace)의 접두어를 나타낸다.

    • 〈ndash-dimension〉

      유형 플래그 'integer'로 설정된 <dimension-token>이며 'n-'에 대한 ASCII 대소문자 구분하지 않는 일치 단위이다.

    • 〈ndashdigit-dimension〉

      유형 플래그 'integer'로 설정된 <dimension-token>이며 'n-*'에 대한 ASCII 대소문자 구분하지 않는 일치 단위이다. '*'는 일련의 1 또는 더 많은 자리수를 의미한다.

    • 〈ndashdigit-ident〉

      'n-*'에 대한 ASCII 대소문자 구분 일치 항목인 <ident-token>이다. '*'는 일련의 하나 이상의 숫자이다.

    • 〈number-percentage〉

      <number>와 <percentage> 타입 값을 나타낸다.

    • 〈number〉

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

    • 〈numeric-figure-values〉

      숫자 표시 방법에 대한 값을 나타낸다.

    • 〈numeric-fraction-values〉

      분수(fraction) 표시 방법에 대한 값을 나타낸다.

    • 〈numeric-spacing-values〉

      숫자가 표시되는 공간를 제어하는 값을 나타낸다.

    • 〈oklab()〉

      oklab() 함수의 매개 변수를 나타낸다. 

    • 〈oklch()〉

      oklch() 함수의 매개 변수를 나타낸다. 

    • 〈outline-line-style〉

      기본적으로 <line-style> 타입과 동일하나 hidden 키워드는 사용할 수 없다.

    • 〈overflow-position〉

      정렬 대상이 정렬 컨테이너보다 큰 경우에는 오버플로우가 되므로 일부 정렬 모드에서는 콘텐츠가 표시되지 않을 수 있다. 이 상황을 제어하기 위해 오버플로우 정렬 모드를 사용한다.

    • 〈page-selector-list〉

      콤마로 구분된 하나 이상의 <page-selector> 목록을 나타낸다.

    • 〈page-selector〉

      페이지 유형 선택자(page type selector) 또는 페이지 가상 클래스(page pseudo-class)로 구성된 것을 나타낸다.

    • 〈page-size〉

      미디어 표준화 이름 중에서 크기를 지정한 값을 나타낸다.

    • 〈palette-identifier〉

      @font-palette-values 규칙에서 정의한 식별값을 나타낸다. <dashed-ident>로 파싱된다.

    • 〈percentage〉

      어떠한 기준으로 부터 백분율로 표현한다.

    • 〈polar-color-space〉

      극좌표계(polar coordinates)를 사용하는 색상 공간(color space)을 나타낸다. 

    • 〈position〉

      박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.

    • 〈predefined-rgb-params〉

      color() 함수의 매개 변수 타입중 하나이다. 미리 정의된 RGB 계열의 색 공간(predefined color spaces) 키워드(<ident>)와 함께 Red, Green, Blue가 지정된 색 공간에서 가지는 값을 <number> 또는 <percentage>로 표현된다.

    • 〈predefined-rgb〉

      미리 정의된 RGB 계열의 색 공간(predefined color spaces) 키워드(<ident>)를 나타낸다.

    • 〈pseudo-page〉

      @page 앳룰(at-rules)에서 사용되는 페이지 가상 클래스를 나타낸다.

    • 〈q-name〉

      참조되는 속성의 이름을 나타낸다. 가상 요소에 적용되는 경우는 속성은 가상 요소의 원래 요소에서 참조된다.

    • 〈query-in-parens〉

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

    • 〈quote〉

      큰따옴표 또는 작은 따옴표로 감싸진 <string> 타입을 나타낸다.

    • 〈radial-gradient-syntax〉

      radial-gradient() 함수에서 매개 변수 타입을 나타낸다.

    • 〈ratio〉

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

    • 〈rectangular-color-space〉

      세 개의 값을 사용한 직교좌표계(cartesian coordinate)를 통해 색을 표현하는 색 공간을 나타낸다.

    • 〈relative-size〉

      현재 글꼴 크기를 기준으로 상대적으로 크기를 지정하는 키워드를 나타낸다.

    • 〈repeat-style〉

      배경 이미지의 크기와 위치가 지정된 후 타일링되는 방식을 설정하는 값을 나타낸다.

    • 〈resolution〉

      출력 장치의 해상도를 나타낸다.

    • 〈rg-ending-shape〉

      그라디언트의 끝 모양이 원 또는 타원인지를 나타낸다.

    • 〈rg-extent-keyword〉

      그라디언트의 끝 모양 크기를 나타낸다.

    • 〈rgb()〉

      rgb() 함수의 매개 변수를 나타낸다. 레거시로 red, green, blue 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.

    • 〈rule-list〉

      앳룰(at-rules) 목록을 나타낸다.

    • 〈self-position〉

      justify-self, align-self 속성에서 사용되며 justify-items, align-items에서도 사용된다.

    • 〈shadow〉

      box-shadow 속성의 그림자 효과 설정값을 나타낸다.

    • 〈shape-box〉

      CSS 박스 모델에서 박스의 가장자리를 참조하는 키워드를 쉐입(shape)에게 사용하는 경우를 나타낸다.

    • 〈shape-radius〉

      정원 또는 타원의 반지름을 나타낸다.

    • 〈shape〉

      clip 속성에서 사용 가능한 클리핑 영역을 나타내는 타입이다.

    • 〈side-or-corner〉

      선형 그라디언트(linear gradient)의 끝쪽 위치를 나타낸다.

    • 〈signed-integer〉

      유형 플래그가 'integer'인 <number-token>이며 '+' 또는 '-'로 시작한다.

    • 〈signless-integer〉

      유형 플래그가 'integer'인 <number-token>이며 숫자로 시작한다.

    • 〈single-animation-direction〉

      애니메이션에 사용되는 키프레임의 진행 방향을 지정한다.

    • 〈single-animation-fill-mode〉

      애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다. 즉 애니메이션이 시작되기 전과 끝난 후의 적용되는 값에 대한 정의를 나타낸다.

    • 〈single-animation-iteration-count〉

      애니메이션 주기가 재생되는 횟수를 지정한다. 기본 값은 1이며 키프레임 처음부터 끝까지 한번 실행됨을 나타낸다.

    • 〈single-animation-play-state〉

       애니메이션의 실행 또는 일시중지를 정의한다.

    • 〈single-animation〉

      애니메이션에 관련된 속성들에 대한 일괄 정의된 값을 가지는 속기 속성이다. 주의할 점은 기본적으로 값의 순서는 무관하지만 <time> 값은 작성 순서에 따라 animation-duration, animation-delay 순으로 값이 할당된다.

    • 〈single-transition-property〉

      전이(transition) 효과를 적용할 대상 속성을 나타낸다.

    • 〈single-transition〉

      하나의 전이(transitoin)효과를 적용하기 위해 정의된 관련 값을 나타낸다.

    • 〈size-feature〉

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

    • 〈src()〉

      src() 함수의 매개변수를 나타낸다.

    • 〈step-easing-function〉

      입력된 시간을 길이가 동일한 지정된 수의 간격으로 나누는 <easing-function> 일종이다.

    • 〈step-position〉

      주어진 시간을 일정 간격으로 나누어서 애니메이션을 진행시 단계 위치를 지정하는 키워드를 나타낸다.

    • 〈string〉

      따옴표로 감싸진 데이터 유형을 표현한다.

    • 〈style-condition〉

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

    • 〈style-feature〉

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

    • 〈style-in-parens〉

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

    • 〈style-query〉

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

    • 〈stylesheet〉

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

    • 〈supports-condition〉

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

    • 〈supports-decl〉

      유저 에이전트(user agent)가 괄호 안의 선언을 지원하는 여부에 따라 불리언(boolean)으로 나타낸다.

    • 〈supports-feature〉

      하나의 논리 결과를 갖는 <supports-decl>를 나타낸다.

    • 〈supports-in-parens〉

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

    • 〈supports-selector-fn〉

      유저 에이전트가 selector() 함수의 인수로 제공된 선택자(selector)의 지원 여부에 따라 불리언(boolean)으로 평가한 결과를 나타낸다.

    • 〈symbol〉

      CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.

    • 〈system-color〉

      CSS 시스템에서 사용하는 색상 테이블이다. CSS Color Module 4에서 더 이상 사용되지 않는 <deprecated-color> 시스템 색상을 정의했다.

    • 〈time-percentage〉

      <time> 또는 <percentage>를 나타낸다.

    • 〈time〉

      초(seconds) 또는 밀리초(milliseconds)로 시간을 나타낸다. 밀리초(milliseconds)는 1/1000초를 나타낸다.

    • 〈track-breadth〉

      <length-percentage>와 fr 단위를 사용한 <flex> 값으로 지정된 트랙(track) 폭에 대한 값을 나타낸다. min-content, max-content, auto 키워드를 사용해 트랙(track) 폭의 크기를 지정할 수도 있다.

    • 〈track-list〉

      하나 이상의 트랙(track) 크기가 명시된 목록을 나타낸다.

    • 〈track-repeat〉

      repeat() 함수를 사용하여 생성한 크기가 고정되지 않은 트랙(track) 집합을 나타낸다.

    • 〈track-size〉

      하위 타입인 <track-breadth>를 포함하여 minmax(), fit-content() 함수를 사용하여 지정한 트랙(track)의 크기를 나타낸다.

    • 〈transform-function〉

      요소의 모양과 위치에 영향을 주는 변환 함수를 나타낸다.

    • 〈transform-list〉

      변형을 주기 위한 다양한 관련 함수들이 사용되는 타입이다. 1개 이상의 함수를 나열한다.

    • 〈type-or-unit〉

      속성 값을 해석하는 방법을 유저 에이전트(User Agent)에게 알려주고 attr() 함수에서 유형을 정의하는 키워드를 나타낸다.

    • 〈urange〉

      U+ 또는 u+ 접두사 뒤에 아래 나열된 세 가지 형식 중 하나의 코드포인트 범위로 구성된 UNICODE-RANGE 토큰을 나타낸다. 이러한 형식 중 하나에 맞지 않는 범위는 유효하지 않으며 선언이 무시된다.

    • 〈url()〉

      url() 함수의 매개변수를 나타낸다.

    • 〈url-modifier〉

      URL의 의미나 해석을 어떻게든 변경하는 타입이다.

    • 〈url〉

      이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

    • 〈visual-box〉

      박스의 가장자리를 참조하는 방식을 정하는 키워드(content-box, padding-box, border-box)를 나타낸다.

    • 〈xyz-params〉

      color() 함수의 매개 변수 타입중 하나이다. XYZ 계열의 색 공간(xyz color space)에서 색상을 설정한 값을 나타낸다. XYZ 계열의 색 공간(xyz color space)에서 사용 가능한 키워드를 지정하고  x, y, z 값으로 색상을 나타낸다.

    • 〈xyz-space〉

      XYZ 계열의 색 공간(xyz color space)에서 사용 가능한 키워드를 나타낸다.

    • 〈zero〉

      값이 0인 리터럴 숫자를 나타낸다. 단순히 값이 0인 <number>로 평가되는 식(예: calc(0))은 <zero>와 일치하지 않는다. 리터럴 <number-token>만 수행한다.

  • DEVDIC Specified

  • Tokenization

©2023 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com