라인 중학교 1학년 코딩반

CSS 색상

CSS에서 색을 표현하는 방법에는 여러가지 방법이 있습니다.

1. 색상 이름으로 표현

색상 이름으로 표현이 가능합니다.

black, silver, paderblue 등등 다양한 색을 가지고 있습니다.

아래는 색상 이름 사용 예시입니다

<style>
    .blue { color: blue; }
    .green { color: green; }
    .silver { color: silver; }
</style>

2. RGB 색상값으로 표현

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다. 따라서, HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 이용합니다.

RGB 색상은 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가집니다.

아래는 색상 이름 사용 예시입니다

<style>
    .blue { color: rgb(0,0,255); }
    .green { color: rgb(0,128,0; }
    .silver { color: rgb(192,192,192); }
</style>

3. 16진수 색상값으로 표현(HEX)

16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것입니다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가집니다.

예를 들면, 녹색을 나타내는 RGB 색상값 rgb(0,255,0)은 16진수 색상값으로는 #00FF00이 됩니다.

아래는 색상 이름 사용 예시입니다

<style>
    .blue { color: #0000ff; }
    .green { color: #008000; }
    .silver { color: #C0C0C0; }
</style>

4. RGBA

기존 rgb에 alpha(투명도)가 추가된 것으로, RGB 표현의 확장으로, 불투명도를 지정하는 기능이 추가 된 것입니다.

5. HSL/HSLA

Hue(색상), Saturation(채도), Lightness(명도)로 색상을 정의하는 방법입니다.