값 정의 구문

구성 요소 값 유형

키워드

일반 키워드

사전 정의된 의미가 있는 키워드는 따옴표 없이 문자 그대로 나타납니다. 예시로는 auto, smaller, ease-in이 있습니다.

특별 키워드: inherit, initial, unset

모든 CSS 속성은 전역으로 정의한 inherit, initial, unset 키워드를 허용합니다. 세 키워드는 값 정의에 나타나지 않으며 암시적으로 정의됩니다.

리터럴

CSS에서 빗금('/')과 쉼표(',')와 같은 일부 문자는 그대로 나타날 수 있고, 속성 정의에서 값 구분을 위해 사용합니다. 쉼표는 종종 열거하는 값이나 수학형 함수의 매개변수를 구분할 때 사용합니다. 빗금은 의미가 다르지만 구문이 같은 값을 분리할 때 종종 사용합니다. 보통 빗금은 단축 속성에서 자료형이 같은 서로 다른 속성의 값을 구분할 때 쓰입니다.

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

자료형

기본 자료형

어떤 종류의 데이터는 CSS의 전반에서 사용하며, 명세의 모든 값에 대해 한 번만 정의합니다. 이런 데이터의 자료형을 "기본 자료형"이라고 부르며, <angle>과 <string>처럼 이름을 '<'와 '>' 기호로 감싸서 표현합니다.

비 말단 자료형

보다 덜 흔한 자료형인 "비 말단 자료형" 역시 '<'와 '>'로 감쌉니다.

비 말단 자료형에는 두 종류가 존재합니다.

• 어떤 속성과 같은 이름을 공유하는 자료형으로, 이름을 따옴표로 감싸는 경우. 이 자료형의 값은 해당 속성이 허용하는 값과 동일합니다. 많은 경우 단축 속성에서 사용합니다.
• 다른 속성과 이름을 공유하지 않는 자료형. 기본 자료형과 매우 유사하며, 차이점은 이 자료형의 정의가 어디에 되어있나 정도입니다. 기본 자료형과는 달리, 보통 이 자료형을 사용하는 속성과 가까운 곳에서 정의합니다.

구성 요소 값 결합자

대괄호

대괄호는 다수의 개체, 결합자, 곱수를 감싸서 하나의 구성 요소로 변환합니다. 대괄호는 구성 요소를 묶어서 우선순위 규칙을 우회할 때 사용합니다.

bold [ thin && <length> ]

위의 예제는 다음의 값과 일치합니다.

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

하지만 다음과는 일치하지 않습니다.

• thin bold 3em. bold를 대괄호로 정의한 구성 요소와 병치했기 때문에 반드시 그 앞에 나타나야 합니다.

병치

여러 단어, 리터럴, 자료형을 한 개 이상의 공백으로만 구분해서 나란히 배치하는 것을 병치라고 합니다. 병치한 모든 구성 요소는 필수이며 정확히 순서 그대로 나타나야 합니다.

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>가 아닙니다.

이중 앰퍼샌드

두 개 이상의 구성 요소를 이중 앰퍼샌드, &&로 구분하면 모든 개체가 필수지만 순서는 상관 없음을 의미합니다.

bold && <length>

위의 예제는 다음의 값과 일치합니다.

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

하지만 다음과는 일치하지 않습니다.

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

이중 바

두 개 이상의 구성 요소를 이중 바, ||로 구분하면 모든 개체 중 적어도 하나는 나타나야 하고 순서는 상관하지 않습니다. 보통 단축 속성의 여러 값을 정의할 때 사용합니다.

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

위의 예제는 다음의 값과 일치합니다.

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

하지만 다음과는 일치하지 않습니다.

• blue yellow, 하나의 구성 요소는 한 번만 나타나야 합니다.
• bold, 이 키워드는 어느 개체에도 속하지 않는 값입니다.

단일 바

두 개 이상의 개체를 단일 바, |로 구분하면 모든 개체 중에서 한 개만이 반드시 존재해야 합니다. 보통 가능한 키워드 값의 목록을 구성할 때 사용합니다.

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

위의 예제는 다음의 값과 일치합니다.

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

하지만 다음과는 일치하지 않습니다.

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

구성 요소 값 배수

배수는 기호로서, 앞의 개체를 몇 번이나 반복할 수 있는지 표시합니다. 배수가 없는 개체는 반드시 단 한 번만 나타나야 합니다.

배수는 거듭 표시할 수 없고, 모든 결합자보다 우선순위가 높습니다.

별표 (*)

별표 배수는 개체가 0번, 한 번, 또는 여러 번 나타날 수 있음을 표시합니다.

bold smaller*

위의 예제는 다음의 값과 일치합니다.

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

하지만 다음과는 일치하지 않습니다.

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

더하기 (+)

더하기 배수는 개체가 한 번 또는 여러 번 나타날 수 있음을 표시합니다.

bold smaller+

위의 예제는 다음의 값과 일치합니다.

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

하지만 다음과는 일치하지 않습니다.

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

물음표 (?)

물음표 배수는 개체가 선택 사항이며, 반드시 0번 또는 한 번만 나타나야 함을 표시합니다.

bold smaller?

위의 예제는 다음의 값과 일치합니다.

• bold
• bold smaller

하지만 다음과는 일치하지 않습니다.

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

중괄호 ({ })

중괄호 배수는 쉼표로 구분한 두 개의 정수, A와 B를 포함하며 개체가 최소 A번, 최대 B번 나타나야 함을 표시합니다.

bold smaller{1,3}

위의 예제는 다음의 값과 일치합니다.

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

하지만 다음과는 일치하지 않습니다.

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

해시 (#)

해시 배수는 (더하기 배수처럼) 개체가 한 번 또는 여러 번 나타날 수 있지만, 서로 쉼표로 구분해야 함을 표시합니다.

bold smaller#

위의 예제는 다음의 값과 일치합니다.

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

하지만 다음과는 일치하지 않습니다.

• bold, smaller는 적어도 한 번 나타나야 합니다.
• bold smaller smaller smaller, 각각의 smaller를 쉼표로 구분해야 합니다.
• smaller, bold는 병치이기 때문에 smaller 키워드 앞에 반드시 나타나야 합니다.

느낌표 (!)

그룹 뒤에 표시하는 느낌표 배수는 그룹이 반드시 존재해야 하며, 그룹 내 항목의 문법으로 인해 전체 콘텐츠가 생략 가능한 형태더라도 최소한 하나의 값은 생성해내야 함을 나타냅니다.

[ bold? smaller? ]!

위의 예제는 다음의 값과 일치합니다.

• bold
• smaller
• bold smaller

하지만 다음과는 일치하지 않습니다.

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

요약

명세