HTML-색상
색상은 웹 사이트에 좋은 모양과 느낌을주기 위해 매우 중요합니다. <body> 태그를 사용하여 페이지 수준에서 색상을 지정하거나 다음을 사용하여 개별 태그의 색상을 설정할 수 있습니다.bgcolor 속성.
<body> 태그에는 다른 색상을 설정하는 데 사용할 수있는 다음 속성이 있습니다.
bgcolor − 페이지의 배경색을 설정합니다.
text − 본문 텍스트의 색상을 설정합니다.
alink − 활성 링크 또는 선택한 링크의 색상을 설정합니다.
link − 링크 된 텍스트의 색상을 설정합니다.
vlink− 방문한 링크 , 즉 이미 클릭 한 링크 된 텍스트 의 색상을 설정합니다 .
HTML 색상 코딩 방법
웹 페이지에서 색상을 설정하는 방법은 다음 세 가지가 있습니다.
Color names − 녹색, 파란색 또는 빨간색과 같은 색상 이름을 직접 지정할 수 있습니다.
Hex codes − 색상을 구성하는 빨강, 녹색 및 파랑의 양을 나타내는 6 자리 코드.
Color decimal or percentage values −이 값은 rgb () 속성을 사용하여 지정됩니다.
이제 우리는 이러한 색상 체계를 하나씩 볼 것입니다.
HTML 색상-색상 이름
직접 색상 이름을 지정하여 텍스트 또는 배경 색상을 설정할 수 있습니다. W3C는 HTML 유효성 검사기로 유효성을 검사 할 16 개의 기본 색상 이름을 나열했지만 주요 브라우저에서 지원하는 200 개 이상의 다른 색상 이름이 있습니다.
Note− HTML 색상 이름 의 전체 목록을 확인합니다 .
W3C 표준 16 색
다음은 W3C Standard 16 Colors 이름 목록이며 사용을 권장합니다.
검정 | 회색 | 은 | 하얀 | ||||
노랑 | 라임 | 아쿠아 | 푹샤 | ||||
빨간 | 초록 | 푸른 | 보라색 | ||||
적갈색 | 올리브 | 해군 | 물오리 |
예
다음은 HTML 태그의 배경을 색상 이름으로 설정하는 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML 색상-16 진수 코드
16 진수는 색상을 6 자리로 표현한 것입니다. 처음 두 자리 (RR)는 빨간색 값, 다음 두 자리는 녹색 값 (GG), 마지막 두 자리는 파란색 값 (BB)입니다.
16 진수 값은 Adobe Photoshop, Paintshop Pro 또는 MS Paint와 같은 그래픽 소프트웨어에서 가져올 수 있습니다.
각 16 진수 코드 앞에는 파운드 또는 해시 기호 #이옵니다. 다음은 16 진수 표기법을 사용하는 몇 가지 색상 목록입니다.
색깔 | 색상 HEX |
---|---|
# 000000 | |
# FF0000 | |
# 00FF00 | |
# 0000FF | |
# FFFF00 | |
# 00FFFF | |
# FF00FF | |
# C0C0C0 | |
#FFFFFF |
예
다음은 16 진수 색상 코드로 HTML 태그의 배경을 설정하는 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML 색상-RGB 값
이 색상 값은 rgb( )특성. 이 속성은 빨강, 녹색 및 파랑에 대해 각각 하나씩 세 가지 값을 사용합니다. 값은 0에서 255 사이의 정수 또는 백분율 일 수 있습니다.
Note − 모든 브라우저가 색상의 rgb () 속성을 지원하지 않으므로 사용하지 않는 것이 좋습니다.
다음은 RGB 값을 사용하여 몇 가지 색상을 보여주는 목록입니다.
색깔 | 컬러 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) |
예
다음은 rgb () 값을 사용하여 색상 코드로 HTML 태그의 배경을 설정하는 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
브라우저 안전 색상
다음은 가장 안전하고 컴퓨터 독립적 인 색상으로 간주되는 216 색상 목록입니다. 이 색상은 헥사 코드 000000에서 FFFFFF까지 매우 다양하며 256 색상 팔레트를 가진 모든 컴퓨터에서 지원됩니다.
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 |