[Deep Dive] CSS 기초 개념 완전 정복(3) - CSS 색을 표현하는 방법

 

 

CSS에서 색을 표현하는 방법들에 대해 알아보겠습니다.

 

---

 

 

 

색을 표현하는 방법?

1. 색 이름

Ex. black, red, blue, ...

 

 

2. RGB값

RGB는 색상을 측정하는 보다 정확한 방법이다. 모든 색상을 빨강(R), 초록(G). 파랑(B)의 조합을 사용해서 만든다.

 

RGB의 특징?

RGB 숫자의 값은 0부터 255따지 표현할 수 있다. (0~255)

Ex. rgb(0, 150, 255)

Ex. rgb(0, 0, 0) => 검은색 

Ex. rgb(255, 255, 255) => 흰

 

 

3. Hex값

RGB를 작성하는 또 다른 방법 Ex. #0096FF

 

Hax값의 특징?

• Hax의 모든 각 문자는 16진수로 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (16개의 가능한 값)
• 처음 2개의 문자를 사용하여 0 ~ 255에서 16 * 16 = 256개의 가능한 값을 가질 수 있다.
  • 00 = 0
  • 01 = 1
  • ...
  • 0F = 15
  • 10 = 16
  • 11 = (1*16) + 1 = 17
  • ...
  • FF = (15 * 15) + 15 = 255
• RGB와 동일한 범위이므로 Hax의 처음 2자는 빨간색, 두 번째 2자는 초록색, 세 번째 2자는 파란색을 나타낸다.

 

4. RGBA값

rgb(0. 150, 255, 0.5)

추가값 A(알파값)을 제외하고 RGB와 동일하다. A 값은 색상이 얼마나 투명한지를 결정한다.

0 = 완전히 투명함.

1 = 단색 및 그렇지 않음.

0.5 = 50% See-Through이다.

 

---

 

 

아래 (1)번 포스팅부터 차례대로 봐주세요!

[Deep Dive] CSS 기초 개념 완전 정복(1) - CSS란?