KoXo 자바스크립트 매뉴얼 - 일반 참조

웹문서 색상 기본

웹문서에서 사용하는 색상은 기본적으로 다음과 같이 구분해 볼 수 있다.

배경색 (background color)

문서 전체나 일정 개체의 바탕에 깔리는 색상으로 그 위층에 글자나 다른 내용이 표현된다.

글자색 (foreground color)

문서 전체나 일정 개체의 배경색 위에 나타나는 글자색을 말한다.

연결색

하이퍼 링크 연결(link)에 나타나는 색상으로 네가지로 구분할 수 있다.
연결 부분은 상태에 따라서 다른 색상을 지니는데 방문을 했던 연결(vlink), 방문하지 않았던 연결(link), 그리고 클릭하여 활성화된 연결(alink), 그리고 마우스를 올려놓아 활성화 준비된 연결(style에서 :hover)이다.

HTML과 스타일쉬트에서는 지정이 가능하나 Javascript에는 기능이 없다.

기타

개체의 테두리색이 대표적이며 극히 일부를 HTML상에서 지정할수 있으나, Javascript 상에서는 지정할 수 없다. 그러나 스타일쉬트에서는 거의 모든 개체의 테두리 색상 스타일을 지정할 수 있다.

색상값은 모니터에서 다양한 색상을 표현하기 위한 기본 3색의 조합 비율을 나타내는 값이다.

가장 많이 접하는 RGB 색상이라 함은 Red Green Blue 의 약자로 이 세 기본색의 비율을 나타내는 수치이다.

세 색상 요소를 각각 0~255로 스케일하여 두자리 16진수로 표시하고, 색상을 나타낼 때는 RRGGBB 6자리 16진수로 나타낸다.

HTML에서 규격에서 지정된 기본 색상명

Red		Green		Blue		색상값	색상명
FF	255	FF	255	FF	255	FFFFFF	White
FF	255	0	0	0	0	FF0000	Red
0	0	FF	255	0	0	00FF00	Lime
0	0	0	0	FF	255	0000FF	Blue
FF	255	FF	255	0	0	FFFF00	yellow
FF	255	0	0	FF	255	FF00FF	Fuchsia
0	0	FF	255	FF	255	00FFFF	Aqua
C0	192	C0	192	C0	192	C0C0C0	silver

Red		Green		Blue		색상값	색상명
0	0	0	0	0	0	000000	Black
80	128	0	0	0	0	800000	Maroon
0	0	80	126	0	0	008000	Green
0	0	0	0	80	126	000080	Navy
80	126	80	126	0	0	808000	Olive
80	126	0	0	80	126	800080	Purple
0	0	80	126	80	126	008080	Teal
80	126	80	126	80	126	808080	Gray

배경색을 반전시킨것을 글자 색상을 보기 쉽게하기 위한 것이다.

색상값은 가장 기본적으로 위에서 설명한 RGB 색상을 사용한다.

추가적으로 많이 사용하는 색상 중에 기억하기 쉽게 각 브라우저에서 색상명을 채택하여 사용하는데 부라우저에따라 별 차이가 없다.

RGB 색상

색상 코드는 RGB로 #rrggbb 인데 rr는 적색(red), gg는 녹색(green), bb는 청색(blue)을 16진수치(..89abcdef)로 나타 내는 것이다.

추가적으로 16진수 대신에 10진법을 사용하는 경우도 있다. RGB(0,255,0)

또한 스타일쉬트에서는 FF00FF 대신에 F0F를 사용할 수 있으며 이는 같은 색상값 글자을 되풀이 하는 것이다.

대문자나 소문자를 구별하지 않는다.

원칙적으로는 "#FF00FF" 혹은 '#ff00ff' 식으로 따옴표 속에 #를 넣어야 하나 브라우저에서 따옴표가 없거나 #가 없어도 차별없이 수용한다.

HTML 기본 색상명

white, black, red, blue, yellow, green 등 위 표에서 기술한 16가지이다.

HTML, CSS, Javascript 모두 대소문자 구별없이 사용할 수 있다.

확장 색상명

기억하기 좋는 색상명으로 각 브르우서에서 수용하는 색상명은 상당히 확장되어 사용되고 있고, 브라우저 별 차이는 없다. 많이 사용되는 색상명을 참조하라.

HTML, CSS, Javascript 모두 대소문자 구별없이 사용할 수 있다.

웹문서의 색상을 지정하는데는 HTML, 스타일쉬트(CSS)이나 Javascript에서 할 수 있다.

HTML

HTML 태그에서 <BODY bgcolor=lightgreen> 식으로 설정하는데, <BODY>,<TABLE>,<TR>, <TD>등 제한된 태그에서만 가능하다.

부분적으로 글자의 색상 변경은 <FONT color="#999999">text</FONT>로 할 수있다.

스타일쉬트

스타일쉬는는 스타일 관리를 위해 만들어진 규격이므로 색상을 포함한 스타일 관련 지정에서는 HTML이나 Javascript와는 비교도 안될 정도로 편리하다.

w3c 규격 스타일쉬트 색상과 배경을 참조하라.

Javascript

아주 제한된 범위에서 사용이 가능한데 대표적인 소스는 다음과 같다.

document.bgColor='#ffffff';
document.fgColor='#000000';
document.linkColor='#0000ff';
document.vlinkColor='#800080';
document.alinkColor='#0000ff';
Obj.fontcolor='#0000ff';
Obj.style.backgroundColor='#ffff00';
Obj.style.color='#0000ff';

색상의 조정은 다른 스타일 특성과 마찬가지로 스타일쉬트에서 가장 다양하게 적용할 수 있으므로 Javascript 상에서도 스타일쉬트를 많이 활용하는 것이 좋다.
document.write(<DIV style="background:ff0;color:blue;border:solid 1 blue>') 방식 등

	HTML	CSS	Javascript
문서 배경색	<BODY bgcolor="`#FFFFFF`">	body{background-color:`#FFFFFF`}	document.bgColor="`#FFFFFF`"
글자색 전체	<BODY text="`#000000`">	body{color:`#000000`}	document.fgColor="`#000000`"
개체 배경	<TABLE bgcolor="`#FFFF00`"> <TR bgcolor="`#FFFF00`"> <TD bgcolor="`#FFFF00`">	.className{background:`#FFFF00`} 혹은 background-color:`#FF0`	Obj.style.backgroundColor="`#FFFF00`"
부분 글자색	<FONT color="`#FF00FF`">	.className{color:`#0000FF}`	Obj.fontcolor="`#0000FF`" Obj.style.color="`#0000FF`"
연결색	<BODY link="`#0000FF`">	a:link{color:`#0000FF`}	document.linkColor='`#0000FF`'
방문했던색	<BODY vlink="`#800080`">	a:vlink(color:`#800080`)	document.vlinkColor='`#800080`'
활성 연결색	<BODY alink="`#FF0000`">	a:hover{color:`#FF0000`} a:active{color:`#0000FF`}	document.alinkColor='`#0000FF`'
비고	대소문자 구별 없음	대소문자 구별 없음	대소문자 구별(색상 번호는 관계없음)
비고	극히 한정된 개체만 가능	직접 <DIV style="color:`#0000FF`"> 방식, 세자리 색상번호도 #00F 가능, 거의 모든 개체에서 가능	극히 한정된 개체만 가능