CSS 기초부터 활용하기 3편 (색상 편)

안녕하세요 도롱군 입니다.

1편, 2편에 이어서 3편에 들어갑니다.

이제 어느정도 CSS 배열에 대해서 어떤 느낌인지 감이 오는 수준입니다.

이전 게시물

• CSS 기초부터 활용하기 1편 
• CSS 기초부터 활용하기 2편 (스타일 시트 편)

오늘은 CSS의 색상에 대해서 알아보도록 하겠습니다.

색은 사전 뜻과 같이 서로 구별되는 특성이라 합니다, 시각적인 요소가 포함되어 각 색상마다의 여러가지 의미를 갖기도 합니다.

그 만큼 스타일을 표현할 때 정말 중요한 요소 중 하나입니다.

CSS에서의 색상을 표현하는 방법은 많습니다, CSS 내에서만 3가지 방법으로 낼 수 있으며 CSS3를 통하여 opacity(투명도)를

줄 수도 있습니다.

아래와 같이 3가지 방식으로 색상을 표현 할 수 있습니다.

• CSS 내 유효 색상 이름 : "red", "blue", "green" 등
• HEX 값 : "#FFFFFF", #FF9000", "#000000"
• RGB 값 : rgb(255,255,255) , rgb(0,0,0) 등

1. CSS 내 유효 색상 이름 (정의 색상)

이런 식으로 Brackets에서 색상을 철자 하나만 적어줘도 맘에 드는 컬러셋을 알아 낼 수 있습니다.

기본적으로 CSS에 포함되어 있는 색상들이기에 정의되어 있는 컬러만 사용 가능합니다.

ex ) darkblue (가능) , darkpurple (불가능)

2. RGB 색상

위의 사진과 같이 RGB는 각각 아래와 같은 의미를 두고 있습니다. 흔히 빛의 3원색이라고 합니다.

R = RED, G = GREEN, B = BLUE

따라서 0부터 255까지 표현할 수 있으며, 적,녹,청을 조합하여 새로운 색상을 만들어 낼 수 있습니다.

CSS 스타일 형식은 위와 같습니다. 

3. HEX (16 진수)

위의 두 방법 말고도 많이 사용하고 계시는 컬러셋 중 하나이며, HTML 색상표로 많이 알고 계시는 16 진수 색상은

#RRGGBB 형식으로 되어있습니다.

ex)  #FF9000 , #FF0000

FF0000의 경우 #RRGGBB 중 RR만 16 진수 중 가장 높은 값인 F를 최대치로 올려 255를 뜻합니다. (10진수 rgb 코드와 동일합니다.)

위의 색상표와 같이 나타낼 수 있습니다.

4. RGBA 속성 (CSS3)

RGBA와 RGB의 차이는 CSS와 CSS3의 경계뿐만 아니라, 투명도(Opacity)를 줄 수 있는 속성입니다.

사용 방식은 위의 RGB와 같지만 마지막 한 줄이 더 붙어서 투명도 조절을 할 수 있게 해줍니다.

CSS에선 여러 방면 HSLA와 같이 자주 사용되는데, 필자는 RGBA를 주로 자주 사용합니다.

다만, CSS가 아닌 CSS3 이기에, CSS 접두어와 같이 사용해야 정상적으로 타 브라우저에도 호환이 됩니다.

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

Bold 처리가 된 부분이 투명도를 조절할 수 있으며, CSS 접두어와 같이 사용해야합니다.
(접두어는 여기에서도 사용 되는 것을 보여 드렸습니다, 참고하세요.)

	Chrome	IE	Firefox	Safari	Opera
RGBA, HSL, HSLA	4.0 -webkit-	9.0	3.0 -moz-	3.1 -webkit-	10.1 -o-
Opacity	4.0 -webkit-	9.0	2.0 -moz-	3.1 -webkit-	10.1 -o-