[CSS] color

Color 

폰트의 색상 값을 적용할 때 사용하는 속성이다. 

h1  {  color: 색상 값;}

 

색상 값 지정 방식

컬러 키워드

CSS 자체에서 사용 가능한 문자 식별자로 red, blue, black 등과 같이 미리 정의되어있는  키워드를 이용해 색상을 표현할 수 있다. (transparent는 투명을 나타내는 키워드이다.)

color: red;

16 진법 ex. #RRGGBB

6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타낸다. 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미하며, 각 자리의 알파벳은 대소문자를 구분하지 않는다. 

color: #ff0000;

16 진법 ex. #RGB

6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있다. 예를 들어, #aa11cc 는 #a1c로 축약하여 사용할 수 있다. 

color: #f00;

rgb( )

RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의한다. 0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타낸다. 

color: rgb(255, 0, 0);

rgba( )

color: rgba(255, 0, 0, 0.5);

RGBA 값은 기존 RGB에서 A값이 추가된 형태이며, rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의한다. A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기함에 주의한다. 0 → 1은 투명 → 불투명으로 값의 변화를 나타낸다. 예를 들어, rgba( 0, 0, 0, 0)는 투명한 색상을 가지게 된다.

rgba(0, 0, 0)과 같이 투명도의 값을 설정하지 않으면 해당 색상 속성이 아예 적용되지 않는다는 것을 주의하자! (default가 0이 아니라 아예 적용이 안 되는 것이다.)