|
스타일 시트 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>
|
¤ 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>
|
¤ 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>
|
¤ 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>
|
¤ 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>
|
¤ 미리 정의된 색상 명 |
▼ 모든 브라우저에서 지원하는 색상 명은 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' 카테고리의 다른 글
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
|---|---|
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
| 스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법 (0) | 2018.03.23 |
| 스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기 (0) | 2018.03.03 |
| 스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법 (1) | 2018.01.31 |
| 스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법 (0) | 2018.01.13 |
