3가지 CSS color 속성 지정 방법

CSS의 색상지정 방법을 알아보자

시작 전에 참고로 이 글은 이전 CSS 학습 글에 이어진다. 이전 글은 학습목차를 참조하도록 하자. 다시 돌아와서 CSS 요소의 색상을 변경하고자 하는 경우, 색상 지정 방법에는 3가지가 있다. 미리 정해진 color의 이름을 속성 값으로 넣거나 RGB 혹은 16진수 값을 속성 값으로 입력하는 것이다.

• color 이름 - 예) "red"
• RGB 값 - 예) "rgb(255, 0, 0)"
• HEX 값 - 예) "#ff0000"

color 이름

Red, Green, Blue, Orange, Yellow, Cyan, Black 처럼 정해진 색상 이름을 color 속성 값으로 지정하는 방법이다.

참고로 color 이름은 대소 문자를 구분하지 않는다. 무슨 말이냐면 "Red"와 "red"또는 "RED"는 모두 같은 빨강으로 지정된다. color에 대한 좀 더 다양한 이름들을 알고자 한다면 css color 값 사이트를 참조하자.

RGB(빨강, 초록, 파랑)

RGB color 값은 rgb(빨강색, 초록색, 파랑색). 각각의 매개 변수(빨강, 녹색, 파랑)는 0에서 255 사이의 색상 강도 값을 정의한다.

예를 들어 rgb(255,0,0)이라고 하면 빨간색 자리가 가장 높은 값 255로 설정되고 다른 값은 0이므로 지정 색상은 빨간색이다.

참고로 회색 음영을 나타내려면 3개의 값을 동일하게 지정하여 넣으면 된다. 예를들어 rgb(255,255,255)는 흰색, rgb(0,0,0)은 검정색이다.

16 진수 색상

방금전 설명한 RGB 값은 #RRGGBB 형식의 16진수 색상 값을 사용하여 지정할 수도 있다. RR(빨강), GG(녹색) 및 BB(파랑)은 0x00에서 0xFF 사이의 16 진수 값이다 (십진수 0-255와 동일). 포토샵이나 그래픽 이미지 프로그램에서 색상 값을 보면 이렇게 표기되는 것을 자주 볼 수 있다.

예를 들어 #FF0000는 빨간색 자리 0xFF는 255란 의미, 나머지 0x00, 0x00은 0을 의미한다. 따라서 빨간색을 뜻한다. 참고로 16진수 값은 대소 문자를 구분하지 않는다. 즉 #ff0000은 #FF0000과 같다.

또한 앞서 언급했던것과 마찬가지로 회색 음영은 3개의 색상 값을 모두 동일하게 올리거나 낮춰주면 된다. #ffffff는 흰색, #000000은 검정색이다.

정리

CSS에서 요소의 색상을 지정하려면 color name, RGB, 16진수 입력 이렇게 3가지의 color 속성 지정 방법이 있다.