5.2 색(Color)을 표현하는 방법
기본적으로 HTML이나 HTML5에서 색을 표현하는 방법은 색 이름(color Name) 키워드 형태로 나타내는 방법과 color 속성에서
설명한대로 숫자형 색상값으로 나타내는 방법이 있습니다.
색 이름(color Name) 키워드 형태로 나타내는 기본 색상(Basic Color)는 “HTML요소{color:색이름}” 형태로 간단하게 사용할 수 있으며 사용할 수
있는 색이름은 “black”, “silver”, “gray”, “white”, “maroon”, “red”, “purple”,
“fuchsia”, “green”, “lime”, “olive”, “yellow”, “navy”, “blue”, “teal”, “aqua” 총 16 가지 색을 사용할 수 있습니다.
색 이름(color Name)을 이용하여 color 속성을
설정하기에는 여러분들이 필요로 하는 색(color)을 표현하기에는 너무 부족하다고 느낄 것입니다. 그래서 W3C에서 다양한 색을 사용할 수 있도록 색을 숫자형을 나타낼
수 있도록 권고하고 있는데 표로 나타내면 다음과 같습니다.
|
이름 |
형식 |
|
RGB hex |
#rrggbb, #rgb |
|
RGB decimal |
rgb(rrr, ggg, bbb) |
|
RGB percentage |
rgb(rrr%, ggg%, bbb%) |
|
RGBA |
rgba(rrr, ggg, bbb, d.d) |
|
HSL |
hsl(hhh, sss%, lll%) |
|
HSLA |
hsl(hhh, sss%, lll%, d.d) |
5.2.1 RGB
RGB를 이용한 색(color) 속성값을 설정하는 방법은
빛의 3원색인 빨강색(Red), 녹색(Green), 파란색(Blue)을 이용하여 “#3자리의 16진수” 혹은
“#6자리의16진수” 형태나
10진수, %를 이용하여 색을 표현하는 방법으로 이를 RGB 색상값(color value)라고 합니다. color 속성값이 빨강(red)일 경우 각각에 대한 사용 형식을
나타내면 다음과 같습니다.
HTML요소{color: #f00}
HTML요소{color: #ff0000}
HTML요소{color: rgb(255, 0, 0)}
HTML요소{color: rgb(100%, 0%, 0%)}
이해를 돕기
위해서 0부터 15까지를 우리가 평소 사용하는 10진법과 16진법을 비교하여 나타내면 다음과 같습니다.
0 1 2 3
4 5 6 7 8 9 10 11 12 13 14 15 -----
10진법
0 1 2 3 4 5 6 7 8 9 a b c
d e f
----- 16진법
위에서 보는
것처럼 0부터 9까지 동일합니다만 10부터 15까지는 각각 a부터 f로 다르게 표현합니다. 이와 같이
10진법은 0~9로 수를 표현하고 16진법은 0~f로 수를 표현하게 됩니다.
그래서 빨강색(Red), 녹색(Green), 파란색(Blue) 각 색에 대해서 16진수,
10진수, 퍼센트 형태에 대해서 해당 색(color)의
있고 없음을 나타내면 다음과 같습니다.
|
이름 |
색 없음 |
색 있음 |
|
RGB hex |
0 혹은 00 |
f 혹은 ff |
|
RGB decimal |
0 |
255 |
|
RGB percentage |
0% |
100% |
이제 예제를
간단하게 하나 해볼까요? h1,h2, h3, h4 요소를 이용하여
RGB 사용방법을 봅니다. 메모장을 열어서 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>rgb 예제</title>
<style type="text/css">
h1{color:#f00}
h2{color:#ff0000}
h3{color:rgb(255, 0, 0)}
h4{color:rgb(100%, 0%, 0%)}
</style>
</head>
<body>
<h1>HTML5,CSS3 and
JavaScript</h2>
<h2>HTML5,CSS3 and
JavaScript</h2>
<h3>HTML5,CSS3 and
JavaScript</h2>
<h4>HTML5,CSS3 and
JavaScript</h2>
</body>
</html>
<style> … </style> 블록 내에 h1,h2, h3, h4 요소를
color 속성값을 모두 빨강색(red)으로 RGB 표현을 이용해서 설정해주었습니다. “rgbEx.html”로
저장합니다. IE9를 통해 보면 다음과 같이 스타일을 설정한대로 나타납니다.
끝으로 RGB 색상을 이용하는데 도움일 될 수 있는 사이트를 하나 소개하면 다음과 같습니다.
http://www.colorschemer.com/online.html
5.2.2 RGBA
RGBA는 RGB에 불투명도(opacity)를 나타내는 Alpha값이 포함된 형태로 RGBA에는 RGB에서 설명한 16진수
형태로 사용하지 않고 다음과 같이 0에서 255사의 정수를
사용하는 10진수 형태, %를 이용하여 RGB 색을 표현하고 여기에 Alpha 값을 추가하여 다음과 같은
형식을 사용합니다.
여러분들은 불투명도(opacity)와 관련하여 대해서 이미 opacity 속성에서 보았으므로
간단한 예제를 통해 RGBA 색 표현에 대해 그 사용 방법을 알아봅니다. 메모장으로 “rgbEx.html”을 열어서 <style> … </style> 부분을 다음과 같이 수정합니다.
<style type="text/css">
h1{color:rgba(255, 0, 0, .4)}
h2{color:rgba(255, 0, 0, .6)}
h3{color:rgba(255, 0, 0, .8)}
h4{color:rgba(100%, 0%, 0%, 1)}
</style>
다른 이름으로 저장을 선택하여 “rgbaEx.html”로 저장한 후 IE9로 보면 다음과 같이 alpha값이 0.2씩 차이남에 따라 그 문자열의 색상이 변경되어 나타나는 것을 알 수 있습니다.
5.2.3 HSL
RGB를 이용한 색 표현 방법이 지금은 거의 사용하지 않는 일명 배불뚝이 모니터인 CRT 모니터의 전자총에서 나온 3원색(Red, Green, Blue)의 빔을 모니터 화면에 나타내어 색을 표현합니다.
CRT 모니터에 나타낼 수 있는 색 즉 지극히 하드웨어에 기반한 색의 표현이라는 한계가 노출됩니다.
그래서 색의 3요소인 색상(Hue), 채도(Saturation), 명도(Lightness)를 이용하여 색을 표현 방법으로 CSS3에서 새롭게 등장하였고 다음과 같은 형식을 사용합니다.
색상(Hue)는 색을 나타내는 원형의 각을 나타내는 것으로 0과 360 사이의 정수값으로 설정하여 사용하며 전형적으로 0은 빨강색, 60은 노랑색, 120은 녹색, 청록색(cyan)은 180은 cyan,
240은 파란색, 300은 자홍색(magenta)을
나타냅니다.
이에 대한 자세한 내용은 “http://en.wikipedia.org/wiki/Color_wheel“을
참고하세요.
다음으로 채도(Saturation)는 색(color)의 맑기, 즉
색의 선명한 정도를 나타내는 것으로 0%부터 100% 사이의
값으로 설정하며 0%는 색(color)이 없음을, 100%는 색(color)이 있음을 나타냅니다.
명도(Lightness)는 색의 밝고 어두움을 나타내는데 사용하며 채도(Saturation )와 마찬가지로 0%부터 100% 사이의
값으로 설정하며 0%는 검정(black)을 100%는 흰색(white)를 나타냅니다.
채도와 명도 사이의 관계에 대한 사용 예는 “http://www.w3.org/TR/css3-color/#hsl-color”을
참고하면 이해에 도움이 될 것입니다.
이제 메모장으로 “rgbEx.html”로 파일을 열고 <style> … </style> 블록 부분을 다음과 같이 변경합니다.
<style type="text/css">
h1{color:hsl(0, 100%, 50%)}
h2{color:hsl(60, 100%, 50%)}
h3{color:hsl(120, 100%, 50%)}
h4{color:hsl(180, 100%, 50%)}
</style>
다른 이름으로 저장을 선택하여 “hslEx.html”로
저장한 후 IE9를 이용하여 보면 다음과 같이 색상(hue)를
기준으로 0은 빨강색, 60은 노랑색, 120은 녹색, 청록색(cyan)은 180은 cyan 형태로 그 결과를 화면에 나타냅니다.
이외에도 HSL에 Alpha값을 추가한 형태인 HSLA 색 표현 방법도 있으며 이에 대해서는 설명을 생략합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6.2 font-weight 속성을 이용하여 글자 가늘고 굵게 만들기 (0) | 2013.08.04 |
|---|---|
| 6. 폰트(Font) (0) | 2013.08.04 |
| 5. 색(Color) (0) | 2013.08.04 |
| 4. CSS에서 사용되는 수치(Measurements) (0) | 2013.08.04 |
| 3. CSS 적용 우선 순위 (2) | 2013.08.04 |