색상(Color)

📌 color

color 속성을 사용하면 텍스트의 글자 색상을 지정할 수 있습니다.

앞에서 살펴본 바와 같이 색상과 관련된 값은 색의 3원색, 즉 빨강(Red), 초록(Green), 파랑(Blue) 값으로 표현하는 RGB 형식뿐만 아니라 색상(hue), 채도(saturation), 명도(lightness)를 의미하는 HSL 형식과 함께 투명도(alpha) 등도 제공되기 때문에 좀 더 다양한 방법으로 지정할 수 있게 되어 CSS가 표현할 수 있는 색상의 폭이 더욱 넓어졌습니다

div { 
	color: rgb(255, 0, 0, 0.5); 
}

p { 
	color: hsla(27,88%,58%,0.7); 
}

MDN color 속성

📌 opacity

opacity는 CSS Color Module에 속한 속성으로 요소 박스의 투명도를 지정할 수 있습니다. 이때 속성 값은 "0"에서 "1" 사이의 값을 지정할 수 있으며, "0"은 투명, "1"은 불투명을 의미합니다.

div { 
	opacity: 0.5; 
}

MDN opacity 속성

배경(Background)

📌 background-color

background-color는 요소의 배경색을 지정하는 속성으로, background-color 속성이 적용되는 범위는 기본적으로 요소의 content 영역과 padding 영역입니다. background-color 속성은 color 속성과 마찬가지로 다양한 색상 값을 사용할 수 있기 때문에 RGBA 형식이나 HSLA 형식으로 투명 효과를 지정할 수 있습니다.

이때 opacity 속성을 사용하여 요소를 투명하게 하는 것과의 차이점은 요소 전체의 투명도가 아닌 배경 색상에 대한 투명도만 지정된다는 점입니다.

div { 
	background-color: rgb(255, 255, 0, 0.5); 
}