색상은 웹사이트의 모양과 느낌을 좋게 하는 데 매우 중요합니다.
16진 코드(16진 색상 표현)
16진수는 6자리 색상 표현입니다. 처음 두 자리(RR)는 빨간색 값, 다음 두 자리는 녹색 값(GG), 마지막 두 자리는 파란색 값(BB)을 나타냅니다.
16진수 값은 Adobe Photoshop과 같은 모든 그래픽 소프트웨어에서 가져올 수 있습니다. 각 16진수 코드 앞에는 파운드 또는 해시 기호 #이 붙습니다. 다음은 16진수 표기법을 사용하는 몇 가지 색상 목록입니다. 다음은 16진수 색상의 몇 가지 예입니다. -
색상을 나타내기 위해 HTML에서 Hex 스타일을 구현하는 예를 살펴보겠습니다. −
예시
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<h2>Result</h2>
<table>
<colgroup>
<col span = "3" style = "background-color:#00FF00;">
<col style = "background-color:#00FFFF;">
</colgroup>
<tr>
<th>Id</th>
<th>Name</th>
<th>Percentage</th>
<th>Rank</th>
</tr>
<tr>
<td>009</td>
<td>Tom</td>
<td>98</td>
<td>1</td>
</tr>
<tr>
<td>011</td>
<td>Kieron</td>
<td>97</td>
<td>2</td>
</tr>
<tr>
<td>039</td>
<td>Gayle</td>
<td>95</td>
<td>3</td>
</tr>
<tr>
<td>017</td>
<td>Shaun</td>
<td>92</td>
<td>4</td>
</tr>
<tr>
<td>009</td>
<td>Kane</td>
<td>91</td>
<td>5</td>
</tr>
<tr>
<td>025</td>
<td>Steve</td>
<td>87</td>
<td>6</td>
</tr>
<tr>
<td>013</td>
<td>Jack</td>
<td>85</td>
<td>7</td>
</tr>
<tr>
<td>023</td>
<td>Tim</td>
<td>84</td>
<td>8</td>
</tr>
</table>
</body>
</html> 출력
RGB 색상 값
RGB 색상 값은 rgb() 속성을 사용하여 지정됩니다. 이 속성은 빨강, 녹색 및 파랑에 대해 각각 하나씩 세 가지 값을 취합니다. 값은 0에서 255 사이의 정수 또는 백분율일 수 있습니다.
다음은 RGB −
로 표시되는 일부 색상입니다.
색상을 표현하기 위해 HTML에서 RGB 스타일을 구현하는 예를 살펴보겠습니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<h2>Result</h2>
<table>
<colgroup>
<col span = "3" style = "background-color:rgb(255,0,0);">
<col style = "background-color:rgb(255,255,0);">
</colgroup>
<tr>
<th>Id</th>
<th>Name</th>
<th>Percentage</th>
<th>Rank</th>
</tr>
<tr>
<td>009</td>
<td>Tom</td>
<td>98</td>
<td>1</td>
</tr>
<tr>
<td>011</td>
<td>Kieron</td>
<td>97</td>
<td>2</td>
</tr>
<tr>
<td>039</td>
<td>Gayle</td>
<td>95</td>
<td>3</td>
</tr>
<tr>
<td>017</td>
<td>Shaun</td>
<td>92</td>
<td>4</td>
</tr>
<tr>
<td>009</td>
<td>Kane</td>
<td>91</td>
<td>5</td>
</tr>
<tr>
<td>025</td>
<td>Steve</td>
<td>87</td>
<td>6</td>
</tr>
<tr>
<td>013</td>
<td>Jack</td>
<td>85</td>
<td>7</td>
</tr>
<tr>
<td>023</td>
<td>Tim</td>
<td>84</td>
<td>8</td>
</tr>
</table>
</body>
</html> 출력
HSL 색상 값
HTML을 사용하면 HUE를 설정할 수도 있습니다. 즉 'H'는 색조, 'S'는 채도, 'L'은 밝기를 나타냅니다.
색상을 표현하기 위해 HTML에서 HSL 스타일을 구현하는 예를 살펴보겠습니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<h2>Result</h2>
<table>
<colgroup>
<col span = "3" style = "background-color: hsl(300, 75%, 85%); ">
<col style = "background-color: hsl(200, 30%, 40%);">
</colgroup>
<tr>
<th>Id</th>
<th>Name</th>
<th>Percentage</th>
<th>Rank</th>
</tr>
<tr>
<td>009</td>
<td>Tom</td>
<td>98</td>
<td>1</td>
</tr>
<tr>
<td>011</td>
<td>Kieron</td>
<td>97</td>
<td>2</td>
</tr>
<tr>
<td>039</td>
<td>Gayle</td>
<td>95</td>
<td>3</td>
</tr>
<tr>
<td>017</td>
<td>Shaun</td>
<td>92</td>
<td>4</td>
</tr>
<tr>
<td>009</td>
<td>Kane</td>
<td>91</td>
<td>5</td>
</tr>
<tr>
<td>025</td>
<td>Steve</td>
<td>87</td>
<td>6</td>
</tr>
<tr>
<td>013</td>
<td>Jack</td>
<td>85</td>
<td>7</td>
</tr>
<tr>
<td>023</td>
<td>Tim</td>
<td>84</td>
<td>8</td>
</tr>
</table>
</body>
</html> 이것은 다음과 같은 출력을 생성합니다 -
