설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.
기본적으로 linear-gradient() 함수와 그라데이션을 생성하는 방식은 동일하지만 요소의 영역에 무한으로 그라데이션으로 반복된다. 그라데이션으로 사용될 색을 설정시 범위를 지정해 줘야 반복되는 패턴으로 적용시킬 수 있다.
linear-gradient() 함수의 매개 변수를 나타낸다.
[ [ 〈angle〉 | to 〈side-or-corner〉 ] || 〈color-interpolation-method〉 ]? , 〈color-stop-list〉
방향(<angle>, <side-or-corner>)은 생략될 수 있으며 생략 시 to bottom 값으로 처리된다.
0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
<angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
in [ 〈rectangular-color-space〉 | 〈polar-color-space〉 〈hue-interpolation-method〉? ]
[ shorter | longer | increasing | decreasing ] hue
hsl | hwb | lch | oklch
색조, 채도 및 밝기의 삼중항으로 지정된다.
sRGB 색상을 지정하는 또 다른 방법으로 HSL과 유사하지만 사람이 이해하기가 더 쉽도록 설계되었다. 먼저 색조로 색상을 정한 다음에 해당 기본 색조에 혼합할 흰색과 검은색의 정도를 지정한다.
CIE LCH는 Lab과 동일한 L축을 가지지만 극좌표 C(크로마:chroma)와 H(색조:hue)를 사용하여 극좌표, 원통형 좌표계를 만든다. C는 L축으로부터의 기하학적 거리이고 H는 양의 a축에서 양의 b축을 향한 각도이다.
시각적으로 유사한 색상의 대규모 데이터셋을 수치 최적화하여 제작하였으며 CIE LCH에 비해 색상 선형성, 색상 균일성, 채도 균일성이 향상되었다.
srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65
중앙 밝기 축(central lightness axis)이 있는 직교 좌표계이다. 이 값은 일반적으로 단위 없는 숫자로 작성된다. 나머지 CSS와의 호환성을 위해 백분율로 작성된다. 100%는 L 값이 1.0이 아니라 100임을 의미한다. L=0%는 짙은 검정색(빛이 전혀 없음)인 반면 L=100%는 분산된 흰색이다.
Lab 컬러 스페이스를 개선했다. 시각적으로 유사한 색상의 대규모 데이터셋을 수치 최적화하여 제작하였으며 CIE LCH에 비해 색상 선형성, 색상 균일성, 채도 균일성이 향상되었다.
srgb[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.
[SRGB]는 인코딩과 일반의 두 가지 보기 조건을 지정하며 모든 레거시 색상 기능에 사용되는 CSS의 기본 컬러 스페이스이다.
srgb-linear[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.
xyz 컬러 스페이스는 X, Y 및 Z 값을 나타내는 세 개의 숫자 매개 변수를 허용한다. CIE XYZ[COLORIMETRY] 컬러 스페이스를 나타내며 확산 흰색의 휘도(Y)가 1.0이 되도록 조정된다. 필요한 경우 기준 흰색에 반음계로 적용된다.
xyz 컬러 스페이스에서 기준 흰색이 D50이다.
xyz 컬러 스페이스에서 기준 흰색이 D65이다.
〈linear-color-stop〉 , [ 〈linear-color-hint〉? , 〈linear-color-stop〉 ]#
다음과 같은 값을 설정할 수 있다.
yellow, 10%, pink, 20%, red〈length-percentage〉
<length>와 <percentage> 타입을 나타낸다.
〈length〉 | 〈percentage〉숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
〈length〉
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
뷰포트 높이를 상대적으로 1% 높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
어떠한 기준으로 부터 백분율로 표현한다.
〈color〉 && 〈length-percentage〉?
sRGB 색상 공간의 색상값을 나타낸다. 알파 채널 투명도 값을 포함 할 수 있으며, 색상이 배경과 합성되는 방법을 나타낸다. 색을 생성하는 방법은 UA 표준 색상명, 16진수 값 그리고 함수로는 rgb(), rgba(), hsl(), hsla(), hwb(), color(),lab(), lch(), oklab(), oklch() 함수가 있다.
<color> 타입은 다음과 같은 방법으로 값을 정의한다.
transparent, aqua 등등rgb(), rgba() 함수hsl(), hsla() 함수lab(), lch(), oklab(), oklch()color(), sRGB, srgb-linear, display-p3,a98-rgb, prophoto-rgb, rec2020, xyz-d50, xyz-d65, xyz〈absolute-color-base〉 | currentcolor | 〈system-color〉
〈hex-color〉 | 〈absolute-color-function〉 | 〈named-color〉 | transparent
〈rgb()〉 | 〈hsl()〉 | 〈hwb()〉 | 〈color()〉 | lab() | lch() | oklab() | oklch()
color() 함수의 인수를 나타내는 타입이다.
color( 〈colorspace-params〉 [ / [ 〈alpha-value〉 | none ] ]? )
<colorspace-params>은 <predefined-rgb>(또는< xyz-space>) 값과 RGB 값을 차례대로 지정한다. RGB 각각의 값의 범위는 [0,1] 범위의 <number>이거나 <percentage> 값을 갖는다. <predefined-rgb>와 < xyz-space>로 설정 가능한 값은 각각의 타입에 대한 내용을 참고하기 바란다.
(예) RGB 값을 <number>로 지정하는 경우
srgb 0.5 0 0.78<alpha-value>은 투명도 값을 선택적으로 지정한다.
0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.
〈number〉 | 〈percentage〉정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
[ 〈predefined-rgb-params〉 | 〈xyz-params〉]
〈predefined-rgb〉 [ 〈number〉 | 〈percentage〉 | none ]{3}
정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020
a98-rgb 색 공간은 색의 빨강, 녹색 및 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역 내의 색은 세 가지 구성 요소가 모두 [0, 1] 범위에 있다. 전달 곡선은 감마 함수이며 1/2.2에 가깝지만 정확하지는 않다.
display-p3 색 공간은 색의 빨강, 녹색 및 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 영역(gamut)의 색은 세 가지 구성 요소가 모두 [0, 1] 범위에 있다. DCI-P3와 동일한 기본 색도를 사용하지만 화이트 포인트는 D65이며 sRGB와 동일한 전달 곡선을 사용한다.
최신 디스플레이, TV, 노트북과 휴대폰 화면은 display-p3 색 영역의 전부 또는 거의 전부를 표시할 수 있다.
prophoto-rgb 색 공간은 색의 빨강, 녹색, 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역 내 색은 세 가지 구성 요소가 모두 [0,1] 범위에 있다. 전달 곡선은 1/1.8 값의 감마 함수이며 검은색에 가까운 작은 선형 부분이다. 흰색 점은 CIE Lab에서 사용하는 것과 동일한 D50이다. 따라서 CIE Lab으로 변환할 때 색채 적응 단계가 필요하지 않다.
prophoto-rgb 색 공간은 물리적으로 구현할 수 없는 고채도의 원색을 사용한다. 이는 넓은 색 영역을 허용하고 특히 색조 조작에 따른 색조 변화를 최소화하기 위해 선택되었다. 디지털 사진에서 사진 이미지의 아카이브 버전을 위한 넓은 색 영역의 색 공간으로 자주 사용된다. prophoto-rgb 색 공간을 사용하면 CSS에서 동일한 RGB 값을 가진 이미지의 색상과 일치하는 색상을 지정할 수 있다.
rec2020 색 공간은 색의 빨강, 녹색, 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역의 색은 [0,1] 범위의 세 가지 구성 요소를 모두 갖는다. ITU 참조 2020은 초고화질, 4K 및 8K TV에 사용된다.
원색은 물리적으로 구현할 수 있지만 스펙트럼 궤적에 매우 가깝기 때문에 어려움이 있다.
현재 디스플레이는 rec2020의 전체 영역을 재현할 수 없다. 디스플레이가 개선되고 시간이 지나면서 적용 범위가 늘어날 것으로 예상된다.
srgb[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.
[SRGB]는 인코딩과 일반의 두 가지 보기 조건을 지정하며 모든 레거시 색상 기능에 사용되는 CSS의 기본 컬러 스페이스이다.
srgb-linear[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
〈xyz-space〉 [ 〈number〉 | 〈percentage〉 | none ]{3}
정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
xyz | xyz-d50 | xyz-d65
xyz 컬러 스페이스는 X, Y 및 Z 값을 나타내는 세 개의 숫자 매개 변수를 허용한다. CIE XYZ[COLORIMETRY] 컬러 스페이스를 나타내며 확산 흰색의 휘도(Y)가 1.0이 되도록 조정된다. 필요한 경우 기준 흰색에 반음계로 적용된다.
xyz 컬러 스페이스에서 기준 흰색이 D50이다.
xyz 컬러 스페이스에서 기준 흰색이 D65이다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
hsl() 함수의 매개 변수를 나타낸다. 레거시로 색상(hue), 채도(saturation), 밝기(lightness) 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.
hsl( [ 〈hue〉 | none ] [ 〈percentage〉 | none ] [ 〈percentage〉 | none ] [ / [ 〈alpha-value〉 | none ] ]? )
<hue>는 색상환에서 만들고자하는 색의 각도 값을 입력한다. 0과 360도는 빨간색이다. CSS Color Module Level 4 기준 deg, rad, grad, turn을 사용할 수 있으며 단위 없이 로 표현할 경우 CSS Color Module Level 3에 명시된 것과 같이 각도로 해석한다.
<percentage> 값은 각각 채도와 밝기를 나타낸다. 채도(saturation)의 경우 0%은 회색, 100%은 원색으로 만든다. 밝기(lightness)의 경우 0%은 검정, 100%은 흰색으로 만든다.
구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 0과 1의 범위 내에서 지정할 수 있다.
hsl( 〈hue〉, 〈percentage〉, 〈percentage〉, 〈alpha-value〉? )0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.
〈number〉 | 〈percentage〉색상환에서 각도로 표시되는 색조 값을 나타낸다.
〈number〉 | 〈angle〉0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
<angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
hwp() 함수에서 사용된 인수의 타입을 나타낸다.
hwb( [〈hue〉 | none] [〈percentage〉 | none] [〈percentage〉 | none] [ / [〈alpha-value〉 | none] ]? )
<hue>는 색상환에서 만들고자 하는 색의 각도 값을 입력한다. 0과 360도는 빨간색이다. CSS Color Module Level 4 기준 deg, rad, grad, turn을 사용할 수 있으며 단위 없이 로 표현할 경우 CSS Color Module Level 3에 명시된 것과 같이 각도로 해석한다.
<percentage> 값은 각각 백색률(whiteness)과 흑색률(blackness) 값이며 혼합 정도를 나타낸다.
구문에 따라 추가적으로 / 뒤에<alpha-value> 값을 지정할 수 있으며 투명도를 0과 1의 범위 내에서 지정할 수 있다.
0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.
〈number〉 | 〈percentage〉정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
색상환에서 각도로 표시되는 색조 값을 나타낸다.
〈number〉 | 〈angle〉어떠한 기준으로 부터 백분율로 표현한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
lab() 함수의 인수를 나타낸다.
lab( [〈percentage〉 | 〈number〉 | none] [ 〈percentage〉 | 〈number〉 | none] [ 〈percentage〉 | 〈number〉 | none] [ / [〈alpha-value〉 | none] ]? )
0% = 0.0, 100% = 100.0-100% = -125, 100% = 125160을 초과하지 않는다./로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.
〈number〉 | 〈percentage〉정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
lch() 함수의 인수를 나타낸다.
lch( [〈percentage〉 | 〈number〉 | none] [ 〈percentage〉 | 〈number〉 | none] [ 〈hue〉 | none] [ / [〈alpha-value〉 | none] ]? )
0% = 0.0, 100% = 100.00% = 0, 100% = 1500부터 최대 230까지(음수인 경우 0으로 고정됨)/로 구분된 네 번째 인수 0~1)를 지정한다.0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.
〈number〉 | 〈percentage〉색상환에서 각도로 표시되는 색조 값을 나타낸다.
〈number〉 | 〈angle〉0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
<angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
정수 또는 실수를 표현한다.
정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
oklab( [ 〈percentage〉 | 〈number〉 | none] [ 〈percentage〉 | 〈number〉 | none] [ 〈percentage〉 | 〈number〉 | none] [ / [〈alpha-value〉 | none] ]? )
0% = 0.0, 100% = 1.00%(black)~100%(white) 범위에서 밝기를 지정한다. 0%이거나 100%인 경우에는 a와 b 성분은 무효가 된다. 0%보다 작은 값은 계산된 시점에서 0%로 고정되고 100%보다 큰 값은 계산된 시점에서 100%로 고정된다.-100% = -0.4, 100% = 0.40.5를 초과하지 않는다고 정의했다./로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.
〈number〉 | 〈percentage〉정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
oklch( [ 〈percentage〉 | 〈number〉 | none] [ 〈percentage〉 | 〈number〉 | none] [ 〈hue〉 | none] [ / [〈alpha-value〉 | none] ]? )
0% = 0.0, 100% = 1.00%(black)~100%(white) 범위에서 밝기를 지정한다. 0%이거나 100%인 경우에는 색조와 채도는 모두 무효가 된다. 0%보다 작은 값은 0%로 고정되고 100%보다 큰 값은 100%로 고정된다.0% = 0, 100% = 0.40으로 고정된다. W3C 사양에는 이론적으로 제한이 없으나 실제로는 0.5를 초과하지 않는다고 정의했다. 채도가 0인 경우에는 색조 값은 무효가 된다./로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.
〈number〉 | 〈percentage〉정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
색상환에서 각도로 표시되는 색조 값을 나타낸다.
〈number〉 | 〈angle〉정수 또는 실수를 표현한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
rgb() 함수의 매개 변수를 나타낸다. 레거시로 red, green, blue 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.
rgb( [〈percentage〉 | none]{3} [ / [〈alpha-value〉 | none] ]? )
<percentage>는 0~255 범위를 백분율로 지정할 수 있다.
구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 0과 1의 범위 내에서 지정할 수 있다.
rgb( [〈number〉 | none]{3} [ / [〈alpha-value〉 | none] ]? )
<number>는 red, green, blue 값을 각각 0~255 범위 내에서 지정이 가능하다.
구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 0과 1의 범위 내에서 지정할 수 있다.
rgb( 〈percentage〉#{3} , 〈alpha-value〉? )
레거시 구문이며 선택적으로 <alpha-value> 값(투명도)을 추가할 수 있게 변경 되었다.
rgb( 〈number〉#{3} , 〈alpha-value〉? )
레거시 구문이며 선택적으로 <alpha-value> 값(투명도)을 추가할 수 있게 변경 되었다.
0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.
〈number〉 | 〈percentage〉정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
모든 함수를 표시하지 않을 수도 있다.
값이 3, 4, 6 또는 8개의 16진수로 구성된 <hash-token> 토큰이다. 즉 16진수 색상은 해시 문자 '#' 다음에 숫자[0-9], 대소문자 구분이 없는 알파벳 문자[a-f]의 조합으로 작성된다.
일반적인 색상을 더 쉽게 쓰고 읽을 수 있도록 이름이 지정된 색상 세트를 나타낸다. <ident>로 작성되며 <color>가 필요한 모든 곳에서 허용된다. 모든 색상 키워드는 ASCII 대소문자를 구분하지 않는다.
완전한 투명을 나타낸다.
rgba(0, 0, 0, 0)의 별칭으로 사용되는 값으로 볼 수 있다. CSS Level 2 전까지는 지금처럼 실제 색상 값으로 사용하는 게 아니었다. background와 border 속성에서 색상을 설정할 때 사용되는 키워드였지만 CSS Colors Level 3에서 알파채널이 추가되면서 투명을 의미하는 색상 값이 되었고 색상을 정의하는 모든 속성에서 사용이 가능하게 되었다.
CSS 시스템에서 사용하는 색상 테이블이다. CSS Color Module 4에서 더 이상 사용되지 않는 <deprecated-color> 시스템 색상을 정의했다.
강조된 사용자 인터페이스 컨트롤의 배경색이다.
강조된 사용자 인터페이스 컨트롤의 텍스트 색상이다.
활성 링크의 텍스트 색상이다.
푸시(push) 버튼의 기본 테두리 색상이다.
푸시(push) 버튼의 배경색이다.
푸시(push) 버튼의 텍스트 색상이다.
애플리케이션 또는 문서의 배경색이다.
애플리케이션 또는 문서의 텍스트 색상이다.
입력 필드의 배경색이다.
입력 필드의 텍스트 색상이다.
비활성화된 텍스트의 색상이다.
선택한 텍스트의 텍스트 색상이다.
선택한 텍스트의 배경색이다.(예: ::selection)
비활성, 비방문 링크의 텍스트 색상이다.
특수하게 표시된 텍스트(예: HTML <mark>)의 배경색이다.
HTML의 <mark> 요소 등으로 특수하게 표시된 텍스트의 색상이다.
선택한 항목의 배경색이다.
선택한 항목의 텍스트 색상이다.
방문한 링크의 텍스트 색이다.
동일한 속성이 아니어도 상속받은 색상값을 나타낸다.
<length>와 <percentage> 타입을 나타낸다.
〈length〉 | 〈percentage〉[left | right] || [top | bottom]
배경의 끝나는 위치를 요소의 하단에 맞춘다.
배경의 시작되는 위치를 요소의 좌측에 맞춘다.
배경의 끝나는 위치를 요소의 우측에 맞춘다.
배경의 시작되는 위치를 요소의 상단에 맞춘다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Images Module Level 4 | 편집자 초안 |
Last review date: 2022-6-3 |