CSS(Cascading Style Sheets)는 HTML 및 XML 문서를 화면, 종이, 음성 등에서 렌더링하는 방식을 설명하는 언어입니다. CSS는 문서 내 요소의 텍스트, 배경, 테두리 및 기타
부분을 색칠하기 위해 색상 관련 속성과 값을 사용합니다. 이 명세서는 전경색과 그룹 불투명도를 위한 색상 값 및 속성을 설명합니다. 여기에는 CSS 레벨 2에서 가져온 속성과 값, 그리고 새로운 값들이
포함되어 있습니다.
이 문서의 상태
이 섹션은 이 문서가 발행된 시점의 상태를 설명합니다. 현재 W3C 발행물 및 이 기술 보고서의 최신 개정판 목록은 W3C 기술 보고서
인덱스 https://www.w3.org/TR/에서 확인할 수 있습니다.
W3C 권고안은 광범위한 합의 구축 과정을 거친 후 W3C와 그 회원들에 의해 승인된 명세서로, 구현을 위해 로열티 없는 라이선스에 대한 워킹 그룹 회원의 약속이
포함됩니다.
W3C는 이 명세서를 웹 표준으로 널리 배포할 것을 권장합니다.
이 문서는 W3C 특허 정책 하에서 운영되는 그룹에 의해 작성되었습니다. W3C는
그룹의 산출물과 관련하여 공개된 특허 공개 목록을 유지 관리하며, 해당 페이지에는
특허를 공개하는 방법에 대한 지침도 포함되어 있습니다. 특정 개인이 필수
청구사항을 포함한다고 믿는 특허에 대한 실제 지식을 가지고 있는 경우, W3C 특허 정책 섹션 6에 따라 정보를 공개해야 합니다.
기본 색상 키워드, RGB 16진수 값 및 확장 색상 키워드의 계산된 값은
숫자 RGB 값의 동등한 삼중값입니다. 예: 6자리 16진수 값 또는 rgb(...)
함수 값이며, 알파 값은 1입니다.
키워드 ‘transparent’의 계산된 값은
모든 0 숫자 RGBA 값의 네 쌍입니다. 예: rgba(0,0,0,0).
기타 모든 값의 경우, 계산된 값은 지정된 값입니다.
이 속성은 요소의 텍스트 콘텐츠의 전경색을 설명합니다.
또한, 색상 값을 허용하는 다른 속성에 대한 간접 값을 제공하기 위해 사용됩니다 (currentColor).
‘currentColor’ 키워드가
‘color’ 속성
자체에 설정된 경우, 이는 ‘color: inherit’로 처리됩니다.
라임 그린을 지정하는 방법에는 여러 가지가 있습니다:
예제:
em { color: lime } /* 색상 키워드 */
em { color: rgb(0,255,0) } /* RGB 범위 0-255 */
투명도는 후처리 작업으로 간주될 수 있습니다. 개념적으로, 요소(및 그 하위 요소)가 RGBA 오프스크린 이미지로 렌더링된 후, 투명도 설정은 오프스크린 렌더링을 현재 합성 렌더링에 어떻게 블렌딩할지
지정합니다. 자세한 내용은 단순 알파 합성을 참조하세요.
이름:
opacity
값:
<alphavalue> | 상속
초기값:
1
적용 대상:
모든 요소
상속됨:
아니요
백분율:
해당 없음
계산된 값:
<alphavalue>를 [0.0, 1.0] 범위로 클리핑한 후 지정된 값과 동일합니다.
<alphavalue>
구문적으로는 <number>입니다. 전체 객체에 적용될 균일한 투명도 설정입니다. 0.0(완전히 투명)에서 1.0(완전히 불투명) 범위를 벗어난 값은 이 범위로 클램핑됩니다. 객체에
하위 요소가 있는 경우, 각 픽셀 값이 <alphavalue>인 마스크를 사용하여 하위 요소가 현재 배경과 블렌딩된 것처럼 작동합니다. SVG의 경우, '하위 요소가 있다'는 것은
[SVG11]의 컨테이너 요소와 같습니다.
투명도가 1보다 작은 요소는 단일 오프스크린 이미지에서 합성되므로, 그 외부의 콘텐츠는 내부 콘텐츠 조각 사이의 z-순서로 계층화될 수 없습니다. 같은 이유로, 구현은 투명도가 1보다 작은 요소에 대해
새 스태킹 컨텍스트를 생성해야 합니다. 투명도가 1보다 작은 요소가 위치 지정되지 않은 경우, 해당 요소는 스택 레벨 0의 위치 지정된 요소와 동일한 계층에서 부모 스태킹 컨텍스트 내에 렌더링됩니다.
투명도가 1보다 작은 요소가 위치 지정된 경우, ‘z-index’ 속성은 [CSS21]에서 설명된 대로 적용되지만, 사용된 값이 ‘auto’인 경우 해당
요소는 정확히 ‘0’인 것처럼 작동합니다. 스태킹 컨텍스트에 대한 자세한 내용은 섹션 9.9 및 부록 E를 참조하세요. 이 단락의 규칙은 SVG 요소에는 적용되지 않습니다. SVG는 자체 렌더링 모델([SVG11],
3장)을 가지고 있기 때문입니다.
4. 색상 단위
<color>는 키워드 또는 숫자 사양 중 하나입니다.
4.1. 기본 색상 키워드
기본 색상 키워드 목록은 다음과 같습니다: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white, yellow. 색상 이름은 ASCII 대소문자 구분
없음입니다.
색상 이름과 sRGB 값
이름
숫자
색상 이름
Hex rgb
10진수
black
#000000
0,0,0
silver
#C0C0C0
192,192,192
gray
#808080
128,128,128
white
#FFFFFF
255,255,255
maroon
#800000
128,0,0
red
#FF0000
255,0,0
purple
#800080
128,0,128
fuchsia
#FF00FF
255,0,255
green
#008000
0,128,0
lime
#00FF00
0,255,0
olive
#808000
128,128,0
yellow
#FFFF00
255,255,0
navy
#000080
0,0,128
blue
#0000FF
0,0,255
teal
#008080
0,128,128
aqua
#00FFFF
0,255,255
예제:
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
4.2. 숫자 색상 값
4.2.1. RGB 색상 값
RGB 색상 모델은 숫자 색상 사양에 사용됩니다. 다음 예제는 모두 동일한 색상을 지정합니다:
예제:
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
RGB 값을 16진수 표기법으로 표현한 형식은 ‘#’ 뒤에 바로 세 자리 또는 여섯 자리 16진수 문자가 옵니다. 세 자리 RGB 표기법(#rgb)은 숫자를 반복하여 여섯 자리 형식(#rrggbb)으로
변환되며, 0을 추가하지 않습니다. 예를 들어, #fb0은 #ffbb00으로 확장됩니다. 이는 #fff와 같은 짧은 표기로 흰색(#ffffff)을 지정할 수 있도록 보장하며, 디스플레이의 색상 깊이에
대한 의존성을 제거합니다.
RGB 값을 함수 표기법으로 나타낸 형식은 ‘rgb(’ 뒤에 세 개의 숫자 값(정수 값 세 개 또는 백분율 값 세 개)이 쉼표로 구분되어 나타나며, 마지막에
‘)’로 닫힙니다. 정수 값 255는 100%에 해당하며, 16진수 표기법에서는 F 또는 FF에 해당합니다: rgb(255,255,255) =
rgb(100%,100%,100%) = #FFF. 숫자 값 주위에는 공백 문자를 포함할 수 있습니다.
모든 RGB 색상은 sRGB 색상 공간에서 지정됩니다(참조: [SRGB]). 사용자 에이전트는 이러한 색상을 표현하는 정확도에서 차이가 있을 수 있지만, sRGB를 사용하면 색상이
무엇인지에 대한 명확하고 객관적으로 측정 가능한 정의를 제공하며, 국제 표준과 연관될 수 있습니다(참조: [COLORIMETRY]).
디바이스 색역(gamut) 밖의 값은 색역이 알려진 경우 색역 안으로 잘리거나 매핑되어야 합니다. 빨강, 초록, 파랑 값은 디바이스가 지원하는 범위 내로 변경되어야 합니다. 사용자 에이전트는 한 색역에서
다른 색역으로 색상을 매핑할 때 더 높은 품질의 매핑을 수행할 수 있습니다. 이 명세는 정확한 클리핑 동작을 정의하지 않습니다. sRGB와 동일한 디바이스 색역을 가진 일반적인 CRT 모니터의 경우,
아래 네 가지 규칙은 동일합니다:
예제:
em { color: rgb(255,0,0) } /* 정수 범위 0 - 255 */
em { color: rgb(300,0,0) } /* rgb(255,0,0)으로 잘림 */
em { color: rgb(255,-10,0) } /* rgb(255,0,0)으로 잘림 */
em { color: rgb(110%, 0%, 0%) } /* rgb(100%,0%,0%)으로 잘림 */
프린터와 같은 다른 디바이스는 sRGB와 다른 색역을 가지고 있습니다. 0..255 sRGB 범위를 벗어난 일부 색상은 표현 가능(디바이스 색역 안)하지만, 0..255 sRGB 범위 내의 다른 색상은
디바이스 색역 밖에 있으므로 매핑됩니다.
4.2.2. RGBA 색상 값
RGB 색상 모델은 이 명세에서 "알파"를 포함하도록 확장되어 색상의 불투명도를 지정할 수 있습니다.
자세한 내용은 단순 알파 합성을 참조하세요. 다음 예제는 모두 동일한 색상을 지정합니다:
예제:
em { color: rgb(255,0,0) } /* 정수 범위 0 - 255 */
em { color: rgba(255,0,0,1) /* 동일, 명시적 불투명도 1 포함 */
em { color: rgb(100%,0%,0%) } /* 부동 소수점 범위 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* 동일, 명시적 불투명도 1 포함 */
RGB 값과 달리 RGBA 값에는 16진수 표기법이 없습니다.
RGBA 값을 함수 표기법으로 나타낸 형식은 ‘rgba(’ 뒤에 쉼표로 구분된 세 개의 숫자 값(정수 값 세 개 또는 백분율 값 세 개), <alphavalue>, 그리고 ‘)’로 닫힙니다. 정수 값 255는 100%에 해당하며, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). 숫자 값 주위에는
공백 문자를 포함할 수 있습니다.
구현은 RGBA 색상 값의 빨강, 초록, 파랑 구성 요소를 해당 구성 요소로 구성된 RGB 색상 값에 대한 규칙에 따라 디바이스 색역으로 잘라야 합니다.
다음 예제는 rgba() 표기법으로 가능한 효과를 지정합니다:
예제:
p { color: rgba(0,0,255,0.5) } /* 반투명한 단색 파란색 */
p { color: rgba(100%, 50%, 0%, 0.1) } /* 매우 투명한 단색 주황색 */
참고. RGBA 값이 사용자 에이전트에서 지원되지 않는 경우, 이는 CSS의 전방 호환성 구문 분석 규칙([CSS21], 4장)에 따라 인식되지 않는 값으로 처리되어야 합니다. RGBA 값은 단순히 투명도를 무시한 RGB 값으로
처리되어서는 안 됩니다.
CSS1은 배경색 속성을 위한 ‘transparent’ 값을 도입했습니다. CSS2는 테두리
색상(border-color)도 ‘transparent’ 값을 허용했습니다. Open eBook(tm)
Publication Structure 1.0.1 [OEB101]은 ‘color’ 속성도 ‘transparent’
키워드를 허용하도록 확장했습니다. CSS3는 모든 <color> 값을 허용하는 속성에서 ‘transparent’ 키워드를 사용할 수 있도록 색상 값을 확장했습니다. 이는 CSS3에서 이러한 속성의 정의를 단순화합니다.
transparent
완전히 투명합니다. 이 키워드는 투명한 검정색, rgba(0,0,0,0)의 축약형으로 간주될 수 있으며, 이는 계산된 값입니다.
4.2.4. HSL 색상 값
CSS3는 숫자 색상 모델을 추가하여 숫자 RGB 색상을 보완합니다. RGB 색상은 다음과 같은 한계를
가지고 있습니다:
RGB는 하드웨어 지향적입니다: CRT 사용을 반영합니다.
RGB는 직관적이지 않습니다. 사람들은 RGB를 사용하는 방법을 배울 수 있지만, 실제로는 색조, 채도 및 밝기를 RGB로 변환하는 방법을 내재화함으로써 사용합니다.
다른 색상 체계도 가능합니다. HSL의 장점 중 일부는 밝기와 어둡기에 대칭적이라는 점(HSL과 달리 HSV는 그렇지 않음)이 있으며, HSL을 RGB로 변환하는 것이 매우 간단하다는 것입니다.
HSL 색상은 (색조, 채도, 밝기)의 세 가지 값으로 인코딩됩니다. 색조는 색상 원(즉, 원형으로 표현된 무지개)의 각도로 표현됩니다. CSS에서 이 각도는 일반적으로 도 단위로 측정되므로 단위가
암묵적입니다. 구문적으로는 <number>만 제공됩니다. 정의에 따라 빨강=0=360이며, 다른 색상은 원을 따라 배치됩니다. 예를 들어 초록=120, 파랑=240 등입니다. 각도로서
-120=240 및 480=120과 같이 암묵적으로 순환합니다. 구현에서 각도 x를 [0,360) 범위(즉, 0도 포함, 360도 제외)로 정규화하는 한 가지 방법은 (((x mod 360) +
360) mod 360)을 계산하는 것입니다. 채도와 밝기는 백분율로 표현됩니다. 100%는 완전 채도, 0%는 회색 음영입니다. 0% 밝기는 검정, 100% 밝기는 흰색, 50% 밝기는
"보통"입니다.
HSL의 장점은 RGB보다 훨씬 더 직관적이라는 점입니다: 원하는 색상을 추측한 후 조정할 수 있습니다. 또한 색조를 동일하게 유지하고 밝기/어둡기 및 채도를 변경하여 일치하는 색상 세트를 만들기가 더
쉽습니다.
채도가 0% 미만인 경우, 구현은 이를 0%로 잘라야 합니다. 결과 값이 디바이스 색역을 벗어나는 경우, 구현은 이를 디바이스 색역으로 잘라야 합니다. 이 클리핑은 가능하다면 색조를 유지해야 하지만,
그렇지 않은 경우 정의되지 않습니다. (즉, 클리핑은 아래 알고리즘을 사용하여 HSL을 RGB로 변환한 후 RGB 색상을 클리핑하는 규칙을 적용하는 것과는 다릅니다.)
HSL 색상을 sRGB로 변환하는 것은 수학적으로 간단합니다. 다음은 JavaScript로 변환 알고리즘을 구현한 샘플입니다. 이 함수는 색상의 빨강, 초록, 파랑 채널을 나타내는 세 개의 숫자 배열을
반환하며, [0, 1] 범위로 정규화됩니다.
function hslToRgb (hue, sat, light) {
hue = hue % 360;
if (hue < 0) {
hue += 360;
}
sat /= 100;
light /= 100;
function f(n) {
let k = (n + hue/30) % 12;
let a = sat * Math.min(light, 1 - light);
return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
}
return [f(0), f(8), f(4)];
}
4.2.4.1. HSL 예제
아래 각 표는 한 가지 색조를 나타냅니다. 컬러 원에서 30° 간격으로 동일하게 배치된 12가지 색상: 빨강, 노랑, 초록, 청록, 파랑, 자홍색과 그 중간 색상이 선택되었습니다. (마지막 색상은
자홍색과 빨강 사이의 색상입니다.)
각 표에서 X축은 채도를 나타내고 Y축은 밝기를 나타냅니다.
0° 빨강
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
30° 빨강-노랑 (=주황)
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
60° 노랑
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
90° 노랑-초록
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
120° 초록
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
150° 초록-청록
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
180° 청록
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
210° 청록-파랑
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
240° 파랑
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
270° 파랑-자홍
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
300° 자홍
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
330° 자홍-빨강
100%
80%
60%
40%
20%
0%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
4.2.5.
HSLA 색상 값
‘rgb()’ 함수 표기법에 ‘rgba()’ 알파 대응 항목이 있는 것처럼, ‘hsl()’ 함수 표기법에도 ‘hsla()’ 알파 대응 항목이 있습니다. 자세한 내용은 간단한 알파 합성을 참조하세요. 다음 예시는
동일한 색상을 지정합니다:
예제:
em { color: hsl(120, 100%, 50%) } /* 초록색 */
em { color: hsla(120, 100%, 50%, 1) } /* 동일하며, 투명도가 1로 명시 */
HSLA 색상 값의 함수 표기법 형식은 ‘hsla(’ 다음에 각도 단위의 색조(hue), 백분율로 표현된 채도(saturation)와 명도(lightness),
그리고 <alphavalue>가 뒤따르며, 마지막으로 ‘)’로 끝납니다. 공백 문자는 숫자 값 주변에 허용됩니다.
구현은 HSLA 색상 값의 색조, 채도, 명도 구성 요소를 해당 구성 요소로 구성된 HSL 색상 값에 대한 규칙에 따라 장치 색역으로 클리핑해야 합니다.
다음 예시는 hsla() 표기법으로 가능한 효과를 지정합니다:
예제:
p { color: hsla(240, 100%, 50%, 0.5) } /* 반투명 고체 파란색 */
p { color: hsla(30, 100%, 50%, 0.1) } /* 매우 투명한 고체 주황색 */
4.3. 확장된 색상 키워드
아래 표는 [X11COLORS]에서 가져온 X11 색상 목록이며, SVG 1.0의 회색(그레이) 변형을 추가한
것입니다. 결과 목록은 SVG 1.0 색상 키워드 이름과 정확히 동일합니다. 이
명세는 SVG를 넘어 그 정의를 확장합니다. 왼쪽의 두 색상 견본은 테이블 셀의 배경색을 설정하는 두 가지 방법을 보여줍니다: 첫 번째 열은 명명된 색상 값을 사용하고, 두 번째 열은 해당 숫자 색상
값을 사용합니다.
CSS1과 CSS2는 ‘border-color’
속성의 초기 값을 ‘color’ 속성의 값으로 정의했지만,
이에 상응하는 키워드를 정의하지 않았습니다. 이 누락은 SVG에서 인식되었으며, 따라서 SVG 1.0은 ‘currentColor’
값을
‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, ‘lighting-color’ 속성에 도입했습니다. CSS3는 색상 값을 확장하여 모든
<color> 값을 허용하는 속성에서 ‘currentColor’ 키워드를 사용할 수 있도록
했습니다.
이는 CSS3에서 해당 속성들의 정의를 단순화합니다.
더 이상 사용되지 않음.텍스트, 배경 등에 색상 키워드
값을 할당할 수 있는 것 외에도, CSS2는
작성자가 색상을 사용자 그래픽 환경과 통합하는 방식으로 지정할 수 있도록 했습니다.
해당 값이 없는 시스템의 경우, 지정된 값은 가장 가까운 시스템 색상 값이나 기본 색상으로 매핑되어야 합니다.
일부 CSS 프로필은 시스템 색상을 전혀 지원하지 않을 수도 있다는 점에 유의하세요.
다음은 색상 관련 CSS 값과 그 일반적인 의미에 대한 추가 값을 나열한 것입니다. 모든 색상 속성은 다음 이름 중 하나를 사용할 수 있습니다.
이러한 값은 ASCII 대소문자 구분 없이
처리되지만, 아래에 표시된 혼합 대소문자 형식을 사용하는 것이 이름을 더 읽기 쉽게 만들기 위해 권장됩니다.
ActiveBorder
활성 창 테두리.
ActiveCaption
활성 창 캡션.
AppWorkspace
다중 문서 인터페이스의 배경색.
Background
데스크톱 배경.
ButtonFace
3D 요소의 면 배경색 (하나의 경계로 인해 3D로 보이는 요소).
ButtonHighlight
3D 요소의 조명 방향에 있는 경계 색상 (하나의 경계로 인해 3D로 보이는 요소).
ButtonShadow
3D 요소의 조명 방향에서 벗어난 경계 색상 (하나의 경계로 인해 3D로 보이는 요소).
ButtonText
푸시 버튼의 텍스트.
CaptionText
캡션, 사이즈 박스, 스크롤바 화살표 박스의 텍스트.
GrayText
회색(비활성화) 텍스트. 현재 디스플레이 드라이버가 단색 회색을 지원하지 않는 경우 이 색상은 #000으로 설정됩니다.
Highlight
컨트롤에서 선택된 항목.
HighlightText
컨트롤에서 선택된 항목의 텍스트.
InactiveBorder
비활성 창 테두리.
InactiveCaption
비활성 창 캡션.
InactiveCaptionText
비활성 캡션의 텍스트 색상.
InfoBackground
툴팁 컨트롤의 배경색.
InfoText
툴팁 컨트롤의 텍스트 색상.
Menu
메뉴 배경.
MenuText
메뉴 텍스트.
Scrollbar
스크롤 바 회색 영역.
ThreeDDarkShadow
3D 요소의 두 개의 동심 경계로 인해 3D로 보이는 경우, 조명 방향에서 벗어난 더 어두운 (일반적으로 외부) 경계 색상.
ThreeDFace
3D 요소의 면 배경색 (두 개의 동심 경계로 인해 3D로 보이는 경우).
ThreeDHighlight
3D 요소의 두 개의 동심 경계로 인해 3D로 보이는 경우, 조명 방향에 있는 더 밝은 (일반적으로 외부) 경계 색상.
ThreeDLightShadow
3D 요소의 두 개의 동심 경계로 인해 3D로 보이는 경우, 조명 방향에 있는 더 어두운 (일반적으로 내부) 경계 색상.
ThreeDShadow
3D 요소의 두 개의 동심 경계로 인해 3D로 보이는 경우, 조명 방향에서 벗어난 더 밝은 (일반적으로 내부) 경계 색상.
Window
창 배경.
WindowFrame
창 테두리.
WindowText
창 텍스트.
더 이상 사용되지 않는 예제:
예를 들어, 단락의 전경색과 배경색을 사용자의 창 전경색과 배경색으로 설정하려면 다음을 작성합니다:
p { color: WindowText; background-color: Window }
4.6. 색상 사용에 대한 참고 사항
색상은 문서에 상당한 정보를 추가하고 가독성을 높일 수 있지만, 문서에 색상을 포함할 때 W3C 웹 콘텐츠 접근성 가이드라인 [WCAG20]을 고려해 주세요.
그리기를 할 때 구현은 알파를 처리해야 하며,
현행 표준[SVG11]의 14.2절 간단한 알파 블렌딩 규칙을 따라야 합니다. (해당 절에서 언급된 ‘color-interpolation’ 또는 ‘color-rendering’ 속성이 구현되지 않았거나 적용되지 않는 경우, 구현은 초기 값을 가진 것처럼 동작해야 합니다.)
6. (X)HTML 샘플 스타일 시트
이 부록은 참고용이며, 규범적이지 않습니다. 이 스타일 시트는 HTML4, XHTML1, XHTML1.1, XHTML Basic 및 기타 XHTML 계열 문서의 기본 스타일링의 일부로 구현에서 사용할 수
있습니다.
html {
color: black;
background: white;
}
/* 데스크탑 사용자 에이전트의 전통적인 하이퍼링크 색상 */
:link { color: blue; }
:visited { color: purple; }
/* 기본 포커스 윤곽 */
:focus {
outline: 1px dotted; /* 또는 1px dotted invert */
}
7. 프로파일
CSS3 색상을 사용하는 각 명세는
허용하고 제외하는 CSS3 색상 기능의 하위 집합을 정의하고, 해당 하위 집합의 모든 구성 요소의 로컬 의미를 설명해야 합니다.
규범적이지 않은 예:
CSS3 색상
프로파일
명세
HTML4
허용
기본 색상 키워드
RGB 6자리 16진수 색상 값
제외
‘color’
속성
‘opacity’
속성
RGB 3자리 16진수 색상 값 및 RGB 함수 표기법 색상 값
RGBA 색상 값
HSL 및 HSLA 색상 값
확장된 색상 키워드
‘currentColor’ 색상 값
CSS2 UI 색상
‘transparent’ 색상 값
ICC 프로파일을 지정하기 위한 ‘@color-profile’ at-rule,
해당 프로파일의 렌더링 의도를 제어하는 방법, 그리고 이러한 프로파일을 사용하는
‘color-profile’ 속성과 같은 색상 관리와 관련된 여러 기능이
당시 구현 관심 부족으로 CSS 색상 3에서 제거되었습니다.
Brad Pettit에게는 색상 프로파일 작성과 구현에 대한 감사의 말씀을 드립니다. Steven Pemberton에게는 HSL 색상에 대한 작성에 대해 감사드립니다. Marc Attinasi, Bert
Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron
McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup,
Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve
Zilles, XSL WG의 XSL FO 소그룹과 모든 www-style 커뮤니티의
피드백에 특별히 감사드립니다. 그리고 CSS 색상 전문가로 활동해 주신 Chris Lilley에게도 감사드립니다.