[CSS] 2. 텍스트 스타일(3) - 텍스트 컬러

 

 

이번 아티클에서는, 텍스트에 적용되는 색상의 값을 지정하는 요소를 사용해보겠습니다. 사실, 기본적으로 사용되는 컬러 속성은 간단하게 다음과 같이 사용할 수 있습니다. 

 

선택자 {
    color: <색상값>;
}

 

다만 여기서 중요한 것은, 색상값을 어떤식으로 작성해 부여하느냐입니다. HTML에서는 상황에 따라 소스에서 색상을 표현하는 방식이 여러가지가 존재하기 때문입니다. 꼭 CSS가 아니더라도 디자인이나 여러 개발/문서 작업에도 적용할 수 있는 상식이니 하나씩 차근차근 살펴보도록 하겠습니다.

 

 

---

 

 

○ 16진수로 컬러 표현하기

 

16진수는 우리가 일상적으로 '컬러코드'로 부르기도 합니다. [#nnnnnn] 형태로 표현하게 되죠. 아마 포토샵이나 파워 포인트에서도 컬러를 선택할 때 많이 보셨을 것입니다. 10진수는 0~9 까지의 숫자를 사용하지만 16진수는 0~9에 a~f까지를 사용하게 됩니다. 

 

'#'다음에 오는 6자리는 사실 어떤 의미를 갖는지 잘 모르는 분도 많았을 것입니다. #RRGGBB, 즉 RR은 Red(빨강)의 양, GG는 Green(초록)의 양, BB는 Blue(파랑)의 양을 표시하게 됩니다. 해당 색이 아예 없으면 00, 가득 찼으면 ff로 표시하게 되는 것이지요. 그래서 #000000(흰색) ~ #ffffff(검정색)의 범위를 갖게 됩니다. 

 

실제 적용할 때는 원하는 색상을 컬러 피커를 이용해 값을 확인하기도 합니다. 

 

 

 

 

○ hsl / hsla로 컬러 표현하기

 

hsl은 Hue(색상), Saturation(채도), Lightness(명도)의 줄임말입니다. 여기에 Alpha(투명도)가 더해지면 hsla가 됩니다. 각 항목의 정의와 설명은 다음 게시물을 참조해 보시면 좋겠습니다. 

 

https://manifold.net/doc/mfd8/colors_as_hue_saturation_and_brightness.htm

 

- 색상(Hue)은 360도로 배치한 색상환 표를 기준으로 확인할 수 있습니다.

- 채도(Saturation)는 아무것도 섞이지 않은 상태, 즉 채도가 가장 높은 100%일 때 색이 가장 환하고 0%일 때 회색입니다.

- 명도(Lightness)는 50%일 때가 원래의 색입니다. 100%면 흰색, 0%면 가장 어둡습니다.

- 투명도(Alpha)는 1일때 불투명, 0일 때 투명합니다. 

 

예를 들어 빨간색은 hsl(0, 100%, 50%) 또는 반투명하게 hsla(0, 100%, 50%, 0.5) 형태로 표현할 수 있습니다. 

 

 

 

 

○ 영문 색상 이름으로 컬러 표현하기

 

사실 가장 많이 쓰게되는 방법일 수 있습니다. VS code 등에서 단순한 컬러는 red, green, yellow 등으로 명시해 색상을 지정할 수 있습니다. 필요에 따라 사용하면 됩니다. 

 

 

 

 

○ rgb / rgba로 컬러 표현하기

 

rgb는 이름에서 알다시피 Red, Green, Blue를 의미합니다. 해당 색상이 전혀 섞이지 않은 경우를 0, 가득 찼을 경우를 255로 보며 이 역시 알파값을 붙여 rgba로 표시할 수 있습니다. 

 

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