스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기

스타일시트 CSS

스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기

 

환경: Eclipse Mars

 

CSS 에서 color 속성은 텍스트 글자 색을 바꾸고 싶을 때 사용합니다. color 속성에 입력하는 값은 6가지 형태로 적용할 수가 있습니다. 이번 아티클에서는 color 속성에 대한 사용법과 웹 상에서 표현할 수 있는 색상 표를 올려 놓겠습니다.

 

먼저 CSS 에서 지정할 수 있는 컬러의 형태에 대해서 알아 보겠습니다. 주로 사용하는 값 형태는 16진수 Hexa , RGB, 색상명입니다. 이 외에도 특수한 형태의 색상 적용방식이 3가지가 더 있습니다.

 

¤ 16진수 HEXA 코드 값

 

 첫 번째 색상을 표현할 수 있는 16진수 코드 값은 # 과 함께 6자리로 이루어져 있습니다. 앞에서부터 각각 RR(red), GG(green), BB(blue) 로 두 자리씩 정수로 구성되며 16진수 값인 00 ~ FF 사이에 값을 지정할 수가 있습니다. 예를 들어서 #FF0000 이면 빨간색이 됩니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#color1 {color: #ff0000; margin: 10px;} 
	#color2 {color: #00ff00; margin: 10px;}
	#color3 {color: #0000ff; margin: 10px;}
</style>
</head>
<body>
	<div id="color1">CSS 기본적인 구조 이해하기</div>
	<div id="color2">CSS 기본적인 구조 이해하기</div>
	<div id="color3">CSS 기본적인 구조 이해하기</div>
</body>
</html>

 

스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기

 

¤ RGB

 

RGB 색상 값은 대부분의 브라우저에서 지원합니다. 함수 형태로 되어 있으며 인수로 red, green, blue 값을 넘깁니다. 인수 값은 16진수가 아닌 10진수로 0 ~ 255 사이 값 입니다. 그러니까 16진수 ff 10진수 255가 되는 것이죠. 인수로 숫자 뿐만 아니라 % 값도 넘길 수 있습니다. 아래 샘플을 % 형태로 변경한다면 rgb(100%, 0%, 0%) 이 되겠죠. 샘플 결과는 16진수로 표현한 CSS 값과 동일합니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#color1 {color: rgb(255,0,0); margin: 10px;} 
	#color2 {color: rgb(0,255,0); margin: 10px;}
	#color3 {color: rgb(0,0,255); margin: 10px;}
</style>
</head>
<body>
	<div id="color1">CSS 기본적인 구조 이해하기</div>
	<div id="color2">CSS 기본적인 구조 이해하기</div>
	<div id="color3">CSS 기본적인 구조 이해하기</div>
</body>
</html>

스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기

 

¤ RGBA

 

RGBA RGB alpha 채널을 하나 더 추가한 것입니다. 이것은 IE9 이상이나 파이어폭트 3 이상, 크롬, 사파리에 적용이 되는 값의 형태입니다. 크로스 브라우징에 초점을 맞춰서 개발하신다면 사용에 있어서 신중해야겠죠. 알파 값은 색의 투명도, 즉 배경색과 혼합되는 정도를 말합니다. 인수의 위치는 제일 마지막이며 0 1 사이의 값을 가지게 됩니다. 0 이면 완전 투명으로 글자가 안보이게 되고 1 은 완전 불투명으로 아무 변화가 없는 것이죠.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#color1 {color: rgba(255,0,0,0.3); margin: 10px;} 
	#color2 {color: rgba(0,255,0,0.3); margin: 10px;}
	#color3 {color: rgba(0,0,255,0.3); margin: 10px;}
</style>
</head>
<body>
	<div id="color1">CSS 기본적인 구조 이해하기</div>
	<div id="color2">CSS 기본적인 구조 이해하기</div>
	<div id="color3">CSS 기본적인 구조 이해하기</div>
</body>
</html>

스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기

 

¤ HSL

 

HSL 도 전 브라우저 버전에 적용되는 것은 아닙니다. RGBA 와 마찬가지로 IE9 이상이나 파이어폭트 3 이상, 크롬, 사파리에 적용 됩니다. 형태는 hsl(색상, 채도, 명도) 로 구성됩니다. 색상(hue) 값은 가장 긴 빨강을 0도 로 했을 때 상대적인 배치 각도를 의미합니다. 그래서 값은 0 ~ 360 도 사이입니다. 0 360 red, 240 blue, 120 green 이 되는 것이죠. 채도(Saturation) 는 진한 정도를 나타내는데 0 ~ 100% 사이 값을 가집니다. 0% 는 무채색을 나타납니다. 명도(Lightness) 는 밝기 정도를 나타내는데 0 ~ 100% 사이 값을 가집니다. 0 은 검정색이고 100 은 하얀색 입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	
	#color1 {color: hsl(120, 100%, 50%); margin: 10px;} 
	#color2 {color: hsl(120, 100%, 75%); margin: 10px;}
	#color3 {color: hsl(120, 60%, 70%); margin: 10px;}
</style>
</head>
<body>
	<div id="color1">CSS 기본적인 구조 이해하기</div>
	<div id="color2">CSS 기본적인 구조 이해하기</div>
	<div id="color3">CSS 기본적인 구조 이해하기</div>
</body>
</html>

스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기

 

¤ HALA

 

HSLA 도 전 브라우저 버전에 적용되는 것은 아닙니다. RGBA 와 마찬가지로 IE9 이상이나 파이어폭트 3 이상, 크롬, 사파리에 적용 됩니다. 마지막에 들어가는 A 값은 RGBA 와 같이 투명도를 나타냅니다. 투명도를 올렸더니 잘 보이지가 않네요.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	
	#color1 {color: hsla(120, 100%, 50%, 0.3); margin: 10px;} 
	#color2 {color: hsla(120, 100%, 75%, 0.3); margin: 10px;}
	#color3 {color: hsla(120, 100%, 70%, 0.3); margin: 10px;}
</style>
</head>
<body>
	<div id="color1">CSS 기본적인 구조 이해하기</div>
	<div id="color2">CSS 기본적인 구조 이해하기</div>
	<div id="color3">CSS 기본적인 구조 이해하기</div>
</body>
</html>

스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기

 

¤ 미리 정의된 색상 명

 

모든 브라우저에서 지원하는 색상 명은 140 개로 지정이 되어 있습니다. 크로스 브라이징을 염두 해 두신다면 색상 명으로 개발하는 것이 가독성이 높을 뿐만 아니라 지원하지 않는 브라우저 때문에 속 썩을 일이 없습니다. 하지만 컬러 개수가 얼마 되지 않기 때문에 디테일한 색상 작업은 힘듭니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	
	#color1 {color: red; margin: 10px;} 
	#color2 {color: green; margin: 10px;}
	#color3 {color: blue; margin: 10px;}
</style>
</head>
<body>
	<div id="color1">CSS 기본적인 구조 이해하기</div>
	<div id="color2">CSS 기본적인 구조 이해하기</div>
	<div id="color3">CSS 기본적인 구조 이해하기</div>
</body>
</html>

스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기

 

¤ 미리 정의된 색상 명 표 참고 하기

 

별도의 파일 첨부할것 압축파일 안에 있음

 

Posted by 녹두장군