값 정의 구문

CSS 값 정의 구문, 즉 공식 문법은 CSS 속성이나 기능의 유효한 값 집합을 정의한다. 또한 유효한 값 집합에 의미를 부여해서 더 제한할 수도 있다.(예를 들면 숫자는 엄격하게 양수여야 한다거나)

정의 구문은 허용하는 값과 그들 사이의 상호 작용을 설명한다. 구성 요소는 키워드, 리터럴로 간주할 수 있는 문자, 주어진 CSS 데이터 유형 값 또는 다른 CSS 속성 값이 될 수 있다.

구성 요소 값 유형

키워드

일반 키워드

사전 정의한 의미가 있는 키워드는 따옴표 없이 문자 그대로 나타난다. 예를 들면: auto, smaller 또는 ease-in.

특별한 사례 inherit, initial 그리고 unset

모든 CSS 속성은 전역으로 정의한 inherit, initial 그리고 unset 키워드를 허용한다. 이 키워드는 값 정의에서 표시하지 않고 암시적으로 정의했다.

리터럴

CSS에서 슬래시('/') 또는 쉼표(',')와 같은 일부 문자는 그대로 나타날 수 있고 속성 정의에서 값 구분을 위해 사용한다. 쉼표는 종종 열거하는 값이나 수학처럼 함수의 매개 변수를 구분하는데 사용한다. 슬래시는 종종 의미가 다른 값의 일부를 구분하지만 공통 구문이다. 보통 슬래시는 같은 유형의 다른 속성 값 구성 요소를 구분하기 위한 단축 속성에 사용한다.

두 기호 모두 문자 그대로 값 정의에 나타난다.

데이터 형식

기본 데이터 형식

어떤 데이터들은 CSS 여러 곳에 걸쳐 사용하지만 명세의 모든 값에서 단 한 번 정의한다. 값 이름을 '<'와 '>' 기호로 감싼 형식을 기본 데이터 형식이라고 부른다. : <angle>, <string>, …

비 터미널 데이터 형식

일반적이지 않은 비 터미널 데이터 형식 또한 '<'와 '>'로 감싸기 한다.

비 터미널 데이터 형식은 두 종류가 있다:

  • 같은 이름의 속성을 공유하는 데이터 형식은 따옴표로 묶는다. 이 경우 데이터 형식은 속성과 같은 값 집합을 공유한다. 단축 속성을 정의할 때 종종 사용한다.
  • 같은 이름의 속성을 공유하지 않는 데이터 형식. 이런 데이터 형식은 기본 데이터 형식과 매우 유사하다. 정의하는 실제 위치에서 기본 데이터 유형과 다르다. 이 경우 정의는 일반적으로 이를 사용하는 속성 정의와 물리적으로 매우 유사하다.

Component value combinators

Brackets

Brackets enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to group components to bypass the precedence rules.

bold [ thin && <length> ]

This example matches the following values:

  • bold thin 2vh
  • bold 0 thin
  • bold thin 3.5em

But not:

  • thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it.

Juxtaposition

Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. All juxtaposed components are mandatory and should appear in the exact order.

bold <length> , thin

This example matches the following values:

  • bold 1em, thin
  • bold 0, thin
  • bold 2.5cm, thin
  • bold 3vh, thin

But not:

  • thin 1em, bold, as the entities must be in the expressed order
  • bold 1em thin, as the entities are mandatory; the comma, a literal, must be present
  • bold 0.5ms, thin, as the ms values are not <length>

Double ampersand

Separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.

bold && <length>

This example matches the following values:

  • bold 1em
  • bold 0
  • 2.5cm bold
  • 3vh bold

But not:

  • bold, as both components must appear in the value.
  • bold 1em bold, as both components must appear only one time.

Note: juxtaposition has precedence over the double ampersand, meaning that bold thin && <length> is equivalent to [ bold thin ] && <length>. It describes bold thin <length> or <length> bold thin but not bold <length> thin.

Double bar

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

<'border-width'> || <'border-style'> || <'border-color'>

This example matches the following values:

  • 1em solid blue
  • blue 1em
  • solid 1px yellow

But not:

  • blue yellow, as a component must appear at most one single time.
  • bold, as it isn't a keyword allowed as value of any of the entity.

Note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. It describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component.

Single bar

Separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. This is typically used to separate a list of possible keywords.

<percentage> | <length> | left | center | right | top | bottom

This example matches the following values:

  • 3%
  • 0
  • 3.5em
  • left
  • center
  • right
  • top
  • bottom

But not:

  • center 3%, as only one of the components must be present.
  • 3em 4.5em, as a component must be present at most one time.

Note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold | [ thin || <length> ]. It describes bold, thin, <length>, <length> thin, or thin <length> but not bold <length> as only one entity from each side of the | combinator can be present.

Component value multipliers

A multiplier is a sign that indicate how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

Note that multipliers cannot be added and have all precedence over combinators.

Asterisk (*)

The asterisk multiplier indicates that the entity may appear zero, one or several times.

bold smaller*

This example matches the following values:

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller, and so on.

But not:

  • smaller, as bold is juxtaposed, and must appear before any smaller keyword.

Plus (+)

The plus multiplier indicates that the entity may appear one or several times.

bold smaller+

This example matches the following values:

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller, and so on.

But not:

  • bold, as smaller must appear at least one time.
  • smaller, as bold is juxtaposed and must appear before any smaller keyword.

Question mark (?)

The question mark multiplier indicates that the entity is optional, and must appear zero or one time.

bold smaller?

This example matches the following values:

  • bold
  • bold smaller

But not:

  • bold smaller smaller, as smaller must appear at most one time.
  • smaller, as bold is juxtaposed and must appear before any smaller keyword.

Curly braces ({ })

The curly braces multiplier, enclosing two integers separated by a comma, A and B, indicates that the entity must appear at least A times and at most B times.

bold smaller{1,3}

This example matches the following values:

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller

But not:

  • bold, as smaller must appear at least one time.
  • bold smaller smaller smaller smaller, as smaller must appear at most three times.
  • smaller, as bold is juxtaposed and must appear before any smaller keyword

Hash mark (#)

The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

bold smaller#

This example matches the following values:

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller, and so on.

But not:

  • bold, as smaller must appear at least one time.
  • bold smaller smaller smaller, as the different occurrence of smaller must be separated by commas.
  • smaller, as bold is juxtaposed and must appear before any smaller keyword.

Exclamation point (!)

The exclamation point multiplier after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

[ bold? smaller? ]!

This example matches the following values:

  • bold
  • smaller
  • bold smaller

But not:

  • neither bold nor smaller, as one of them must appear.
  • smaller bold, as bold is juxtaposed and must appear before the smaller keyword.
  • bold smaller bold, as bold and smaller may only appear once.

요약

기호 이름 설명 예제
결합 기호
병치(나열) 구성 요소가 필수이고 순서에 따라 나타남 solid <length>
&& 더블 앰퍼샌드 구성 요소가 필수이지만 순서에 무관함 <length> && <string>
|| 더블 바 구성 요소가 하나 이상 나타나고 순서에 무관함 <'border-image-outset'> || <'border-image-slice'>
| 싱글 바 구성 요소가 정확히 하나만 나타남 smaller | small | normal | big | bigger
[ ] 대괄호(브라켓스) 선행 규칙을 무시하기 위한 구성 요소 그룹 bold [ thin && <length> ]
곱수 기호
곱수 없음 정확히 한 번 solid
* 별표(애스터리스크) 0 또는 그 이상 bold smaller*
+ 더하기 기호 1 또는 그 이상 bold smaller+
? 물음표 0 또는 1(즉, 선택할 수 있다는 뜻) bold smaller?
{A,B} 중괄호(컬리 브레이스) 최소 A회, 최대 B bold smaller{1,3}
# 해시 1 또는 그 이상, 단 각 항목을 쉼표(',')로 구분 bold smaller#
! 느낌표 그룹은 최소 1개의 값을 제시해야 한다. [ bold? smaller? ]!

명세

명세 상태 참고
CSS Values and Units Module Level 3
The definition of 'Value definition syntax' in that specification.
Candidate Recommendation 해시 곱수 기호를 추가했다.
CSS Level 2 (Revision 1)
The definition of 'Value definition syntax' in that specification.
Recommendation 더블 앰퍼샌드 결합 기호를 추가했다.
CSS Level 1
The definition of 'Value definition syntax' in that specification.
Recommendation 최초 정의

참고