color 속성은 요소의 콘텐츠의 색상입니다.
background-color 속성은 요소의 배경색입니다.
CSS 색상은 미리 정의된 색상의 이름 또는 HEX, RGB, HSL 그리고 투명값을 지정할 수 있는 RGBA, HSLA 값을 사용하여 지정합니다.
값에 transparent 지정하면 투명하게 칠합니다.
p {
color: orange; /* 전경색 */
background-color: pink; /* 배경색 */
}
색상의 이름을 사용하여 색상을 지정할 수 있습니다.
HTML은 140개의 표준 색상 이름을 지원합니다.
white, blue, orange, pink, black 등등
#rrggbb
16진수값으로 색상을 지정합니다.
rr, gg, bb는 각각 red, green, blue입니다.
값은 00~FF(0~255)까지의 16진수이며, 앞에 #을 붙여 표시합니다.
rgb(red, green, blue)
rgba(red, green, blue, alpha)
rgb, rgba 함수로 색상을 지정할 수 있습니다.
red, green, blue : 0 ~255 색상의 강도를 정의합니다.
alpha : 0 ~ 1사이의 실수로 투명도를 지정합니다. 0은 투명이고 1은 불투명입니다.
hsl(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)
hsl, hsla 함수로 색상을 지정할 수 있습니다.
hue : 색조를 나타내며 0~360의 색상환에 대한 정도입니다.
0은 빨간색, 120은 녹색, 240은 파란색 입니다.
saturation : 0% ~ 100% 채도를 나타냅니다.
lightness : 0% ~ 100% 명도를 나타냅니다.
alpha : 0 ~ 1사이의 실수로 투명도를 지정합니다.
transparent 값은 색상을 투명하게 칠합니다.
opacity 속성은 요소의 투명도를 지정합니다.
0 ~ 1 사이의 실수로 투명도를 지정합니다.