CSS에서 색상 활용하기

CSS에서는 다양한 방법으로 색상을 사용할 수 있다.

🩶 이름으로 색상 지정하기

CSS에서 일부 색상에 대해서 기본 이름을 제공한다.
아마도 140개 이상이라고 알고 있음

p {
  color: red;
}

---

🩶 16진수 색상 코드란?

# 기호 다음에 6자리의 16진수 숫자로 이루어져 있다.
#빨강녹색파랑으로 각각 두 자리씩 배치된다.
색상 사이트 참고하기

p {
  color: #FF0000;  /* 빨간색을 나타낸다. */
}

---

🩶 RGB 값 활용하기

RGB 값은 빨강, 녹색, 파랑의 강도를 각각 0부터 255 사이의 값으로 지정한다.

p {
  color: rgb(255, 0, 0);  /* 빨간색을 나타낸다. */
}

---

🩶 RGBA 값 활용하기

GBA 값은 RGB 값에 투명도를 추가한 것이다.
투명도 값은 0.0(완전 투명)부터 1.0(완전 불투명)까지 지정할 수 있다.

p {
  color: rgba(255, 0, 0, 0.5);  /* 반투명한 빨간색을 나타낸다. */
}

---

🩶 HSL 값 활용하기

색조(Hue), 채도(Saturation), 밝기(Lightness)를 나타낸다.

• 색조는 0부터 360 사이의 각도로 표시한다.
• 채도와 밝기는 백분율로 표시한다.

p {
  color: hsl(0, 100%, 50%);  /* 빨간색을 나타낸다. */
}

---

🩶 HSLA 값 활용하기

HSL에 투명도를 추가한 것이다.
투명도 값은 0.0(완전 투명)부터 1.0(완전 불투명)까지 지정할 수 있다.

p {
  color: hsla(0, 100%, 50%, 0.5);  /* 반투명한 빨간색을 나타낸다. */
}

🩵 투명도만 조절하기

요소의 투명도를 설정하는 opacity

• 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않는다.
• 배경만 투명하게 하고싶다면 background 속성을 사용하면 된다.