코딩스쿨

▶ CSS References

CSS Color Values

CSS Color Values : 색상 값 종류와 사용법

CSS에서는 다양한 방식으로 색상 값을 정의할 수 있습니다. 이 가이드는 CSS에서 색상 값을 표현하는 주요 방법을 설명하고, 각각의 사용법을 제공합니다.

1. 색상 이름 (Color Names)

CSS는 미리 정의된 약 140개의 색상 이름을 제공합니다. 이는 웹 브라우저에서 색상을 간편하게 지정할 수 있는 가장 기본적인 방법입니다.

구문:
```
color: colorname;
```

예시:

h1 {
    color: red;
}

p {
    background-color: lightblue;
}

대표 색상 이름:
- Red: red
- Blue: blue
- Green: green
- Yellow: yellow
- Black: black
- White: white
- Gray: gray
- Pink: pink
- Purple: purple

2. HEX 값 (16진수)

HEX 값은 색상을 16진수로 표현하는 방식으로, 빨강(R), 초록(G), 파랑(B)의 값이 각각 두 자리 16진수로 구성됩니다. #RRGGBB 형식으로 사용됩니다.

구문:
```
color: #RRGGBB;
```
- RR: 빨강 값 (00~FF)
- GG: 초록 값 (00~FF)
- BB: 파랑 값 (00~FF)

예시:

h1 {
    color: #FF0000;  /* 빨강 */
}

p {
    background-color: #00FF00;  /* 초록 */
}

2.1 짧은 HEX 코드

세 쌍의 값이 동일할 경우, 3자리로 축약해서 표현할 수 있습니다.

구문:
```
color: #RGB;
```

예시:

h1 {
    color: #F00;  /* 빨강 (#FF0000과 동일) */
}

p {
    background-color: #0F0;  /* 초록 (#00FF00과 동일) */
}

3. RGB 값 (Red, Green, Blue)

RGB는 색상을 빨강(R), 초록(G), 파랑(B) 값으로 표현하며, 각 값은 0에서 255 사이의 숫자로 지정됩니다.

구문:
```
color: rgb(red, green, blue);
```
- red: 빨강 값 (0~255)
- green: 초록 값 (0~255)
- blue: 파랑 값 (0~255)

예시:

h1 {
    color: rgb(255, 0, 0);  /* 빨강 */
}

p {
    background-color: rgb(0, 255, 0);  /* 초록 */
}

4. RGBA 값 (Red, Green, Blue, Alpha)

RGBA는 RGB에 알파(Alpha) 값을 추가하여 투명도를 설정할 수 있는 방식입니다. 알파 값은 0(완전 투명)에서 1(완전 불투명) 사이의 값으로 지정됩니다.

구문:
```
color: rgba(red, green, blue, alpha);
```
- alpha: 투명도 값 (0.0 ~ 1.0)

예시:

h1 {
    color: rgba(255, 0, 0, 0.5);  /* 반투명 빨강 */
}

p {
    background-color: rgba(0, 0, 255, 0.3);  /* 반투명 파랑 */
}

5. HSL 값 (Hue, Saturation, Lightness)

HSL은 색상을 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현합니다.

구문:
```
color: hsl(hue, saturation, lightness);
```
- hue: 색상, 0~360도로 표현 (0=빨강, 120=초록, 240=파랑)
- saturation: 채도, 0%는 회색, 100%는 완전한 색상
- lightness: 명도, 0%는 검정, 100%는 흰색

예시:

h1 {
    color: hsl(0, 100%, 50%);  /* 빨강 */
}

p {
    background-color: hsl(120, 100%, 50%);  /* 초록 */
}

6. HSLA 값 (Hue, Saturation, Lightness, Alpha)

HSLA는 HSL 방식에 투명도(Alpha) 값을 추가한 방식입니다. 알파 값은 0(완전 투명)에서 1(완전 불투명) 사이의 값을 가집니다.

구문:

color: hsla(hue, saturation, lightness, alpha);

예시:

h1 {
    color: hsla(240, 100%, 50%, 0.5);  /* 반투명 파랑 */
}

p {
    background-color: hsla(60, 100%, 50%, 0.3);  /* 반투명 노랑 */
}

7. 색상 키워드: `transparent`

CSS에는 미리 정의된 색상 키워드도 있습니다. transparent는 투명한 색상을 나타냅니다.

구문:
```
color: transparent;
```

예시:

p {
    background-color: transparent;  /* 투명 배경 */
}

8. CSS 그라디언트 색상

CSS 그라디언트는 두 개 이상의 색상이 부드럽게 전환되는 효과를 제공하며, 이는 배경이나 요소의 스타일에 자주 사용됩니다.

8.1 `linear-gradient()`: 선형 그라디언트

두 가지 이상의 색상이 수평, 수직, 대각선으로 부드럽게 전환됩니다.

구문:
```
background: linear-gradient(direction, color-stop1, color-stop2, ...);
```
- direction: 그라디언트 방향 (예: to right, 45deg)
- color-stop: 색상 전환 지점

예시:

div {
    background: linear-gradient(to right, red, yellow);
}

8.2 `radial-gradient()`: 방사형 그라디언트

중심에서 바깥쪽으로 퍼져나가는 방사형 그라디언트입니다.

구문:

background: radial-gradient(shape-size, color-stop1, color-stop2, ...);

예시:

div {
    background: radial-gradient(circle, red, yellow, green);
}

요약

CSS에서 색상 값을 표현하는 방법은 매우 다양합니다. 색상 이름은 간단한 방식이고, HEX, RGB, HSL 등은 더 많은 제어를 제공합니다. 투명도를 설정하려면 RGBA와 HSLA 값을 사용할 수 있으며, 그라디언트를 통해 색상이 부드럽게 전환되는 효과도 줄 수 있습니다. 다양한 색상 표현 방식은 상황에 따라 적절히 사용하여 웹 페이지의 시각적 요소를 풍부하게 만들 수 있습니다.

코딩 스쿨 CSS