[코딩 공부_14] CSS로 색상을 표현하는 방법

 ①  hexcode  : RGB 값을 16진수로 표현해 사용하는 방법 

- 핵사코드는 색상표현 방법 중, 가장 많이 쓰는 방법으로 3개 또는 6개의 숫자를 이용하여 색상을 표현한다.

ex) #000, #000000, #fff, #ffffff...등

<style>
#txt {background-color: #000;} /* black */
#txt {background-color: #f00;} /* red */
#txt {background-color: #ffffff;} /* white */
</style>

- #00   00   00

   Red Green Blue

  → 3자리인 경우, #000

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

0 1 2 3 4 5 6 7 8 9  A  B  C   D  E   F

- 0에 가까워 질수록 색상이 없어지고, F에 가까워 질수록 해당 색이 늘어난다

 

 

②  color mames  : 이름 그대로 색상 이름을 직접 지정해 사용하는 방법

<style>
#txt {background-color: black;}
#txt {background-color: red;}
#txt {background-color: white;}
</style>

- 브라우저별로 생각하는 색상이 다르기 때문에 색상 차가 있을 수 있기 때문에 주의해서 사용해야한다. 예를 들어 A 브라우저에선 노랑을 탁하게 표현하고 B 브라우저에선 밝은 노랑을 표현할 수 있다는 것이다!!

 

 

③  rgb  : 10진수로 직접 각 색의 강도를 표현하는 방법

<style>
#txt {background-color: rgb(0, 139, 139);} /* darkyan */
#txt {background-color: rgb(255, 130, 0, 1.0);} /* darkorange */
</style>

- red, green, blue 순서대로 10진수 0~255까지의 숫자를 총 3개 입력한다 

** 투명도를 나타내는 alpha 값을 추가하여 rgba 형태로도 표현이 가능하다 (0.0 ~ 1.0 까지 숫자로 표현)

 

 

④ hsl : 색조, 채도, 명도 순서대로 표현 (자주 사용하지 않음!!)

<style>
#txt {background-color: hsl(195, 100%, 50%);} /* deepskyblue */
#txt {background-color: hsl(195, 100%, 50%, 1.0));} /* deepskyblue */
</style>

- 색조 : 0~360의 숫자

- 채도와 명도는 0 ~ 100%의 백분율로 표현

- 투명도를 나타내는 alpha값을 추가하여 hsla형태도 존재한다 (0.0 ~ 1.0 까지 숫자로 표현)

 

 

+참고)

(html color picker) html css의 컬러코드를 찾을 수 있는 사이트이다 포토샵이나 일러스트를 이용해 찾을 수 있지만 이 방법도 참고하면 좋을 거 같다!! 😊😊

       1. http://www.w3schools.com/colors/colors_picker.asp

HTML Color Picker

       2. html-color-codes.info/Korean/

HTML 컬러 코드