CSS 기초(2) CSS 색상 표기 방식

CSS 기초(2)

---

오늘은 CSS에서 색상에 관련한 정보를 드리려고 합니다.

CSS에서 색상은 총 3가지로 표현할 수 있는데요!

오늘은 CSS에서 색상을 표현하는 3가지 방법에 대해 알려드리겠습니다.

 

(1)

키워드(keyword) 

키워드 방식은 색상의 영문 이름으로 속성값을 주는 방식입니다.

예를 들어 red, blue, black 등 영문으로 속성 값을 주는데

CSS 코드에는 '선택자{ color: red;}' 로 작성합니다.

 

(2)

RGB

RGB 방식은 빛의 3원 색인 Red, Green, Blue를 통해 속성 값을 주는 방식으로

rgb(R, G, B)로 표기하는데 각각에 0~255의 숫자를 사용하여 색상을 표기하는 방식입니다.

여기서 숫자가 0으로 갈수록 색이 약해지고 255로 갈수록 강해집니다.

 

만약 'rgb(255, 0, 0)'으로 표기한다면 R인 Red의 값을 강하게 나머지는 0으로 맞췄기 때문에

색상은 Red로 나타납니다.

 

CSS 코드로는 '선택자{color: rgb(R, G, B);}' 작성할 수 있습니다.

여기서 Tip을 드리면 rgba로도 작성이 가능한데 여기서 a는 알파를 의미하는데

rgba는 rgb와 똑같이 표기하지만 a로 불투명도까지 조절할 수 있습니다.

a는 RGB와 다르게 0에서 1.0까지 작성이 가능하고

0으로 갈수록 투명해지고 1로 갈수록 불투명해지게 표현할 수 있습니다.

CSS에서 rgba(R, G, B, A)로 표기합니다.

 

참고로 뛰어쓰기는 상관없이 적용됩니다.

 

(3)

HEX(16진수)

HEX(16진수)는 색상을 16진수로 작성하여 속성 값을 주는 것입니다.

CSS에서는 #RRGGBB로 작성하는데 각각 색상을 f~0으로 표현할 수 있습니다.

참고 소 f로 갈수록 진해지고 0으로 갈수록 연해집니다.

위와 똑같이 Red, Green, Blue를 사용하여 색상을 표현하는데

만약 Red, Green, Blue에 각각 연속되는 숫자가 있다면

하나로 생략 해서 표현할 수 있습니다.

 

예를 보면 #ffffff로 표현하면 #fff로 표현할 수 있고 색상은

빛의 특성상 모이면 모일 수록 흰색에 가까워지기 때문에

흰색이 표현되고 반대로 #000은 검은색으로 표현할 수 있습니다.

 

CSS 색상 적용

결과물

마지막으로 위에 색상 표기 방식을 모두 사용한 예시를 보여드리겠습니다.

참고로 /* */은 주석이라고 해서 웹페이지에는 보이지 않습니다.

 

하지만 비밀스러운 정보에 대해서는 작성하지 않는 게 좋은데 이유는

개발자 모드를 통해 보면 주석이 보이기 때문에 비밀스러운 정보 말고

그냥 구분하기 위한 수단으로만 사용하시면 좋을 것 같습니다.

 

---

 

오늘은 여기까지 하겠습니다.

오늘은 CSS에서 색상을 표현하는 방식 3가지를 소개해 드렸는데

3가지 모두 많이 사용하는 방식이고

어떤 방식을 사용하든 편한 방식으로 사용하시면 좋겠습니다.

 

감사합니다!!