웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

Color 본문

css3

Color

jokack01 2013. 10. 8. 13:37

Color

기존의 컬러형식으로는 RGB format 이 대부분이였다. 

그러나 css3에서는 HSL 표기법과 alpah(투명도)값을 적용할 수 있어 투명한 디자인이 가능하게 되었다. 

  

RGB & RGBA 

RGB(적·녹·청)에 의해 색을 정의하는 색모델로 우리나라 웹개발자들에게 가장 익숙한 컬로포멧일 것이다.

RGB포멧의 문법은 Color : #ab19ev;  와 color : rgb(186, 145, 254); 그리고 color : rgb(72%, 56%, 99%); 를 예를 들 수 있는데 

 네이버를 비롯한 최근의 웹사이트들은  rgb(72%, 56%, 99%); 스타일의 포멧을 많이 사용하는 추세인데 아마도 RGBA 와 같은 alpah 값, 

 즉 투명도를 표현하기 위한 방법때문이지 않을까 생각한다.  

 Background : rgba(72%, 56%, 99%, 0.5)와 같이 표현하면 지정된 색상에 50%의 투명도가 적용된 배경을 만들수 있다.

 알파 값이 1이면 100% 이다.

 

HSL & HSLA

Hue(색), saturation(채도), lightness(명도), alpah(투명도) 


Hue(색) : 색상표기 방법으로 0~360도 라는 각도를 사용한다.

rgb와 달리 hsl 포멧에서는 red=30, green=100 등으로 나타낸다. 

 

Saturation 은 채도인데, 색이 빨간색이라고 한다면, 0%는 색이 전혀 보이지 않고 100%는 완벽한 빨간색으로 나타낸다.

색의 진함, 엷음을 나타내며 원색에 가까운 색을 채도가 높다고 이야기 할 수 있다. 


Lightness 는 명도로 색의 밝기를 나타낸다. 같은 빨간색 이라도 밝은 빨간색은 명도가 높고, 어두운 빨간색은 명도가 낮다.

명도가 가장 높은 색은 흰색이며, 가장 낮은 색은 검정색이다. 모든 색은 명도가 높을수록 흰색에 가깝우며, 명도가 낮을수록 검정색에 가깝다.

0% 이면 검정색이고 100% 이면  흰색을 나타낸다.

  

rgba 와 마찬가지로  Background : hsla(72%, 56%, 99%, 0.5)의 값으로 투명도를 줄 수 있다. 


Hue(색상표)




ex1) rgba 컬러 적용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Color</title>
<style type="text/css">
body{background:url(ho.jpg) no-repeat;}
div {
position:relative;
width:300px;
height:150px;
background:rgb(72%, 56%, 99%);
opacity:0.7;
text-align:center;
line-height:150px;
color:#6F3;
font-size:20px;
font-weight:bold;
}
p{color:red;}
</style>
</head>
<body>
<div>Css3 rgba color 투명도 효과</div>
<br><br>
<h1>RGBA COLOR</h1>
<p> background:rgba(72%, 56%, 99%, 0.7); 속기형 작성시 ( red/green/blue/alpa )</p>
</body>
</html>




ex2) hsla 컬러적용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Color</title>
<style type="text/css">
body{background:url(ho.jpg) no-repeat;}
div {
position:relative;
width:300px;
height:150px;
background:hsl(41, 44%, 44%);
opacity:0.7;
text-align:center;
line-height:150px;
color:#6F3;
font-size:20px;
font-weight:bold;
}
p{color:red;}
</style>
</head>
<body>
<div>Css3 hsla color 투명도 효과</div>
<br><br>
<h1>HSLA COLOR</h1>
<p> background:hsla(41, 44%, 44%, 0.7); 속기형 작성시 ( hue/saturation/lightness/alpa )</p>
</body>
</html>


'css3' 카테고리의 다른 글

User Interface  (0) 2013.10.08
Multiple Columns  (0) 2013.10.08
Animation  (0) 2013.10.08
Transition  (0) 2013.10.08
3D transform  (0) 2013.10.08
'css3' Related Articles more