코딩스쿨

▶ CSS References

CSS Colors

CSS Colors : 색상 표현과 사용법

CSS 색상은 웹 디자인에서 중요한 역할을 하며, 다양한 방법으로 표현할 수 있습니다. CSS에서는 색상을 정의하는 다양한 방법을 제공하며, 각 방법은 색상의 명도, 채도, 투명도 등을 세밀하게 제어할 수 있게 해줍니다. 이 가이드는 CSS에서 색상을 표현하는 주요 방법과 사용법을 설명합니다.

1. CSS 색상 표현 방법

CSS에서 색상을 표현하는 방식은 다음과 같은 몇 가지 기본 방법이 있습니다:

색상 이름 (Color Names)
HEX 값
RGB 값
RGBA 값
HSL 값
HSLA 값

2. 색상 이름 (Color Names)

CSS에서는 약 140개의 미리 정의된 색상 이름을 제공하며, 이를 사용해 손쉽게 색상을 설정할 수 있습니다.

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

예시:

h1 {
    color: red;
}

p {
    background-color: lightblue;
}

대표적인 색상 이름:
- Red: red
- Blue: blue
- Green: green
- Black: black
- White: white
- Yellow: yellow
- Gray: gray
- Light Blue: lightblue
- Dark Red: darkred
- Tomato: tomato

3. HEX 값 (16진수 표현)

HEX 색상 값은 16진수로 색상을 표현하는 방식입니다. R, G, B 각각의 값이 16진수 두 자리로 표현되며, 총 6자리의 코드를 사용합니다.

구문:
```
color: #RRGGBB;
```
- RR: 빨강(Red)의 16진수 값 (00 ~ FF)
- GG: 초록(Green)의 16진수 값 (00 ~ FF)
- BB: 파랑(Blue)의 16진수 값 (00 ~ FF)

예시:

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

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

짧은 HEX 코드: 동일한 값이 반복될 경우, 3자리로 줄여 쓸 수 있습니다.
```
h2 {
    color: #0F0;  /* 짧은 초록 표현 (동일하게 #00FF00) */
}
```

4. RGB 값 (Red, Green, Blue)

RGB 값은 빨강(R), 초록(G), 파랑(B)의 강도를 0에서 255 사이의 숫자로 표현합니다. 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);  /* 초록 */
}

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

RGBA 값은 RGB 색상에 알파(Alpha) 값, 즉 투명도(0~1)를 추가로 정의할 수 있는 방식입니다. 알파 값은 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);  /* 반투명 파랑 */
}

6. HSL 값 (Hue, Saturation, Lightness)

HSL 값은 색상(Hue), 채도(Saturation), 명도(Lightness)를 사용하여 색상을 표현합니다. 이는 색상환을 기반으로 하여 색을 정의하는 방식입니다.

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

예시:

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

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

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

HSLA 값은 HSL 색상 표현 방식에 알파(Alpha) 값(투명도)을 추가하여 표현하는 방식입니다.

구문:

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

alpha: 투명도 값 (0.0 ~ 1.0)

예시:

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

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

8. CSS 그라디언트 (Gradient)

CSS에서는 **그라디언트(Gradient)**를 사용해 색상 간의 부드러운 전환 효과를 만들 수 있습니다. 그라디언트는 배경이나 요소의 디자인에 많이 사용됩니다.

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, ...);
```
- shape-size: 그라디언트의 모양 (원형 또는 타원형)
- color-stop: 색상 전환 지점

예시:

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

9. CSS 색상 키워드

CSS에는 transparent와 같은 몇 가지 키워드도 제공됩니다. 이를 사용하면 투명한 배경이나 텍스트를 쉽게 설정할 수 있습니다.

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

예시:

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

10. 색상 선택 도구 (Color Pickers)

웹에서 디자인 작업을 할 때는 온라인 색상 선택 도구를 사용하면 다양한 색상을 쉽게 찾고, 그에 맞는 CSS 값을 얻을 수 있습니다. 예를 들어:

Google Color Picker: 색상을 선택하고, RGB 또는 HEX 값으로 변환할 수 있는 도구.
Adobe Color: 색상 팔레트를 만들고, 서로 조화로운 색상 조합을 찾는 데 유용한 도구.

요약

CSS에서 색상은 여러 가지 방법으로 표현될 수 있습니다. 색상 이름은 가장 간단한 방식이지만, HEX, **

RGB**, HSL 등의 표현 방식은 더 많은 제어를 제공합니다. RGBA와 HSLA는 투명도를 추가로 설정할 수 있으며, 그라디언트는 색상이 부드럽게 전환되는 효과를 줄 수 있습니다. 각 색상 표현 방법은 상황에 맞게 사용하여 웹 페이지를 더욱 풍부하게 만들 수 있습니다.

코딩 스쿨 CSS