1. 색상명으로 표현
색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="background-color:red;">colorname : red</p> <p style="background-color:green;">colorname : green</p> <p style="background-color:blue;">colorname : blue</p> </body> </html> | cs |
2. RGB값으로 표현
rgb(red, green, blue)와 같은 형식으로 색을 표현한다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 결정짓는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="background-color:rgb(255, 0, 0);">red</p> <p style="background-color:rgb(0, 255, 0);">green</p> <p style="background-color:rgb(0, 0, 255);">blue</p> <br> <p style="background-color:rgb(100%, 0%, 0%);">red</p> <p style="background-color:rgb(0%, 100%, 0%);">green</p> <p style="background-color:rgb(0%, 0%, 100%);">blue</p> </body> </html> | cs |
3. RGBA값으로 표현(CSS3)
RGB 표현의 확장으로, 불투명도를 지정하는 기능이 추가된 것이다.
rgba(red, greed, blue, alpha)로 표현하며 alpha 변수의 값은 0.0(투명)과 1.0(불투명) 사이의 값 중 지정한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="background-color:rgba(255, 0, 0, 0.2);">red</p> <p style="background-color:rgba(255, 0, 0, 0.4);">red</p> <p style="background-color:rgba(255, 0, 0, 0.6);">red</p> <p style="background-color:rgba(255, 0, 0, 0.8);">red</p> </body> </html> | cs |
4. HEX값으로 표현
#RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법이다. RR, GG, BB는 각각 red, green, blue를 나타내는 값이며 16진수 00에서 FF사이의 값으로 결정된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="background-color:#000000; color:#FFFFFF">black</p> <p style="background-color:#FF0000;">red</p> <p style="background-color:#00FF00;">green</p> <p style="background-color:#0000FF;">blue</p> <p style="background-color:#FFFF00;">yellow</p> <p style="background-color:#FF00FF;">fuchsia</p> <p style="background-color:#00FFFF;">aqua</p> <p style="background-color:#FFFFFF;">white</p> </body> </html> | cs |
5. HSL/HSLA값으로 표현(CSS3)
HSL는 Hue(색상), Saturation(채도), Lightness(명도)로 색상을 정의하는 방법이다.
색상은 0부터 360까지의 색상환에 따라 결정되며 0:red, 120:green, 240:blue로 나타난다.
채도와 명도는 백분율로 나타낸다.
HSLA는 HSL방식에서 불투명도 지정 기능이 추가된 것이며 HSLA(색상,채도,명도,불투명도) 형식으로 나타낸다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="background-color:hsl(0,100%,80%);">채도 100%, 밝기 80%</p> <p style="background-color:hsl(0,100%,60%);">채도 100%, 밝기 60%</p> <p style="background-color:hsl(0,100%,40%);">채도 100%, 밝기 40%</p> <p style="background-color:hsl(0,100%,20%);">채도 100%, 밝기 20%</p><br> <p style="background-color:hsl(0,80%,50%);">채도 80%, 밝기 50%</p> <p style="background-color:hsl(0,60%,50%);">채도 60%, 밝기 50%</p> <p style="background-color:hsl(0,40%,50%);">채도 40%, 밝기 50%</p> <p style="background-color:hsl(0,20%,50%);">채도 20%, 밝기 50%</p> </body> </html> | cs |
+) Opacity 속성(CSS3)
전체 요소(배경색, 텍스트 색상 포함)의 불투명도를 설정하는 속성이다.
속성 값은 0.0(투명)에서 1.0(불투명)사이의 값이다.
+) 참조 사이트(https://www.w3schools.com/cssref/css_colors.asp)
모든 브라우저에서 지원되는 색상 목록
'프로그래밍 > 웹표준' 카테고리의 다른 글
| [CSS] 4. 텍스트 서식 지정 (1) | 2017.06.30 |
|---|---|
| [CSS] 3. 배경 설정하기 (0) | 2017.06.27 |
| [CSS] 1.CSS 소개와 사용방법 (0) | 2017.06.18 |
| 14. 글자 서식 지정과 특수 문자 표현 (0) | 2017.05.14 |
| 13. 양식 만들기 <form> (0) | 2017.02.27 |
댓글,
