값 정의 구문

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

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

구성 요소 값 유형

키워드(Keywords)

일반 키워드

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

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

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

리터럴(Literals)

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

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

데이터 형식(Data types)

기본 데이터 형식

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

비 터미널 데이터 형식

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

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

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

구성 요소 값 결합 기호

대괄호(Brackets)

대괄호는 몇몇 엔티티, 결합 기호, 곱수 기호를 감싼 후 그것들을 단일 구성 요소로 변환한다. 대괄호는 선행 규칙을 무시하기 위한 구성 요소 그룹으로 사용한다.

bold [ thin && <length> ]

이 예제는 다음 값과 일치한다:

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

하지만 다음 값과 일치하지 않음:

  • thin bold 3em, bold는 대괄호로 정의한 구성 요소와 나란히 배치했기 때문에 대괄호로 정의한 구성 요소 앞에 나타나야 한다.

병치(Juxtaposition)

여러 단어, 리터럴, 데이터 형식을 하나 이상의 공백으로 구분해서 나란히 배치하는 것을 병치라고 한다. 모든 병치 구성 요소는 필수이고 정확한 순서로 표시해야 한다.

bold <length> , thin

이 예제는 다음 값과 일치한다:

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

하지만 다음 값과 일치하지 않음:

  • thin 1em, bold, 엔티티는 표시 순서에 따라 나타나야 한다.
  • bold 1em thin, 모든 엔티티가 필수다. 리터럴인 콤마 기호가 나타나야 한다.
  • bold 0.5ms, thin, ms 값은 <length>가 아니다.

이중 앰퍼샌드(Double ampersand)

둘 이상의 구성 요소를 이중 앰퍼샌드 &&로 구분하면 모든 엔티티가 필수지만 어떤 순서로든 나타날 수 있음을 의미한다.

bold && <length>

이 예제는 다음 값과 일치한다:

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

하지만 다음 값과 일치하지 않음:

  • bold, 두 구성 요소가 모두 값에 나타나야 한다.
  • bold 1em bold, 두 구성 요소는 한 번씩만 나타나야 한다.

참고: 병치는 이중 앰퍼샌드보다 우선순위가 높다. 즉 bold thin && <length>는 [ bold thin ] && <length>와 같다. 이것을 bold thin <length> 또는 <length> bold thin으로 표현할 수 있지만 bold <length> thin으로 표현할 수는 없다.

이중 바(Double bar)

둘 이상의 구성 요소를 이중 바 ||로 구분하면 모든 엔티티가 선택이라는 것을 의미한다. 적어도 하나가 나타나고 어떤 순서로든 나타날 수 있다. 보통 단축 속성에서 다른 값을 정의할 때 사용한다.

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

이 예제는 다음 값과 일치한다:

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

하지만 다음 값과 일치하지 않음:

  • blue yellow, 구성 요소는 한 번만 나타나야 한다.
  • bold, 키워드가 어떤 엔티티의 유효한 값도 아니다.

참고: 이중 앰퍼샌드는 이중 바보다 우선순위가 높다. bold || thin && <length>bold || [ thin && <length> ]와 같다. 이것을 bold 또는 thin <length> 또는 bold thin <length> 또는 thin <length> bold로 표현할 수 있지만 <length> bold thin 에서 bold는 나타날 수 없다. bold를 생략하지 않을 거라면 thin && <length> 구성 요소 이전 또는 다음에 배치해야 한다.

단일 바(Single bar)

둘 이상의 엔티티를 단일 바 |로 구분하면 모든 엔티티가 단일 선택이라는 것을 의미한다. 정확히 하나의 선택이 나타나야 한다. 보통 키워드 후보 목록을 구분하는데 사용한다.

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

이 예제는 다음 값과 일치한다:

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

하지만 다음 값과 일치하지 않음:

  • center 3%, 하나의 구성 요소만 나타나야 한다.
  • 3em 4.5em, 구성 요소는 한 번만 나타나야 한다.

참고: 이중 바는 단일 바보다 우선순위가 높다. bold | thin || <length>는 bold | [ thin || <length> ]와 같다. 이것을 bold 또는 thin 또는 <length> 또는 <length> thin 또는 thin <length>로 표현할 수 있지만 bold <length>로 표현할 수 없다. 왜냐하면 | 결합 기호 좌우로부터 단 하나의 엔티티만 표현할 수 있기 때문.

구성 요소 값 곱수 기호

곱수 기호는 선행 엔티티를 몇 회나 반복할 수 있는지 나타낸다. 곱수 기호가 없으면 엔티티는 정확히 한 번 나타난다.

곱수 기호는 거듭 표시할 수 없고 다른 모든 결합 기호보다 우선순위가 높다.

별표 (*)

애스터리스크 곱수 기호0회, 1회 또는 여러 회 나타날 수 있다는 것을 의미한다. 

bold smaller*

이 예제는 다음 값과 일치한다:

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller 등등.

하지만 다음 값과 일치하지 않음:

  • smaller, bold는 병치이기 때문에 smaller 키워드 앞에 반드시 나타나야 한다.

더하기 (+)

더하기 곱수 기호는 엔티티가 1회 또는 여러 회 나타날 수 있다는 것을 의미한다.

bold smaller+

이 예제는 다음 값과 일치한다:

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller 등등.

하지만 다음 값과 일치하지 않음:

  • boldsmaller는 적어도 한 번 나타나야 한다.
  • smaller, bold는 병치이기 때문에 smaller 키워드 앞에 반드시 나타나야 한다.

물음표 (?)

물음표 곱수 기호는 엔티티가 선택이고 0회 또는 1회 나타난다는 것을 의미한다.

bold smaller?

이 예제는 다음 값과 일치한다:

  • bold
  • bold smaller

하지만 다음 값과 일치하지 않음:

  • bold smaller smaller, smaller는 최대 한 번만 나타나야 한다.
  • smallerbold는 병치이기 때문에 smaller 키워드 이전에 반드시 나타나야 한다.

중괄호 ({ })

중괄호 곱수 기호는 콤마로 구분한 정수 두 개를 감싼다. 두 정수를 각각 A와 B라고 칭할 때 엔티티는 적어도 A회 그리고 최대 B회 나타나야 한다는 것을 의미한다.

bold smaller{1,3}

이 예제는 다음 값과 일치한다:

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

하지만 다음 값과 일치하지 않음:

  • bold, smaller는 적어도 한 번은 나타나야 한다.
  • bold smaller smaller smaller smallersmaller는 최대 3회까지만 나타나야 한다.
  • smallerbold는 병치이기 때문에 smaller 키워드 이전에 반드시 나타나야 한다.

해시 (#)

해시 곱수 기호는 엔티티를 1회 또는 여러회 반복(더하기 곱수 기호와 동일)할 수 있다는 것을 의미한다. 단, 각 엔티티를 콤마(',')로 구분한다.

bold smaller#

이 예제는 다음 값과 일치한다:

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller, 등등.

하지만 다음 값과 일치하지 않음:

  • boldsmaller는 적어도 한 번은 나타나야 한다.
  • bold smaller smaller smaller, 각각의 smaller는 콤마로 구분해야 한다.
  • smallerbold는 병치이기 때문에 smaller 키워드 이전에 반드시 나타나야 한다.

느낌표 (!)

그룹 뒤 느낌표 곱수 기호는 그룹이 필수라는 것을 의미한다. 그룹 안에서 전체 내용 생략을 허용하는 문법이 있더라도 최소한 하나의 값을 제시해야 한다. 그룹은 적어도 하나의 구성 소요 값은 생략할 수 없다.

[ bold? smaller? ]!

이 예제는 다음 값과 일치한다:

  • bold
  • smaller
  • bold smaller

하지만 다음 값과 일치하지 않음:

  • bold도 없고 smaller도 없는 경우, 적어도 하나는 나타나야 한다.
  • smaller bold, bold는 병치이기 때문에 smaller 키워드 이전에 반드시 나타나야 한다.
  • bold smaller boldbold와 smaller는 단 한 번만 나타나야 한다.

요약

기호 이름 설명 예제
결합 기호
병치 구성 요소가 필수이고 순서에 따라 나타남 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 최초 정의

참고