HTML 색(Color) 표현
HTML에서 색을 표현하는 방법은 다음과 같이 세 가지 방법이 있습니다.
1. 색상 이름으로 표현
2. RGB 색상값으로 표현
3. 16진수 색상값으로 표현
색상 이름으로 표현
W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Color</title>
</head>
<body>
<h1 style="color:blue">색상 이름으로 표현된 파란색</h1>
<h1 style="color:green">색상 이름으로 표현된 녹색</h1>
<h1 style="color:silver">색상 이름으로 표현된 은색</h1>
<h1 style="color:teal">색상 이름으로 표현된 청록색</h1>
<h1 style="color:red">색상 이름으로 표현된 빨간색</h1>
</body>
</html>
현재는 주요 브라우저가 140개의 색상 이름을 모두 지원하고 있습니다.
RGB 색상값으로 표현
모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다.
HTML에서도 위와 같이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용합니다.
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Color</title>
</head>
<body>
<h1 style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색</h1>
<h1 style="color:rgb(0,128,0)">RGB 색상값으로 표현된 녹색</h1>
<h1 style="color:rgb(192,192,192)">RGB 색상값으로 표현된 은색</h1>
<h1 style="color:rgb(0,128,128)">RGB 색상값으로 표현된 청록색</h1>
<h1 style="color:rgb(255,0,0)">RGB 색상값으로 표현된 빨간색</h1>
</body>
</html>
16진수 색상값으로 표현
16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것입니다.
따라서 각각의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가집니다.
예를 들면, 빨간색을 나타내는 RGB 색상값인 rgb(255,0,0)은 16진수 색상값으로는 #FF0000이 되는 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Color</title>
</head>
<body>
<h1 style="color:#0000FF">16진수 색상값으로 표현된 파란색</h1>
<h1 style="color:#008000">16진수 색상값으로 표현된 녹색</h1>
<h1 style="color:#C0C0C0">16진수 색상값으로 표현된 은색</h1>
<h1 style="color:#008080">16진수 색상값으로 표현된 청록색</h1>
<h1 style="color:#FF0000">16진수 색상값으로 표현된 빨간색</h1>
</body>
</html>
개인적인 의견일지도 모르지만
주로 html 코딩할 때 3가지의 색표현을 하지만
rgb 또는 16진수의 색상값을 제일 많이 씁니다.
좀더 다양한 색상 표현이 가능하기 때문이죠 :)
(보통 색상이름으로 표현된 색상값은 white / black 이외에는 잘 쓰지 않는듯 ...)
이상 html 색상 표현에 대해 알아봤습니다. ^^
'share > html' 카테고리의 다른 글
| [HTML] 하이퍼링크(hyperlink)와 타겟(target)넣기 (0) | 2022.01.31 |
|---|---|
| [HTML] 배경넣기 background color/image (0) | 2022.01.30 |
| [HTML] 스타일 적용하기 <style> - 태그 스타일 꾸미기 (0) | 2022.01.28 |
| [HTML] 엔티티(Entity) - 예약어 (공백과 특수기호 사용하는 방법) (0) | 2022.01.26 |
| [HTML] 주석 처리 <!-- --> (comment) (0) | 2022.01.24 |
