CSS RGB _ 색의 표현

* 본 포스팅은 스타일 시트의 기본을 위한 CSS 정보글입니다.

2. 스타일 시트의 기본을 위한 CSS 정보글

1. RGB 색 표현

RGB 색 모형은 빛의 삼원색을 이용하여 색을 표현하는 방식입니다. RGB 방식을 이용하여 색을 표현하는 html에서는 색의 이름으로 종종 색을 표현하곤 하지만, 빨강, 초록, 파란색의 정도를 0에서 255까지 섞어서 다양한 색을 표현할 수 있습니다.

2. 색 정의 코드

A. 특정색 이름으로 정의하기, color = color name

html에서 특정색들은 이름을 가지고 있습니다. 예시 코드와 같이 다음의 코드를 html 문서로 작성하여 브라우저로 열어보면, 자주 사용되는 특정색과 이름을 알 수 있습니다.

 

예시 코드:

<span style ="color: Silver;"><h1> 실버색 #C0 C0 C0 </h1> </span>

<span style ="color: Lime;"><h1> 라임색 #00FF00</h1></span>

<span style ="color: Purple;"><h1> 보라색 #800080</h1> </span>

<span style ="color: Yellow;"><h1> 노랑색 #FFFF00 </h1></span>

<span style ="color: Navy;"><h1> 네이비색 #000080</h1> </span>

<span style ="color: Aqua;"><h1> 아쿠아색 #0000FF</h1></span>

<span style ="color: Orange;"><h1> 오렌지색 #FFA500</h1></span>

 

* 여기에서 사용된 span style 코드는 스타일 코드가 아닌 개별적으로 글자에 특성을 부여하는 코드입니다.

 

색이름과 코드

B. 색을 섞어서 표현하는 방법, #XXXXXX 코드

총 6자리 코드에 각각 2자리씩 할당받은 빨강, 초록, 파란색을 0에서 255까지 나타내기 위해서 16진법을 사용합니다. 즉, 00 ~ FF 가 0 - 255의 수치를 나타냅니다.

* 10은 A, 11는 B, 12은 C, 13는 D, 14는 E, 15는 F로 나타내는 것이 16진법입니다.

코드는 #빨강 초록 파랑 값으로 표현합니다.
따라서 #FFFFFF는 빨강 초록 파랑을 255 정도로 전부 혼합한 것이고, 흰색이 되는 것입니다.

 

C. rgb 코드 사용하기, rgb( 255, 255, 255 ) or rgb (100% , 100%, 100%)

rgb코드는 스타일 코드 안에 넣어서 다음과 같은 예시 코드로 적용해봅시다.

 

예시 코드:

<style>
h1 { color : rgb( 0, 0, 0); }
h2 {color : rgb( 50%, 50%, 50% );}
</style>
<h1> rgb 255 255 255 </h1> 
<h2> rgb 50% 50% 50% </h2>

 

rgb 코드 적용 결과

 

3. 투명 효과 넣기

A. style 코드에 투명도 지정하기, rgba(0,0,0, 1) 코드

방금 배운 코드에 투명도를 추가하는 코드는 rgba(빨강, 초록, 파랑, Value)입니다. 이것을 사용하면 투명 효과를 낼 수 있습니다.  마지막 value 값은 투명 정도를 나타냅니다. 예를 들어, 예시 코드와 같이 50%의 투명 효과를 내기 위해서 rgba (0, 0, 0,. 5)를 사용하면 50%의 투명도를 가지는 검은색 글씨 또는 색이 표현됩니다.

 

예시 코드:

<style>
h1 { color : rgba( 0, 0, 0,. 1); }
h2 { color : rgba( 0, 0, 0,. 5);}
</style>

<h1> Black 10% </h1>
<h2> Black 50% </h2>

 

rgba 코드 적용 결과

 

B. 지정된 색에 투명도 추가하기, opacity 코드

Opacity 코드는 지정된 색에 투명도를 추가하는 코드입니다.

예를 들어, 다음과 같은 h1 스타일 코드를 선언되어있다고 합시다.

 

h1 {color : black;}

 

opacity를 추가하여 50% 투명도를 넣어봅시다.

 

h1 {color : black; opacity :. 5}

 

이렇게 정의된 h1을 사용하면, 위와 같이 50% 투명도를 가지는 글이 완성됩니다.