offfff

HTML 색 정의(HTML Colors) 본문

프로그래밍

HTML 색 정의(HTML Colors)

offfff 2016. 8. 31. 09:00

HTML Colors


HTML에서 색의 이름, RGB 값, 16진수 등을 사용해서 색깔을 명시할 수 있다.



Colors Names


HTML에서 색 이름으로 색을 정의하는 방법에 대해 알아본다.

HTML은 140가지의 표준 색 이름을 지원한다.


<!DOCTYPE html>

<html>

<body>


<h2 style="background-color:red">배경을 빨간색(red)으로 설정</h2>

<h2 style="background-color:orange">배경을 주황색(orange)으로 설정</h2>

<h2 style="background-color:yellow">배경을 노랑색(yellow)으로 설정</h2>

<h2 style="background-color:blue">배경을 파란색(blue)으로 설정</h2>

<h2 style="background-color:cyan">배경을 청록색(cyan)으로 설정</h2>


</body>

</html>


실행 결과는 아래와 같다.

배경을 빨간색(red)으로 설정

배경을 주황색(orange)으로 설정

배경을 노랑색(yellow)으로 설정

배경을 파란색(blue)으로 설정

배경을 청록색(cyan)으로 설정




RGB Value


HTML에서 RGB 값으로 색을 정의하는 방법을 알아본다. RGB는 Red, Green, Blue의 약어이다.

한 가지 색을 표현하기 위해, Red, Green, Blue 색은 각각 0~255 사이의 값을 가진다.

각각의 값을 비율로 색의 비중을 나타내는데, 예를 들어 빨간색은 rgb(255, 0, 0)으로 표현할 수 있다.

빨간색 비율 255(최대), 나머지 색 비율 0(최소)으로 섞어 빨간색을 만들어 냈다고 이해할 수 있다.

검은색은 rgb(0,0,0), 흰색은 rgb(255,255,255)로 표현하며, 값이 클수록 밝은 빛을 표현한다고 생각하면 된다.


<!DOCTYPE html>

<html>

<body>


<h2 style="background-color:rgb(255,0,0)">rgb(255,0,0)으로 설정</h2>

<h2 style="background-color:rgb(0,0,255)">rgb(0,0,255)으로 설정</h2>

<h2 style="background-color:rgb(255,255,0)">rgb(255,255,0)으로 설정</h2>

<h2 style="background-color:rgb(255,0,255)">rgb(255,0,255)으로 설정</h2>

<h2 style="background-color:rgb(0,255,255)">rgb(0,255,255)으로 설정</h2>


</body>

</html>


실행 결과는 아래와 같다.

rgb(255,0,0)으로 설정

rgb(0,0,255)으로 설정

rgb(255,255,0)으로 설정

rgb(255,0,255)으로 설정

rgb(0,255,255)으로 설정


무채색 계열(흰색, 회색, 검은색 등)은 각 색의 비율을 똑같이 하여 값을 조정하면 된다.
0에 가까울 수록 어둡고 255에 가까울 수록 밝다.

rgb(0,0,0)으로 설정

rgb(90,90,90)으로 설정

rgb(128,128,128)으로 설정

rgb(200,200,200)으로 설정

rgb(255,255,255)으로 설정




HEX Value


HTML에서 16진수로 색을 표현하는 방법을 알아본다.

#RRGGBB의 형식으로 표현하며, RR, GG, BB 각각에 00~FF의 값을 넣어 색을 결정한다.

00~FF는 십진수 0~255에 대응되는 범위로 색을 구성하는 원리는 RGB와 같고, 다만 표현을 16진수로 할 뿐이다.


<!DOCTYPE html>

<html>

<body>


<h2 style="background-color:#FF0000">#FF0000으로 설정</h2>

<h2 style="background-color:#00FF00">#00FF00으로 설정</h2>

<h2 style="background-color:#0000FF">#0000FF으로 설정</h2>

<h2 style="background-color:#FFFF00">#FFFF00으로 설정</h2>

<h2 style="background-color:#FF00FF">#FF00FF으로 설정</h2>

<h2 style="background-color:#00FFFF">#00FFFF으로 설정</h2>


</body>

</html>


실행 결과는 아래와 같다.


#FF0000으로 설정

#00FF00으로 설정

#0000FF으로 설정

#FFFF00으로 설정

#FF00FF으로 설정

#00FFFF으로 설정




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_colors.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 링크(HTML Links)  (0) 2016.09.02
HTML CSS  (0) 2016.09.01
HTML코멘트(HTML Comments)  (0) 2016.08.30
HTML 컴퓨터 코드(HTML Computercode)  (0) 2016.08.29
HTML 인용(HTML Quotations)  (0) 2016.08.28
'프로그래밍' Related Articles more