CSS 에서 색깔을 지정하는 방법은 아래처럼 5가지 방법이 있습니다
| Format | Syntax | Example |
|---|---|---|
| Hex Code | #RRGGBB | p{color:#FF0000;} |
| Short Hex Code | #RGB | p{color:#6A7;} |
| RGB % | rgb(rrr%,ggg%,bbb%) | p{color:rgb(50%,50%,50%);} |
| RGB Absolute | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,255);} |
| keyword | aqua, black, etc. | p{color:teal;} |
아래에서 좀 더 자세히 알아보도록 하죠.
16진수 코드로 표현할 때는 # 기호를 먼저 붙여주고 6자리의 RRGGBB 코드를 넣어주면 됩니다. RGB의 R은 빨강, G는 초록, B는 파랑입니다. RR이라는 것은 빨강을 나타내는 16진수 숫자를 말합니다. 예를 들면 00부터 FF까지의 값이 됩니다. GG와 BB역시 마찬가지입니다.
아래는 이렇게 16진수를 이용해서 색깔을 표시했을 때 어떻게 화면에 보여지는지를 보여주는 표입니다.
| Color | Color HEX |
|---|---|
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #FF00FF | |
| #C0C0C0 | |
| #FFFFFF |
| Color | Color HEX |
|---|---|
| #000 | |
| #F00 | |
| #0F0 | |
| #0FF | |
| #FF0 | |
| #0FF | |
| #F0F | |
| #FFF |
이 방법은 rgb( ) 속성을 이용합니다. 0 부터 255 숫자나 퍼센트를 값에 넣어줄 수 있습니다.
NOTE: 모든 브라우저가 rgb() 속성을 지원하는 것이 아니기 때문에 이 방법은 권장하지 않습니다.
| Color | Color RGB |
|---|---|
| rgb(0,0,0) | |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
| rgb(255,255,0) | |
| rgb(0,255,255) | |
| rgb(255,0,255) | |
| rgb(192,192,192) | |
| rgb(255,255,255) |
예제 :
<body style="color:rgb(0,0,255); background-color:rgb(0,255,0);">
색깔 코드를 만들어주는 칼라 코드 빌더라는게 있네요. HTML Color Code Builder.
아래 표는 브라우저의 영향이나 컴퓨터 디스플레이의 영향을 가장 안받는 그런 칼라표라고 하네요. 총 216 개의 색깔이 있습니다.
색깔을 보고 맘에드는거 코드 골라다가 쓰시면 됩니당. ^____^
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Reference : http://www.tutorialspoint.com/css/css_colors.htm
| [CSS] 7. Fonts ( 폰트 설정 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 6. Background ( 배경 설정 ) (0) | 2016.06.12 |
| [CSS] 4. Units ( 단위 ) (0) | 2016.06.12 |
| [CSS] 3. HTML에 CSS링크 - Associating Styles with HTML (0) | 2016.06.12 |
| [CSS] 2. Syntax ( 문법, 사용법 ) (0) | 2016.06.12 |