이번 포스트에서는 짤막하게 쉬어가는 코너겸 앞으로 주구장창 나오게될 색상 표기에 대해 다루겠습니다.
여태까지 예제를 들면서 background-color, bgcolor, color...등등 수많은 색상 효과를 썼습니다. 그럴때 마다 저는 색상이름을 적는(ex. red, yellow, green...)방식을 사용했습니다. 하지만 웹 상에서는 여러가지 방법으로 색상을 표현 할 수 있습니다.
1. 색상 이름 표기법
yellow
색상 이름 표기법은 말 그대로 색의 이름을 적는 방식입니다. blue, red, black등 우리가 영단어로 표현 할 수 있는 색상들입니다.
하지만 이런 표기에는 단점이 있는데, 바로 모든 색을 단어로 표현 할 수 없다는 점 입니다. 그래서 색상 이름 표기법으로 표기 가능한 색상은 기본 16색 + 200색, 총 216가지 뿐 입니다. 이 216가지 색상을 웹 안전 색상이라고 하며 이 색깔들은 모든 브라우저에서 안전하게 작동하는 색상입니다.
※참고
기본 16색 - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
2. 16진수 표기법
#000000
색상을 #과 16진수 6자리로 표현하는 방식입니다.
16진수란, 컴퓨터의 수 표현 방식으로 0부터 F까지 사용하는 방식입니다.
일상에서 사용하는 수는 10진수로 0부터 9까지 사용하고 그 이후는 10, 11...이런식으로 나아가는 방면에 16진수는 9다음 A, B...이런식으로 F까지 즉, 10진수 15까지 표현하는 방식입니다.
| 10 진수 |
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 진수 |
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
다시 돌아와서, 16진수 표기법은 보편적으로 사용되고 있는 색상 표기법으로 #000000과 같은 방식으로 표현합니다.
각 자리는 #RRGGBB를 의미하는데 R은 빨간색의 양, G는 초록색의 양, B는 파란색의 양을 의미하는 자릿 수 입니다.
대문자와 소문자는 차이를 두지 않으므로 편한것을 이용하시면 됩니다.
참고로 16진수 표기법을 사용했을 때 사용가능한 색상은 #000000 ~ #FFFFFF까지 총 16,777,216가지의 색상이 표현 가능합니다.
또한, 각 두자리가 중복 될 경우에는 한 글자로 축약이 가능하다는 점을 가지고있습니다.
ex)
#EEFF00 => #EF0,
#FFFF00 => #FF0
다음은 모두 똑같은 파랑색을 표기하는 방법입니다.
16진수 표기법이 가장 보편적이기 때문에 이후의 포스트에서는 색상 표기를 가급적이면 16진수 표기법을 이용하도록 하겠습니다.
3. RGB, RGBA 표기법
rgb(0,0,0)
rgba(0,0,0,0)
RGB, 미술시간에 한 번이라도 들어봤을 법 한 이름. 네 말그대로 빨강과 초록, 파랑의 색의 양으로 색상을 나타내는 방식입니다. 다만 RGB(RGBA) 표기법은 10진수를 사용한다는 점입니다.
우선 RGB는 rgb(0,0,0) 방식으로 표기하는데 rgb(빨강,초록,파랑)을 나타내며, 각 자릿수는 십진수 0 ~ 255까지의 범위를 갖습니다.
그렇다면 RGBA는 무엇일까요?
RGBA의 A는 '알파'를 의미합니다. rgba(0,0,0,0) 방식으로 표기하며, 앞부분은 똑같이 빨강, 초록, 파랑을 의미하고 마지막 한자리는 알파값 입니다. 알파는 투명도로써 십진수 0 ~ 1사이의 소수로 표기합니다. 0으로 갈수록 투명해지고, 1로 갈수록 불투명해집니다.
보시다시피 같은 (0,0,255)파랑색임에도 불구하고 투명도가 갈리는 것을 볼 수 있습니다.
추가로, 투명도 표기할때 앞의 0은 생략하고 .1, .5와 같은 방식으로 표기가 가능합니다.
4. hsl, hsla 표기법
hsl( 0, 0%, 0%)
hsla( 0, 0%, 0%, 0 )
이름이 조금 생소할 수 도있는 이 표기법은 색상(Hue), 채도(Saturation), 명도(Lightness)를 이용한 표기 방식입니다.
rgb표기법과 마찬가지로 hsl(0,0%,0%)로 표기하며 첫번째는 색상, 두번째는 채도, 세번째는 명도를 나타냅니다.
우선 hue 색상에 대해 알아야 하는데요, hue 색상은 원안에 색상을 배치한 표입니다. 각 색은 0˚~360˚로 표기합니다.
사진출처 - www.quackit.com/css/functions/css_hue-rotate_function.cfm
다음은 채도와 명도인데요 채도와 명도는 0~100 까지 %의 단위를 갖습니다.
채도는 0으로 갈수록 검은색으로 나타나고 100으로 갈수록 순수한 색을 갖습니다.
명도는 0으로 갈수록 어둡고 100으로 갈수록 밝습니다. 0에서는 검은색 100에서는 흰색으로 나오기 때문에 명도를 50%로 설정해두는 경우가 가장 원색으로 나오게 됩니다.
사진 출처 - purple11.com/basics/hue-saturation-lightness/
hsl 표기법은 다음과 같이 사용합니다.
hsla 표기법은 마찬가지로 a는 알파 즉 투명도입니다. RGBA 표기법과 마찬가지로 0에서부터 1사이의 소수를 이용하며 완전히 같으므로 자세한 설명은 생략하겠습니다.
마지막으로 서로 다른 4가지 방식으로 같은 태그, 같은 속성을 가진 요소에 파랑색을 출력함으로써 정리해보겠습니다.
이것으로 웹 브라우저의 색상 표기법에 대해 알아보았습니다.
간단하게 정리하자면 16진수 표기법을 쓰는것을 가장 권고하는 바이며, 상황에 따라 네가지의 다른 색상표기법을 사용 하는 경우가 생길 수 있으므로 네가지 알아둬야 한다~ 입니다.
+ 사실 처음엔 간단한 내용일줄 알고 짤막하게 쉬어가는 포스트라고 명명했는데... 생각보다 내용이 많았습니다. 그리고 hsl표기법은 이번에 공부하면서 새로 알게된 방법이라서 공부해보고 포스트를 작성하느라 생각보다 시간이 소요되었네요.
'Programming > HTML, CSS' 카테고리의 다른 글
| [CSS] 텍스트 스타일 속성1 (0) | 2021.01.18 |
|---|---|
| [CSS] 가상 클래스, 가상 요소 (0) | 2020.09.28 |
| [CSS] 셀렉터 3 - 속성 셀렉터 (0) | 2020.09.27 |
| [CSS] 셀렉터 2 - 연결 셀렉터 (0) | 2020.09.26 |
| [CSS] 셀렉터 1 (0) | 2020.09.25 |
댓글