책 씹어먹는 즐거움

CSS에서는 배경색(background color), 경계선(border), 글자색(text color) 등 많은 부분에 색깔이 들어간다. 따라서 이러한 색깔을 나타내는 몇 가지 방식을 살펴볼 필요가 있다.

CSS에서 색깔을 입력하는 방식은 색깔명(color name), RGB, HEX, HSL, RGBA, HSLA의 6가지를 주로 말한다. 이 중에서 HSL과 HSLA를 제외한 나머지 4가지만 알아보자.

색깔명(color name)

CSS에서는 다음과 같이 색깔명(color name)으로 해당 색깔을 불러올 수 있다. 

색깔명(color name)은 대소문자를 구분하지 않는다.

과거에는 CSS에서는 16가지 색깔명(color name)만 허용되었지만 현재는 대략 140개의 색깔명(color name)을 대부분의 브라우저에서 지원하고 있어 그 사용폭이 늘었다. 

RGB

색깔명(color name)은 이름을 아는 색을 사용할 경우 편하지만 1,600만 가지의 색 중 140개 정도의 색만 사용할 수 있다는 한계가 있다. 따라서 미묘한 색감을 표현하고자 하는 사람이라면 보다 나은 방법을 찾고자 할 것이다. 

RGB는 빛의 삼원색인 Red(빨강), Green(초록), Blue(파랑)의 세 종류의 색을 말한다. 컴퓨터 모니터, TV 등은 모두 이 RGB를 적당히 섞어서 다른 모든 색을 조합한다. 즉, RGB는 모니터가 색깔을 구현하는 원리인 셈이다.

CSS에서 RGB로 색깔을 구현할 때는 다음의 공식을 이용하여 RGB색을 구현한다. 

red, green, blue는 각각 0~255까지의 수를 가질 수 있는 인자(parameter)로 각각, Red, Green, Blue의 3색이 섞이는 정도를 의미한다. 

red, green, blue의 인자는 0~255까지의 수 대신에 0~100%의 비율로 나타낼 수도 있다. 단, rgb 내에서 숫자와 %를 섞어서 쓰지 않는다. 즉, rgb(100%, 50, 20) 같이 섞어서 쓰지 않는다.

RGB를 사용한 예는 다음과 같다. 

RGBA

RGBA는 RGB에서 투명도를 의미하는 알파(A)를 첨가한 것이다. 

함수는 rgb와 거의 유사한 rgba 이고 투명도를 의미하는 α 인자(parameter)가 첨가된 것이다. 다음과 같은 공식을 사용한다. 

red, green, blue는 rgb에서와 동일하고 α는 0.0~1.0까지의 값을 가진다. 0은 투명, 1은 완전 불투명이다. 

HEX 코드는 항상 #으로 시작한다.

HEX 코드는 6개의 자리로 이루어져있는데 처음 두개(rr)는 빨간색, 다음 두개(gg)는 녹색, 마지막 두개(bb)는 파란색을 나타낸다.  

앞에서 RGB에서 red, green, blue는 각각 0~255까지 총 256개의 수로 표현된다. 256개는 2의 8승으로 8비트에 해당하는 숫자이고 이는 16진수 2자리로 나타낼 수 있다. 즉, 다음과 같다.

실제 전환되는 사례는 다음과 같다. 

HEX 코드를 사용한 예는 다음과 같다. 

파일 용량을 미세하게 줄일 수 있어서 실무에서는 RGB보다 HEX 코드를 더 많이 사용한다고 한다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:    0048 CSS로 색깔 넣기.apkg