색상 표현 방법

색상 표현 방법

CSS로 색상을 표현하는 방법에는 여러가지가 있습니다.
이에 대해 알아보는 시간을 가지도록 하겠습니다.
color, background-color로 텍스트, 배경색을 지정합니다.

---

01. 색상 이름으로 표현

{
    color: blue; 
    color: red;
}

---

02. RGB 색상 값으로 표현

{
    color: rgb(0,0,255);
}

---

03. RGBA 색상 값으로 표현

RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값입니다.
알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.

{
        background-color: rgba(0,255,0,0.35)
}

---

04. 16진수 색상 값으로 표현

{
        color: #1111ee;
        color: #d1d1d1;
}

---

05. HSL 색상 값으로 표현

HSL 색상값은 빛의 삼원색으로 색을 표현하는 RGB 색상값과는 달리 색상, 채도, 명도를 사용해서 색을 표현합니다.
HSL 색상값에서 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미합니다.

{
        background-color: hsl(10, 80%, 30%);
}

---

06. opacity

opacity 속성은 색상에 대한 투명도를 설정해 줍니다.
opacity 속성값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.
자식 요소까지 모두 투명도 설정한다는 점에서 알파채널 투명도 설정과 차이가 있음.

{
        background-color: rgb(0,255,0); 
        opacity:0.3;
}