CSS 값 및 단위 모듈 레벨 3

1. 소개

각 CSS 속성의 값 정의 필드는 키워드, 데이터 타입(<와 > 사이에 나타남), 그리고 이들이 어떻게 조합될 수 있는지에 대한 정보를 포함할 수 있습니다. 여러 속성에서 사용할 수 있는 일반 데이터 타입(<length>이 가장 널리 사용됨)은 이 명세에서 설명하며, 더 구체적인 데이터 타입(예: <spacing-limit>)은 해당 모듈에서 설명합니다.

1.1. 모듈 상호작용

이 모듈은 [CSS2]의 1.4.2.1, 4.3, 그리고 A.2 섹션의 데이터 타입 정의를 대체하고 확장합니다.

2. 값 정의 문법

여기서 설명된 값 정의 문법은 CSS 속성(및 CSS의 다른 많은 부분의 올바른 문법)을 위한 유효 값 집합을 정의하는 데 사용됩니다. 이렇게 기술된 값은 하나 이상의 구성 요소를 가질 수 있습니다.

2.1. 구성 값 타입

구성 값 타입은 여러 방식으로 지정됩니다:

1. 키워드 값(auto, disc 등)처럼, 따옴표 없이 그대로 나타납니다(예: auto).

2. 기본 데이터 타입, <와 > 사이에 나타납니다(예: <length>, <percentage> 등). 숫자 데이터 타입의 경우, 이 타입 표기법은 아래에서 설명하는 대괄호 범위 표기법을 사용하여 범위 제한을 주석으로 달 수 있습니다.

3. 속성 값 범위, 속성과 동일한 패턴의 값을 나타냅니다. 이들은 속성 이름을 따옴표로 감싸고, <와 > 사이에 작성합니다. 예: <'border-width'>, <'background-attachment'> 등.

   이 타입들은 CSS 전역 키워드 (inherit 등)를 포함하지 않습니다. 또한, 속성의 값 문법이 쉼표로 구분된 반복인 경우, 해당 타입은 최상위 쉼표 구분 목록 반복자를 포함하지 않습니다. (예: pairing이라는 속성이 [ <custom-ident> <integer>? ]#로 정의되어 있다면, <'pairing'>은 [ <custom-ident> <integer>? ]과 같으며, [ <custom-ident> <integer>? ]#과 같지 않습니다.)\

   왜 반복자를 제거하나요?

   최상위 반복자는 이러한 값 타입에서 제거되는데, 최상위 쉼표 구분 반복은 대부분 조정 목록 속성에 사용되며, 여러 속성을 하나의 단축 속성으로 합칠 때, 반복자가 없는 문법이 필요해서 직접 쉼표 구분 반복을 생성할 수 있습니다.

   이 특별 처리가 없다면, 각 롱핸드 속성마다 내부 값만을 위한 임시 생산식을 정의해야 하며, 이는 전체 문법을 이해하기 어렵게 만듭니다.

4. 함수 표기와 그 인자. 함수 이름 다음에 빈 괄호 쌍을 붙여, <와 > 사이에 작성합니다. 예: <calc()>, 그리고 해당 이름의 함수 표기를 참조합니다.

5. 기타 non-terminal. non-terminal의 이름을 <와 > 사이에 작성합니다. 예: <spacing-limit>. <border-width>와 <'border-width'>의 차이점을 참고하세요: 후자는 border-width 속성의 문법을 나타내고, 전자는 다른 곳에서 명시적 확장이 필요합니다. non-terminal의 정의는 대개 명세에서 처음 등장하는 곳 근처에 위치합니다.

일부 속성 값 정의에는 슬래시(/), 쉼표(,), 괄호 등이 리터럴로 포함되기도 합니다. 이들은 해당 토큰을 나타냅니다. 구성 값에 나타날 수 있는 다른 키워드가 아닌 리터럴 문자(예: “+”)는 반드시 따옴표로 감싸서 작성해야 합니다.

쉼표 문법에서 지정된 쉼표는 일부 상황에서 암묵적으로 생략 가능합니다. 문법에서 선택적 항목을 구분하는 데 사용될 때, 속성이나 기타 CSS 값의 최상위 목록, 또는 함수의 인자 목록에서, 다음과 같은 경우에는 문법상 지정된 쉼표를 생략해야 합니다:

• 쉼표 앞의 모든 항목이 생략된 경우
• 쉼표 뒤의 모든 항목이 생략된 경우
• 여러 개의 쉼표가 인접하게 될 경우(공백/주석 무시), 두 쉼표 사이의 항목이 생략된 경우.

example( first? , second? , third? )

모든 CSS 속성은 CSS 전역 키워드 값을 속성 값의 유일한 구성 요소로도 허용합니다. 가독성을 위해, 속성 값 문법 정의에는 이를 명시적으로 나열하지 않습니다. 예를 들어, border-color의 전체 값 정의(CSS Cascading and Inheritance Level 3 기준)는 <color>{1,4} | inherit | initial | unset이며 (실제로는 <color>{1,4}로만 나열됩니다).

참고: 이는 일반적으로, 이러한 키워드와 다른 구성 값들을 같은 선언에 조합하는 경우 선언이 유효하지 않음을 의미합니다. 예시: background: url(corner.png) no-repeat, inherit;는 유효하지 않습니다.

2.2. 구성 값 조합자

구성 값들은 다음과 같이 속성 값으로 배열될 수 있습니다:

• 구성 요소를 나란히 배치하면 모두 주어진 순서대로 반드시 포함되어야 합니다.
• 더블 앰퍼샌드(&&)는 둘 이상의 구성 요소를 구분하며, 모든 요소가 어떤 순서로든 반드시 포함되어야 합니다.
• 더블 바(||)는 둘 이상의 옵션을 구분: 하나 이상의 옵션이 어떤 순서로든 반드시 포함되어야 합니다.
• 바(|)는 두 개 이상의 대안을 구분: 반드시 하나만 포함되어야 합니다.
• 대괄호([ ])는 그룹화를 위해 사용됩니다.

나란히 배치하는 것이 더블 앰퍼샌드보다 강하고, 더블 앰퍼샌드는 더블 바보다 강하며, 더블 바는 바보다 더 강합니다. 따라서 아래 두 줄은 동등합니다:

  a b   |   c ||   d &&   e f
[ a b ] | [ c || [ d && [ e f ]]]

순서가 바뀔 수 있는 조합자(||, &&)의 경우, 문법의 순서는 중요하지 않습니다: 같은 그룹 내의 구성 요소들은 어떤 순서로든 섞어 쓸 수 있습니다. 따라서 아래 두 줄은 동등합니다:

a || b || c
b || a || c

참고: 조합자는 결합 법칙이 성립하지 않으므로 그룹화가 중요합니다. 예를 들어, a || b || c와 a || [ b || c ]는 서로 다른 문법입니다: 첫 번째는 b a c와 같은 값을 허용하지만, 두 번째는 허용하지 않습니다.

2.3. 구성 값 반복자

모든 타입, 키워드, 또는 괄호로 묶인 그룹 뒤에는 다음과 같은 수정자를 붙일 수 있습니다:

• 별표(*)는 앞의 타입, 단어, 또는 그룹이 0회 이상 반복됨을 나타냅니다.
• 플러스(+)는 앞의 타입, 단어, 또는 그룹이 1회 이상 반복됨을 나타냅니다.
• 물음표(?)는 앞의 타입, 단어, 또는 그룹이 선택 사항임(0회 또는 1회)임을 나타냅니다.
• 중괄호 안의 단일 숫자({A})는 앞의 타입, 단어, 또는 그룹이 A회 반복됨을 나타냅니다.
• 중괄호 안 쉼표로 구분된 두 숫자({A,B})는 앞의 타입, 단어, 또는 그룹이 최소 A회, 최대 B회 반복됨을 나타냅니다. B를 생략({A,})하면, 최소 A회 반복이 요구되고, 반복 횟수의 상한은 없습니다.
• 해시(#) (#)는 앞의 타입, 단어, 또는 그룹이 쉼표로 구분된 토큰들로 1회 이상 반복됨을 나타냅니다 (쉼표 주위에는 공백 또는 주석이 있을 수 있습니다). 위의 중괄호 표기와 함께 사용할 수 있으며, 정확히 몇 번 반복될지 지정할 수 있습니다, 예: <length>#{1,4}.
• 느낌표(!)는 그룹 뒤에 붙여 해당 그룹이 필수임을 나타내며, 반드시 하나 이상의 값을 생성해야 합니다; 그룹 내 항목의 문법상 전체 생략이 가능하더라도, 최소한 하나의 구성 값은 생략할 수 없습니다.

+와 # 반복자는 +#처럼 중첩할 수 있습니다; 마찬가지로 #와 ? 반복자는 #?처럼 중첩할 수 있습니다. 이러한 중첩은 앞의 반복자 결과에 뒤의 반복자를 적용하는 것을 의미합니다. (이 중첩은 그룹화를 통해서도 표현할 수 있지만, 복잡한 문법에서는 괄호의 수가 지나치게 많아질 수 있습니다.)

반복되는 구성 값(*, +, #로 표시)에는 UA가 최소 20회 반복을 지원해야 합니다. 속성 값이 지원 횟수보다 많이 반복되면, 해당 선언은 무효인 것처럼 무시되어야 합니다.

2.4. 조합자 및 반복자 패턴

여러 독립적인 구성 값들을 특정 개수와 순서로 조합하는 데에는 몇 가지 일반적인 방식이 있습니다. 특히, 구성 값 집합에서 작성자가 0개 이상, 1개 이상, 또는 모두를, 그리고 문법에 지정된 순서대로 또는 어떤 순서로든 선택할 수 있어야 하는 경우가 자주 있습니다.

이 모든 경우는 조합자와 반복자의 간단한 패턴으로 쉽게 표현할 수 있습니다:

모든 "임의 순서"의 경우는 조합자를 사용해 표현하며, "순서대로"의 경우는 모두 나란히 배치하는 변형입니다.

2.5. 구성 값과 공백

별도의 지정이 없는 한, 공백 및/또는 주석은 위의 조합자와 반복자로 결합된 구성요소의 앞, 뒤, 그리고 사이에 나타날 수 있습니다.

참고: 많은 경우에서, 구성 요소를 서로 구분하기 위해 구성 요소 사이에 공백이 반드시 필요합니다. 예를 들어, 1em2em 값은 하나의 <dimension-token>으로 해석되며, 숫자 1과 식별자 em2em으로 인식되어, 잘못된 단위가 됩니다. 이 경우에는 2 앞에 공백이 있어야 1em과 2em 두 길이로 올바르게 해석됩니다.

2.6. 속성 값 예시

아래는 각 속성에 해당하는 값 정의 필드의 예시입니다.

3. 텍스트 데이터 타입

텍스트 데이터 타입에는 여러 키워드와 식별자, 그리고 문자열(<string>) 및 URL(<url>)이 포함됩니다.

CSS 식별자는 일반적으로 <ident>으로 표기하며, <ident-token> 문법에 맞는 문자 시퀀스로 구성됩니다. [CSS-SYNTAX-3] 식별자는 따옴표로 감싸서는 안 되며; 그렇지 않으면 문자열로 해석됩니다. CSS 속성은 두 종류의 식별자를 허용합니다: 미리 정의된 키워드와 작성자 정의 식별자입니다.

참고: <ident> 생산식은 속성 값 정의를 위한 것이 아니며—​<custom-ident>를 대신 사용해야 합니다. 이는 다른 문법 구조를 정의할 때 편의를 위해 제공됩니다.

3.1. 미리 정의된 키워드

값 정의 필드에서는 미리 정의된 의미를 가진 키워드가 그대로 나타납니다. 키워드는 식별자이며 ASCII 대소문자 구분 없이 해석됩니다(즉, [a-z]와 [A-Z]는 동일하게 취급).

Value: collapse | separate

table { border-collapse: separate }

3.1.1. CSS 전역 키워드: initial, inherit 및 unset

위에서 정의된 대로, 모든 속성은 CSS 전역 키워드를 허용하며, 이는 모든 CSS 속성에 공통적으로 적용되는 값 계산을 나타냅니다. 이러한 키워드는 CSS Cascading and Inheritance Module에서 규범적으로 정의됩니다.

다른 CSS 명세에서 추가적인 CSS 전역 키워드를 정의할 수 있습니다.

3.2. 작성자 정의 식별자: <custom-ident> 타입

일부 속성은 임의의 작성자 정의 식별자를 구성 값으로 허용합니다. 이 일반 데이터 타입은 <custom-ident>로 표기하며, 속성의 값 정의에서 미리 정의된 키워드로 잘못 해석되지 않을 모든 유효한 CSS 식별자를 나타냅니다. 이러한 식별자는 ASCII 범위에서도 완전히 대소문자를 구분합니다 (예: example과 EXAMPLE은 서로 다른 별개의 사용자 정의 식별자입니다).

CSS 전역 키워드는 <custom-ident>로 유효하지 않습니다. default 키워드는 예약어로, <custom-ident>로도 유효하지 않습니다. <custom-ident>를 사용하는 명세는 <custom-ident>에서 제외되는 키워드가 있다면 반드시 명확하게 지정해야 합니다—예를 들어 해당 속성 값 정의에 있는 모든 미리 정의된 키워드는 제외된다고 밝히는 식으로. 제외된 키워드는 모든 ASCII 대소문자 조합에서도 제외됩니다.

속성 값에서 위치적으로 모호한 키워드를 구문 분석할 때, <custom-ident> 생산식은 다른 미완성 생산식이 해당 키워드를 주장하지 않을 때만 해당 키워드를 주장할 수 있습니다.

참고: <custom-ident>로 문법을 설계할 때, <custom-ident>은 항상 "위치적으로 모호하지 않게" 설계되어, 어떤 키워드 값과도 충돌할 수 없도록 해야 합니다.

3.3. 인용 문자열: <string> 타입

문자열은 <string>으로 표시합니다. 리터럴로 작성할 때, 큰따옴표 또는 작은따옴표로 둘러싸인 문자 시퀀스로 구성되며, <string-token> 생산식과 일치합니다. (CSS Syntax Module [CSS-SYNTAX-3] 참고)

content: "this is a 'string'.";
content: "this is a \"string\".";
content: 'this is a "string".';
content: 'this is a \'string\'.'

문자열은 심미적 또는 기타 이유로 여러 줄에 나눠 쓸 수 있지만, 이런 경우 줄바꿈 자체는 역슬래시(\)로 이스케이프해야 합니다. 줄바꿈은 이후 문자열에서 제거됩니다. 예를 들면 아래 두 선택자는 완전히 동일합니다:

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

문자열은 직접 줄바꿈을 표현할 수 없으므로, 문자열 내에 줄바꿈을 포함하려면 "\A" 이스케이프를 사용하세요. (16진수 A는 유니코드(U+000A)의 줄바꿈 문자이지만, CSS에서는 "newline"의 일반 개념을 나타냅니다.)

3.4. 리소스 위치자: <url> 타입

url() 함수 표기는 <url>로 표시되며, URL을 나타냅니다. URL은 리소스를 가리키는 포인터입니다. <url>의 일반 문법은 다음과 같습니다:

<url> = url( <string> <url-modifier>* )

body { background: url("http://www.example.com/pinkish.gif") }

url()은 URL 값 주위에 따옴표 없이도 작성할 수 있으며, 이 경우 특별히 구문 분석되어 <url-token>으로 처리됩니다; 자세한 내용은 CSS Syntax 3 § 4.3.6 url 토큰 소비 참고. [CSS-SYNTAX-3]

background: url("http://www.example.com/pinkish.gif");
background: url(http://www.example.com/pinkish.gif);

참고: 따옴표 없는 url() 문법은 <url-modifier> 인자를 받을 수 없고, 이스케이프 요구 사항이 추가됩니다: 괄호, 공백 문자, 작은따옴표(')와 큰따옴표(")가 URL에 포함될 경우 역슬래시로 이스케이프해야 합니다. 예: url(open\(parens), url(close\)parens). (따옴표로 감싼 <string> url()에서는 줄바꿈과 문자열을 감싼 따옴표만 이스케이프하면 됩니다.) URL의 종류에 따라 이러한 문자를 URL-이스케이프로 작성할 수도 있습니다 (예: url(open%28parens) 또는 url(close%29parens)) [URL]에서 설명된 대로.

일부 CSS 문맥(예: @import)에서는 <url>을 함수 래퍼 없이 순수 <string>으로도 표현할 수 있습니다. 이 경우 문자열은 해당 문자열을 담은 url() 함수와 동일하게 동작합니다.

@import url("base-theme.css");
@import "base-theme.css";

3.4.1. 상대 URL

리소스의 절대 위치에 의존하지 않는 모듈형 스타일 시트를 만들기 위해서는 상대 URL을 사용해야 합니다. 상대 URL([URL]에서 정의)은 기본 URL을 이용해서 전체 URL로 해석됩니다. RFC 3986, section 3에는 이 과정을 위한 규범적 알고리즘이 정의되어 있습니다. CSS 스타일 시트의 경우 기본 URL은 스타일 시트 자체의 URL이며, 스타일링되는 원본 문서의 URL이 아닙니다. 문서 내에 포함된 스타일 시트는 그 컨테이너에 연관된 기본 URL을 가집니다.

참고: HTML 문서의 경우 기본 URL은 변경될 수 있습니다.

<url>이 속성의 계산값에 나타나면, 앞서 설명한 대로 절대 URL로 해석됩니다. UA(user agent)가 절대 URL로 해석할 수 없는 URL의 계산값은 지정값입니다.

body { background: url("tile.png") }

http://www.example.org/style/basic.css

http://www.example.org/style/tile.png

3.4.1.1. 프래그먼트 URL

브라우저의 URL 처리 특이점을 우회하기 위해 CSS는 프래그먼트만 있는 URL에 대해 특별한 동작을 합니다.

url()의 값이 U+0023 넘버 기호(#) 문자로 시작하면, 일반 URL과 동일하게 구문 분석하지만, local url flag도 url()에 설정합니다.

url()이 local url flag가 설정된 상태로 매칭될 때, URL의 프래그먼트만을 사용하고, 해당 프래그먼트를 상대 URL 기준이 되는 현재 문서에 대해 해석합니다. 이 참조는 항상 동일 문서 참조로 처리되어야 하며 (크로스 문서 참조가 아님).

CSS 값 직렬화 시 url()에 local url flag가 설정되어 있으면, 프래그먼트만 직렬화해야 합니다.

3.4.2. 빈 URL

<url>의 값이 빈 문자열인 경우 (예: url("") 또는 url()), 해당 url은 잘못된 리소스로 해석해야 합니다 (예: about:invalid과 유사).

계산값은 url("")이며, 직렬화 시에도 동일하게 직렬화되어야 합니다.

참고: 이것은 웹 플랫폼의 다른 곳에서도 리소스 임베딩 시 빈 url의 동작과 일치하며, url() 값이 빈 상태로 남아 있을 때, 실수로 인해 스타일시트 또는 호스트 문서가 반복적으로 재요청되는 과도한 트래픽을 방지합니다. 이는 거의 항상 해당 url()이 사용되는 곳에서 잘못된 리소스입니다. 웹 플랫폼에서의 링크는 빈 url을 허용하지만, CSS가 하이퍼링크 제어 기능을 갖추게 된다면 이런 제한은 그 컨텍스트에서 완화될 수 있습니다.

3.4.3. URL 수정자

url() 함수는 추가 <url-modifier>를 지정할 수 있으며, URL의 의미나 해석에 영향을 줍니다. <url-modifier>는 <ident> 또는 함수 표기입니다.

이 명세는 <url-modifier>를 정의하지 않으며, 다른 명세에서 정의할 수 있습니다.

참고: <url>이 따옴표 없이 작성되거나 url() 함수 래퍼 없이 작성된 경우, <url-modifier>를 받을 수 없습니다.

4. 숫자 데이터 타입

숫자 데이터 타입은 수량, 인덱스, 위치 등과 같은 값을 나타내는 데 사용됩니다. 주어진 숫자 값에서 수량(숫자적 측면)을 표현할 때 다양한 문법적 변형이 존재할 수 있지만, 지정값과 계산값은 이러한 변형을 구분하지 않습니다: 추상적인 수량 자체를 나타내며, 문법적 표현 방식과는 무관합니다.

숫자 데이터 타입에는 <integer>, <number>, <percentage>, 그리고 다양한 단위값(<length>, <angle>, <time>, <frequency>, <resolution> 등)이 포함됩니다.

참고: 범용 단위값은 여기서 정의하지만, 일부 다른 모듈에서는 추가 데이터 타입을 정의합니다 (예: [css-grid-1]은 fr 단위를 도입) 그 사용 범위는 더 제한적입니다.

4.1. 범위 제한 및 범위 정의 표기법

속성은 숫자 값을 특정 범위로 제한할 수 있습니다. 값이 허용된 범위를 벗어나면, 별도의 지정이 없는 한, 선언은 무효이며 무시되어야 합니다. 범위 제한은 숫자 타입 표기에서 CSS 대괄호 범위 표기법—​[min,max]—​을 이용해 꺾쇠 괄호 내에서 키워드 뒤에 작성하며, min과 max를 포함한 닫힌 범위를 나타냅니다. 예: <integer [0,10]>은 0부터 10까지(포함) 정수를 의미하며, <angle [0,180deg]>은 0deg부터 180deg까지(단위는 임의) 각도를 의미합니다.

참고: CSS 값은 일반적으로 열린 범위를 허용하지 않으므로, 대괄호 표기만 사용합니다.

CSS는 이론적으로 모든 값 타입에 대해 무한 정밀도와 무한 범위를 지원하지만, 실제 구현에서는 유한한 한계를 가집니다. UA(user agent)는 실질적으로 유용한 범위와 정밀도를 지원해야 합니다. 이상적으로 무제한이어야 하는 극단치는 ∞ 또는 −∞로 표시합니다. 예: <length [0,∞]>는 음수가 아닌 길이를 의미합니다.

범위가 명시되어 있지 않으면, 대괄호 범위 표기법이나 속성 설명에서 범위가 없을 경우, [−∞,∞]가 기본값으로 가정됩니다.

−∞ 또는 ∞ 값은 단위를 사용하더라도 단위 없이 작성해야 합니다. 0 값은 단위 없이 작성해도 되며, 해당 값 타입이 "단위 없는 0"을 허용하지 않더라도 (예: <time>).

참고: 이 문서 작성 시점에는 대괄호 범위 표기법이 새로 도입되었으므로, 대부분의 CSS 명세에서는 범위 제한이 산문으로만 설명되어 있습니다. (예: “음수 값은 허용되지 않는다”, “음수 값은 무효” 등은 [0,∞] 범위를 의미) 이런 설명도 동일하게 구속력을 가집니다.

4.2. 정수: <integer> 타입

정수 값은 <integer>로 표시합니다.

리터럴로 작성할 때, 정수는 하나 이상의 10진수 숫자 0~9로 구성되며, CSS Syntax Module의 <number-token> 생산식의 일부 집합에 해당합니다. [CSS-SYNTAX-3] 정수의 첫 숫자는 - 또는 + 기호로 바로 앞에 부호를 표시할 수 있습니다.

4.3. 실수: <number> 타입

숫자 값은 <number>로 표시하며, 실수를 나타내며, 소수점 이하를 포함할 수 있습니다.

리터럴로 작성할 때, 숫자는 정수이거나, 10진수 숫자 0개 이상, 점(.) 하나, 10진수 숫자 1개 이상으로 이루어집니다; 옵션으로 “e” 또는 “E” 다음에 정수(기수 10의 지수)를 붙여 과학적 표기법으로 끝날 수 있습니다. 이는 <number-token> 생산식과 일치합니다. (CSS Syntax Module [CSS-SYNTAX-3] 참고) 정수와 마찬가지로, 숫자의 첫 글자는 - 또는 + 기호로 바로 앞에 부호를 표시할 수 있습니다.

4.4. 단위가 있는 숫자: 단위값

단위값은 숫자 뒤에 단위 식별자가 붙은 값을 의미하며, <dimension>으로 표시합니다.

리터럴로 작성할 때, 단위값은 숫자 바로 뒤에 단위 식별자가 붙으며, 단위 식별자는 식별자입니다. 이는 <dimension-token> 생산식과 일치합니다. (CSS Syntax Module [CSS-SYNTAX-3] 참고) 키워드와 마찬가지로, 단위 식별자는 ASCII 대소문자 구분 없이 해석됩니다.

CSS는 <dimension>를 이용해 거리(<length>), 시간(<time>), 주파수(<frequency>), 해상도(<resolution>), 기타 수치 등을 지정합니다.

4.4.1. 호환 단위

계산값 직렬화 시 계산값이 [CSSOM]에 해당하면, 호환 단위(정적 곱셈 계수로 변환 가능한 단위, 예: px와 in의 96:1 계수, 또는 font-size 계산값을 기준으로 한 em과 px 등) 그룹 내의 호환 단위들은 하나의 표준 단위로 변환됩니다. 각 호환 단위 그룹은 직렬화에 사용할 표준 단위를 정의합니다.

해결된 값 중 사용값을 직렬화할 때, 길이를 나타내는 모든 값 타입(백분율, 숫자, 키워드 등)은 길이와 호환으로 간주합니다. 미래의 API에서도 사용값을 반환할 경우 거리/시간/주파수 등과 관련된 값을 해당 단위값의 호환 단위로 간주하며, 표준 단위로 변환해야 합니다.

4.5. 백분율: <percentage> 타입

백분율 값은 <percentage>로 표기되며, 다른 기준값에 대한 일부 비율을 나타냅니다.

리터럴로 작성할 때, 백분율은 숫자 바로 뒤에 퍼센트 기호 %가 붙습니다. 이는 <percentage-token> 생산식과 일치하며, CSS Syntax Module [CSS-SYNTAX-3] 기준입니다.

백분율 값은 항상 다른 수량(예: 길이)에 대해 상대적입니다. 백분율을 허용하는 각 속성은 백분율이 참조하는 수량도 정의합니다. 이 수량은 같은 요소의 다른 속성값, 상위 요소의 속성값, 포맷팅 컨텍스트의 측정값 (예: containing block의 너비), 또는 기타 다른 값이 될 수 있습니다.

4.6. 백분율과 단위값 혼합

<percentage>가 같은 단위값과 동일한 수량을 나타낼 수 있고, component value 위치에서 함께 사용될 수 있다면, calc() 표현식에서 조합할 수 있으며, 다음과 같은 편의 표기를 속성 문법에서 사용할 수 있습니다:

<length-percentage>

[ <length> | <percentage> ]와 동일하며, <percentage>는 <length>로 해석됩니다.

<frequency-percentage>

[ <frequency> | <percentage> ]와 동일하며, <percentage>는 <frequency>로 해석됩니다.

<angle-percentage>

[ <angle> | <percentage> ]와 동일하며, <percentage>는 <angle>로 해석됩니다.

<time-percentage>

[ <time> | <percentage> ]와 동일하며, <percentage>는 <time>로 해석됩니다.

참고: 명세에서는 반드시 <percentage>가 단위값과 호환되는 경우에만 문법에서 번갈아 쓰도록 해야 합니다.

참고: 필요에 따라 더 많은 <type-percentage> 생산식이 추가될 수 있습니다. <number-percentage>는 추가되지 않으며, <number>와 <percentage>는 calc()에서 함께 사용할 수 없습니다.

5. 거리 단위: <length> 타입

길이는 거리 측정값을 의미하며, 속성 정의에서는 <length>로 표기합니다. 길이는 단위값입니다.

길이가 0일 때는 단위 식별자를 생략할 수 있습니다 (즉, <number> 0으로 쓸 수 있음). 하지만, 어떤 속성에서 0이 <number> 또는 <length> 모두로 해석될 수 있다면 (예: line-height), 반드시 <number>로 해석해야 합니다.

속성은 길이 값을 특정 범위로 제한할 수 있습니다. 값이 허용된 범위를 벗어나면, 선언은 무효이며 무시되어야 합니다.

일부 속성에서는 음수 길이값을 허용하지만, 이는 레이아웃을 복잡하게 할 수 있으며 구현별로 한계가 있을 수 있습니다. 음수 길이값이 허용되지만 지원할 수 없는 경우, 반드시 지원 가능한 가장 가까운 값으로 변환되어야 합니다.

사용값 길이가 지원될 수 없는 경우, UA는 실제값에서 근사값으로 처리해야 합니다.

길이 단위에는 두 가지 유형이 있습니다: 상대 단위와 절대 단위.

5.1. 상대 길이

상대 길이 단위는 다른 길이에 대해 상대적인 길이를 지정합니다. 상대 단위를 사용한 스타일 시트는 다양한 출력 환경에서 더 쉽게 크기 조절할 수 있습니다.

상대 단위는 다음과 같습니다:

자식 요소는 부모에서 지정된 상대 값을 상속하지 않고, 계산값을 상속합니다.

5.1.1. 폰트 상대 길이: em, ex, ch, rem 단위

폰트 상대 길이는 해당 단위가 사용된 요소의 폰트 메트릭을 참조합니다—​rem의 경우 루트 요소의 메트릭을 참조합니다.

em

해당 요소의 font-size 속성의 계산값과 동일합니다.

예시 규칙:

h1 { line-height: 1.2em }

이 규칙은 h1 요소의 줄 높이가 h1 요소 폰트 크기보다 20% 더 크다는 의미입니다. 반면에:

h1 { font-size: 1.2em }

이 규칙은 h1 요소의 폰트 크기가 h1이 상속받은 계산된 폰트 크기보다 20% 더 크다는 의미입니다.

rem

루트 요소에서 em 단위의 계산값과 동일합니다.

ex 단위

첫 번째 사용 가능한 폰트 [CSS3-FONTS]의 사용된 x-높이와 동일합니다. x-높이는 소문자 "x"의 높이와 같은 경우가 많아서 붙여진 이름입니다. 하지만 ex는 "x"가 없는 폰트에서도 정의됩니다. 폰트의 x-높이는 여러 방법으로 찾을 수 있습니다. 일부 폰트에는 신뢰할 수 있는 x-높이 메트릭이 있습니다. 신뢰할 수 있는 메트릭이 없으면 UA(user agent)는 소문자 글리프의 높이로 x-높이를 추정할 수 있습니다. 한 가지 방법은 소문자 "o" 글리프가 기준선 아래로 얼마나 내려가는지 확인하고, 그 값을 바운딩 박스의 꼭대기에서 빼는 것입니다. x-높이를 결정하는 것이 불가능하거나 비현실적이면, 반드시 0.5em로 간주해야 합니다.

ch 단위

유럽 알파벳/숫자 문자의 일반적인 advance measure를 나타내며, 해당 폰트에서 “0”(ZERO, U+0030) 글리프의 사용된 advance measure로 측정됩니다. (advance measure는 글리프의 advance width 또는 height이며, 해당 요소의 인라인 축에 따라 달라집니다.)

참고: 이 측정은 근사치이며 (모노스페이스 폰트에서는 정확한 값), 좁은 글리프의 advance measure의 한 글자 치수를 기준으로 측정할 수 있게 해줍니다.

참고: 글리프의 advance measure는 writing-mode, text-orientation, 폰트 설정, text-transform, 기타 글리프 선택이나 방향에 영향을 주는 모든 속성에 따라 달라집니다.

“0” 글리프의 치수를 결정하는 것이 불가능하거나 비현실적인 경우에는, 0.5em 너비와 1em 높이로 가정해야 합니다. 따라서 ch 단위는 일반적인 경우에 0.5em으로, 세로로 조판될 때에는 1em으로 대체됩니다 (즉, writing-mode가 vertical-rl 또는 vertical-lr이고 text-orientation이 upright인 경우).

요소 맥락 외에서 사용될 때 (예: 미디어 쿼리 등), 이들 단위는 font 속성의 초기값에 해당하는 폰트 메트릭을 참조합니다. 해당 요소의 font-size 속성값에서 사용할 경우, 이들 단위는 부모 요소의 계산된 폰트 메트릭을 참조하며 (부모가 없으면 font 속성의 초기값에 해당하는 폰트 메트릭을 참조).

폰트 상대 길이는 shaping 없이 계산됩니다.

5.1.2. 뷰포트 백분율 길이: vw, vh, vmin, vmax 단위

뷰포트 백분율 길이는 초기 containing block의 크기에 대해 상대적입니다—​이 값은 뷰포트의 크기(연속 매체인 경우)나 페이지 영역(페이지 매체인 경우)에 따라 결정됩니다. 초기 containing block의 높이나 너비가 변경되면, 이 값들도 그에 맞춰 스케일됩니다. 단, 스크롤바는 존재하지 않는 것으로 가정합니다.

페이지 매체의 경우, 뷰포트 백분율 길이의 정확한 정의는 [CSS3PAGE]에 위임됩니다.

vw 단위

초기 containing block의 너비의 1%와 동일합니다.

아래 예시에서, 뷰포트 너비가 200mm라면 h1 요소의 폰트 크기는 16mm입니다 (즉, (8×200mm)/100).

h1 { font-size: 8vw }

vh 단위

초기 containing block의 높이의 1%와 동일합니다.

vmin 단위

vw와 vh 중 더 작은 값과 동일합니다.

vmax 단위

vw와 vh 중 더 큰 값과 동일합니다.

5.2. 절대 길이: cm, mm, Q, in, pt, pc, px 단위

절대 길이 단위는 서로 고정된 비율로 연결되어 있으며, anchor가 되는 물리적 측정값에 고정됩니다. 출력 환경이 분명할 때 주로 유용합니다. 절대 단위에는 물리 단위(in, cm, mm, pt, pc, Q) 그리고 시각 각도 단위(픽셀 단위)(px)가 포함됩니다:

h1 { margin: 0.5in }      /* 인치 */
h2 { line-height: 3cm }   /* 센티미터 */
h3 { word-spacing: 4mm }  /* 밀리미터 */
h3 { letter-spacing: 1Q } /* 쿼터 밀리미터 */
h4 { font-size: 12pt }    /* 포인트 */
h4 { font-size: 1pc }     /* 파이카 */
p  { font-size: 12px }    /* px */

참고: 출판 분야에서는 2p3처럼 2파이카 3포인트를 의미하는 표기법을 사용하기도 합니다. 이러한 값은 CSS에서 calc(2pc + 3pt)로 작성할 수 있습니다 (자세한 내용은 § 8.1 수식: calc() 참고).

모든 절대 길이 단위는 호환되며, px가 표준 단위입니다.

CSS 디바이스에서는 이런 치수가 anchor unit으로서 아래 방식 중 하나에 고정됩니다:

1. 물리 단위를 물리적 측정값에 연결하거나
2. 픽셀 단위를 참조 픽셀에 연결

일반적인 인쇄 매체에서는 anchor unit으로 물리 단위(인치, 센티미터 등)를 사용하는 것이 좋습니다. 스크린 매체(고해상도 디바이스 포함), 저해상도 디바이스, 비정상적인 시청 거리의 디바이스에서는 anchor unit으로 픽셀 단위를 사용하는 것이 좋습니다. 이러한 디바이스에서는 픽셀 단위가 참조 픽셀에 가장 근접하도록 실제 디바이스 픽셀(device pixel)의 전체 수로 지정하는 것이 권장됩니다.

참고: anchor unit이 픽셀 단위일 경우, 물리 단위가 실제 물리적 치수와 일치하지 않을 수 있습니다. 반대로 anchor unit이 물리 단위일 경우, 픽셀 단위가 device pixel 전체 수로 매핑되지 않을 수 있습니다.

참고: 픽셀 단위와 물리 단위의 정의는 CSS1 및 CSS2의 이전 판과 다릅니다. 특히, 이전 버전의 CSS에서는 픽셀 단위와 물리 단위가 고정 비율로 연결되어 있지 않았습니다: 물리 단위는 항상 물리적 치수에 고정되었고, 픽셀 단위는 참조 픽셀에 가장 근접하도록 변동되었습니다. (이러한 변화는 96dpi 가정에 의존하는 기존 콘텐츠가 너무 많아, 그 가정을 깨면 콘텐츠가 깨졌기 때문에 불가피하게 이루어진 변경입니다.)

참고: 단위는 ASCII 대소문자를 구분하지 않으며, 직렬화 시 소문자로 표기됩니다(예: 1Q는 1q로 직렬화됨).

참조 픽셀은 96dpi의 device pixel 밀도와 팔 길이 거리에서 한 픽셀의 시각 각도를 나타냅니다. 팔 길이의 기준값이 28인치일 때, 시각 각도는 약 0.0213도입니다. 팔 길이 거리에서 읽을 때, 1px는 약 0.26mm(1/96인치)에 해당합니다.

아래 이미지는 시청 거리에 따른 참조 픽셀 크기의 변화를 보여줍니다: 읽는 거리가 71cm(28인치)이면 참조 픽셀은 0.26mm, 읽는 거리가 3.5m(12피트)이면 참조 픽셀은 1.3mm가 됩니다.

두 번째 이미지는 디바이스의 해상도가 픽셀 단위에 미치는 영향을 보여줍니다: 1px×1px 영역은 저해상도 디바이스(일반적인 컴퓨터 디스플레이 등)에서는 한 점으로 표시되지만, 고해상도 디바이스(프린터 등)에서는 동일한 영역이 16점으로 표시됩니다.

디바이스 픽셀은 디바이스 출력에서 전체 색상 범위를 표시할 수 있는 최소 영역 단위입니다. 일반적인 컬러 화면에서는 빨강, 초록, 파랑 서브픽셀을 포함하는 정사각형 또는 직사각형 영역입니다. 일부 비정형 출력은 더 높은 해상도로 일부 색상을 표시하는 등 이 정의를 흐릴 수 있습니다. 이런 디바이스도 "디바이스 픽셀"에 해당하는 개념을 제공합니다.

6. 기타 단위

6.1. 각도 단위: <angle> 타입 및 deg, grad, rad, turn 단위

각도 값은 <dimension>로, <angle>로 표기합니다. 각도 단위 식별자는 다음과 같습니다:

deg

도(degree). 한 원에 360도가 있습니다.

grad

그라디언(gradian, gon, grade)이라고도 합니다. 한 원에 400그라디언이 있습니다.

rad

라디안(radian). 한 원에 2π라디안이 있습니다.

turn

턴(turn). 한 원에 1턴이 있습니다.

예를 들어, 직각은 90deg, 100grad, 0.25turn, 약 1.57rad로 나타낼 수 있습니다.

모든 <angle> 단위는 호환되며, deg가 표준 단위입니다.

참고: 레거시 이유로, <angle>의 일부 사용에서는 0만 써도 0deg를 의미할 수 있습니다. 하지만 일반적으로는 그렇지 않으며, 앞으로 <angle> 타입에서는 이런 일이 발생하지 않습니다.

6.2. 시간 단위: <time> 타입 및 s, ms 단위

시간 값은 단위값으로, <time>으로 표시됩니다. 시간 단위 식별자는 다음과 같습니다:

s

초(second).

ms

밀리초(milliseconds). 1초에 1000밀리초입니다.

모든 <time> 단위는 호환되며, s가 표준 단위입니다.

속성에서 시간 값을 특정 범위로 제한할 수 있습니다. 값이 허용 범위를 벗어나면, 선언은 무효이며 무시되어야 합니다.

6.3. 주파수 단위: <frequency> 타입 및 Hz, kHz 단위

주파수 값은 단위값으로, <frequency>으로 표기합니다. 주파수 단위 식별자는 다음과 같습니다:

Hz

헤르츠(Hertz). 초당 발생 횟수를 나타냅니다.

kHz

킬로헤르츠(kiloHertz). 1킬로헤르츠는 1000헤르츠입니다.

예를 들어, 소리의 음높이를 표현할 때 200Hz(또는 200hz)는 저음, 6kHz(또는 6khz)는 고음입니다.

모든 <frequency> 단위는 호환되며, hz가 표준 단위입니다.

참고: 단위는 ASCII 대소문자 구분하지 않으며, 직렬화 시 소문자로 표기됩니다(예: 1Hz는 1hz로 직렬화됨).

6.4. 해상도 단위: <resolution> 타입 및 dpi, dpcm, dppx 단위

해상도 단위는 단위값으로, <resolution>으로 표기합니다. 해상도 단위 식별자는 다음과 같습니다:

dpi

인치당 점(dots per inch).

dpcm

센티미터당 점(dots per centimeter).

dppx

px 단위당 점(dots per px).

<resolution> 단위는 그래픽 표현에서 단일 "점"의 크기를 나타내며, 이 점들이 얼마나 CSS in, cm, px에 들어가는지를 나타냅니다. 자세한 용도는 resolution 미디어 쿼리([MEDIAQ]) 또는 image-resolution 속성([CSS3-IMAGES]) 참고.

모든 <resolution> 단위는 호환되며, dppx가 표준 단위입니다.

<resolution> 값의 허용 범위에는 항상 음수값이 제외되며, 명시적으로 지정된 범위 외에도 적용됩니다.

CSS in과 CSS px의 1:96 고정 비율로 인해, 1dppx는 96dpi와 동일합니다. 이는 CSS에서 이미지를 표시할 때의 기본 해상도와 일치합니다: image-resolution 참고.

@media (min-resolution: 2dppx) { ... }

7. 다른 곳에서 정의된 데이터 타입

일부 데이터 타입은 별도의 모듈에서 정의됩니다. 이 예시는 여러 명세에서 공통적으로 사용되는 대표적인 타입들을 설명합니다.

7.1. 색상: <color> 타입

<color> 데이터 타입은 [CSS3COLOR]에서 정의됩니다. CSS Color Level 3 또는 그 후속 규격을 지원하는 UA는 <color>를 그에 따라 해석해야 합니다.

7.2. 이미지: <image> 타입

<image> 데이터 타입은 [CSS3-IMAGES]에서 정의됩니다. CSS Images Level 3 또는 그 후속 규격을 지원하는 UA는 <image>를 그에 따라 해석해야 합니다. 아직 CSS Images Level 3을 지원하지 않는 UA는 <image>를 <url>로 해석해야 합니다.

7.3. 2D 위치 지정: <position> 타입

<position> 값은 오브젝트 영역(예: 배경 이미지)이 위치 영역(예: 배경 위치 지정 영역) 내에서 어느 위치에 배치될지 지정합니다. background-position 속성의 정의에 따라 계산 및 해석됩니다. [CSS3-BACKGROUND]

<position> = [
  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right ] && [ top | center | bottom ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ [ left | right ] <length-percentage> ] &&
  [ [ top | bottom ] <length-percentage> ]
]

참고: background-position 속성은 3값 문법도 허용합니다. 하지만 다른 길이나 백분율 구성 요소와 조합할 때 구문 해석이 모호해져서, 일반적으로는 허용하지 않습니다.

직렬화 시 표준 순서는 수평 구성요소가 먼저, 수직 구성요소가 뒤따릅니다.

문법에서 다른 키워드, <length> 또는 <percentage>와 함께 지정된 경우, <position>은 탐욕적으로 파싱되어 가능한 많은 구성 요소를 소비합니다.

8. 함수 표기

함수 표기는 구성 값의 한 종류로, 더 복잡한 타입을 나타내거나 특수 처리를 호출할 수 있습니다. 문법은 함수 이름 바로 뒤에 왼쪽 괄호가 오고 (즉, <function-token>), 괄호 안에 인자들이 오며, 오른쪽 괄호로 끝납니다. 키워드와 마찬가지로 함수 이름은 ASCII 대소문자 구분하지 않음입니다. 공백은 괄호 내부에 허용되지만 선택 사항입니다. 함수는 여러 인자를 받을 수 있으며, 인자들은 CSS 속성 값과 유사한 형식으로 작성됩니다.

참고: 함수 표기 중 일부 레거시 함수(rgba() 등)는 불필요하게 쉼표를 사용하지만, 일반적으로 쉼표는 목록의 항목이나, 문법상 모호할 수 있는 부분을 구분할 때만 사용됩니다. 인자 구분에 쉼표가 사용되면, 그 앞뒤의 공백은 선택 사항입니다.

background: url(http://www.example.org/image);
color: rgb(100, 200, 50 );
content: counter(list-item) ". ";
width: calc(50% - 2em);

8.1. 수식: calc()

calc() 함수는 CSS 숫자 구성 값을 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 등의 수식 표현으로 작성할 수 있게 해줍니다.

calc() 표현식은 내부 수식의 계산 결과를 나타내며, 표준 연산자 우선순위 규칙에 따라 평가됩니다 (*와 /가 +와 -보다 우선하며, 그 외에는 왼쪽에서 오른쪽 순서로 평가).

이 함수는 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer> 값이 허용되는 곳이면 어디서든 사용할 수 있습니다. calc() 표현식의 구성 요소는 리터럴 값이나 calc() 표현식일 수 있습니다.

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}

:root {
  font-size: calc(100vw / 40);
}

.foo {
  background: url(top.png), url(bottom.png);
  background-repeat: no-repeat;
  background-position: 50% 50%, calc(50% + 20px) calc(50% + 20px);
}

.foo {
  background-image: linear-gradient(to right, silver,
                                              white 50px,
                                              white calc(100% - 50px),
                                              silver);
}

8.1.1. 문법

calc() 함수의 문법은 다음과 같습니다:

<calc()> = calc( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <calc-number-value> ]*
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
<calc-number-sum> = <calc-number-product> [ [ '+' | '-' ] <calc-number-product> ]*
<calc-number-product> = <calc-number-value> [ '*' <calc-number-value> | '/' <calc-number-value> ]*
<calc-number-value> = <number> | ( <calc-number-sum> )

추가로, 공백은 + 및 - 연산자 양쪽에 반드시 필요합니다. (* 및 / 연산자는 공백 없이도 사용할 수 있습니다.)

UA는 calc() 표현식에서 최소 20개의 term을 지원해야 하며, 각 NUMBER, DIMENSION, PERCENTAGE가 하나의 term입니다. calc() 표현식이 지원 개수를 초과하면, 무효로 처리해야 합니다.

8.1.2. 타입 체크

수식은 resolved type을 가지며, 이는 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer> 중 하나입니다. resolved type은 표현식이 위치한 곳에 유효해야 하며, 그렇지 않으면 무효입니다. 표현식의 resolved type은 포함된 값의 타입에 따라 결정됩니다. <number-token>은 <number> 또는 <integer> 타입입니다. <dimension-token>의 타입은 단위에 따라 결정됩니다 (cm은 <length>, deg는 <angle> 등).

참고: <number-token>은 항상 <number> 또는 <integer>로 해석되므로, "단위 없는 0" <length>는 calc()에서 지원되지 않습니다. 즉, width: calc(0 + 5px);는 무효이며, width: 0;과 width: 5px;는 유효합니다.

표현식이 위치한 문맥에서 백분율이 허용되고, 해당 백분율이 <number>가 아닌 다른 타입에 상대적이라면, <percentage-token>은 그 타입으로 처리됩니다. 예를 들어, width 속성에서는 백분율이 <length> 타입입니다. 백분율이 <percentage> 타입이 되는 경우는, 해당 문맥에서 <percentage> 값이 다른 타입과 사용값 호환성이 없을 때뿐입니다. 문맥상 calc()에 백분율이 허용되지 않으면, 백분율이 포함된 calc() 표현식은 해당 문맥에서 무효입니다.

참고: <percentage>가 <number>에 상대적인 경우(예: opacity), calc()에서 허용되지 않습니다. 허용할 경우 "단위 대수(unit algebra)"에 문제가 생기고, 지금까지의 모든 사례에서 새로운 기능을 제공하진 못했습니다. (예: opacity: 25%는 opacity: .25와 동일하며, 단순한 문법 변환일 뿐입니다.)

참고: 일부 속성에서는 <number>가 사용값 시점에 <length>로 변환되기도 하지만 (예: line-height, tab-size), <number>는 calc()에서 "길이와 유사"하게 취급되지 않습니다. 항상 <number>로 남습니다.

연산자는 하위 표현식을 만들며, 인자 타입에 따라 타입을 결정합니다. 표현식을 단순화하기 위해, 연산자마다 허용하는 타입에 제한이 있습니다. 각 연산자에서 좌우 인자의 타입을 위 제한에 따라 검사합니다. 호환되면 아래와 같이 타입이 결정됩니다 (아래는 연산자 우선순위 규칙을 단순화를 위해 생략):

• + 또는 -에서는, 양쪽 모두 같은 타입이거나, 한쪽이 <number>이고 다른 쪽이 <integer>여야 합니다. 양쪽이 같은 타입이면, 그 타입으로 결정. 한쪽이 <number>, 다른 쪽이 <integer>일 때는, <number>로 결정.
• *에서는, 한쪽 이상이 <number>여야 합니다. 양쪽 모두 <integer>면, <integer>로 결정. 아니면, 다른 쪽의 타입으로 결정.
• /에서는, 오른쪽이 <number>여야 합니다. 왼쪽이 <integer>면, <number>로 결정. 아니면, 왼쪽 타입으로 결정.

위 조건에 맞지 않으면 표현식은 무효입니다. 또한, 0으로 나누는 것도 무효입니다. 이는 리터럴 숫자 0뿐 아니라, 계산 결과가 0이 되는 순수 숫자 표현식에도 해당합니다 (숫자만으로 이루어진 표현식은 구문 분석 시점에 추가 정보 없이 평가할 수 있음).

참고: 대수적 단순화는 calc() 표현식의 유효성이나 resolved type에 영향을 주지 않습니다. 예: calc(5px - 5px + 10s), calc(0 * 5px + 10s) 모두 길이와 시간을 더하려고 시도하므로 무효입니다.

8.1.3. 계산값

calc() 표현식의 계산값은 모든 구성 요소가 계산된 결과입니다.

백분율이 계산값 시점에 해석되지 않으면, calc() 표현식에서도 해석되지 않습니다. 예: calc(100% - 100% + 1em)은 calc(1em + 0%)로, 1em으로 해석되지 않습니다. 값의 백분율 계산에 특별 규칙이 있다면 (예: height 속성), calc() 표현식에 백분율이 포함되어 있을 때 적용됩니다.

테이블 셀과 테이블 요소의 너비/높이 계산이 복잡하기 때문에, 너비/높이에 백분율이 포함된 수식은 auto 및 fixed 레이아웃의 테이블 컬럼, 컬럼 그룹, 행, 행 그룹, 셀에서 auto가 지정된 것처럼 처리될 수 있습니다.

8.1.4. 범위 검사

값의 구문 분석 시 범위 검사는 calc() 내에서는 수행되지 않으며, 따라서 범위를 벗어난 값이어도 선언이 무효가 되지 않습니다. 하지만 표현식의 결과 값은 대상 컨텍스트에서 허용되는 범위로 클램핑되어야 합니다. 클램핑은 계산값에서 가능한 한 수행되고, 사용값에서도 계산이 충분히 단순화되지 않아 범위 검사가 어려울 경우 수행됩니다. (클램핑은 지정값에는 수행되지 않습니다.)

참고: calc()를 허용하는 모든 컨텍스트는 허용값을 반드시 닫힌 구간(개방 구간 아님)으로 정의해야 합니다.

width: calc(5px - 10px);
width: calc(-5px);
width: 0px;

8.1.5. 직렬화

calc() 값의 직렬화는 이 레벨에서 정의되어 있지 않습니다.

부록 A: IANA 관련 사항

about:invalid URL 스킴 등록

본 섹션은 about:invalid URL을 정의하고 [RFC6694]에서 정의된 등록 절차에 따라 등록합니다.

등록 공식 기록은 http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml에서 확인할 수 있습니다.

감사의 글

Giovanni Campagna, Christoph Päper, Keith Rarick, Alex Mogilevsky, Ian Hickson, David Baron, Edward Welbourne, Boris Zbarsky, Björn Höhrmann 그리고 Michael Day의 의견과 제안이 본 모듈을 개선했습니다.

보안 관련 사항

이 명세는 새로운 보안 고려사항을 제시하지 않습니다.

이 명세는 url() 함수(<url>)를 정의하며, CSS가 네트워크 요청을 할 수 있게 합니다. 사용되는 기능에 따라, 사용자가 네트워크 리소스에 접근 가능한지, 리소스의 내용(스타일시트의 규칙, 이미지 크기, 폰트 메트릭 등)이 노출될 수 있습니다. URL을 통해 데이터 유출도 가능하게 됩니다.

개인정보 보호 관련 사항

이 명세는 사용자의 화면 크기(뷰포트 백분율 길이), 기본 폰트 크기, 그리고 사용자의 시스템에 어떤 폰트가 있는지에 대한 정보(폰트 상대 길이)를 일부 노출하는 단위를 도입합니다.

이 명세는 url() 함수(<url>)를 정의하며, CSS가 네트워크 요청을 할 수 있게 합니다. 사용되는 기능에 따라, 사용자가 네트워크 리소스에 접근 가능한지, 리소스의 내용(스타일시트의 규칙, 이미지 크기, 폰트 메트릭 등)이 노출될 수 있습니다. URL을 통해 데이터 유출도 가능하게 됩니다.