CSS[색상]

CSS에서는 색상을 지정할 때 다양한 방법을 사용할 수 있습니다. 

 

여기에는 색상 이름, RGB/RGBA 값, HEX 코드, HSL/HSLA 값 등이 포함됩니다. 

 

아래에서는 이러한 색상 지정 방법에 대해 자세히 살펴보겠습니다.

1. 색상 이름

 

CSS에서는 미리 정의된 색상 이름을 사용하여 색상을 지정할 수 있습니다. 

 

예를 들어, 'red', 'blue', 'green'과 같은 단어를 사용하여 색상을 지정할 수 있습니다. 

 

이러한 색상 이름은 쉽게 기억하고 사용하기 쉬우며, 많은 브라우저에서 지원됩니다.

/* 색상 이름을 사용한 예시 */
.color-name {
  color: red;
  background-color: green;
}

2. RGB/RGBA 값

RGB 값은 빨강, 녹색, 파랑의 각각의 색상 값으로 구성되며, 0~255 범위의 값을 가집니다. 

 

이를 이용하여 CSS에서 색상을 지정할 수 있습니다. RGBA 값은 RGB 값과 같이 빨강, 녹색, 파랑의 값을 가지지만, 

 

마지막 값으로 투명도를 나타내는 알파값을 가집니다. 알파값은 0.0부터 1.0까지의 범위를 가집니다.

/* RGB/RGBA 값을 사용한 예시 */
.rgb {
  color: rgb(255, 0, 0); /* 빨강색 */
  background-color: rgba(0, 255, 0, 0.5); /* 녹색 (알파값 0.5로 지정) */
}

3. HEX 코드

HEX 코드는 빨강, 녹색, 파랑 값을 16진수로 나타낸 값입니다. 

 

각각의 색상 값을 00(0)부터 FF(255)까지의 16진수 값으로 표현합니다. 

 

예를 들어, 빨강색은 #FF0000, 녹색은 #00FF00, 파란색은 #0000FF와 같이 나타낼 수 있습니다.

/* HEX 코드를 사용한 예시 */
.hex {
  color: #FF0000; /* 빨강색 */
  background-color: #00FF00; /* 녹색 */
}

4. HSL/HSLA 값

 

HSL은 CSS에서 색상을 지정하기 위한 하나의 방법입니다.

 

이 방식은 색상(Hue), 채도(Saturation) 및 명도(Lightness) 세 가지 값으로 구성됩니다.

 

색상 값은 0부터 360까지의 각도 값으로, 이는 색상의 위치를 나타냅니다.

 

채도 값은 0부터 100까지의 퍼센트 값으로, 이는 색상의 강도를 나타냅니다.

 

명도 값은 0부터 100까지의 퍼센트 값으로, 이는 색상의 밝기를 나타냅니다.

color: hsl(0, 100%, 50%);

여기서 Hue 값이 0이므로 빨간색을 나타내며, Saturation 값이 100%이므로 색상이 진하게 나타납니다. 

 

Lightness 값이 50%이므로 중간 정도의 밝기를 가지게 됩니다.

HSLA 값은 HSL과 유사하지만, 마지막에 알파(투명도) 값이 추가된 것입니다. 

 

이를 사용하면 색상의 투명도를 지정할 수 있습니다. 

 

예를 들어, 아래와 같이 빨간색의 투명도가 50%인 값을 표현할 수 있습니다.

color: hsla(0, 100%, 50%, 0.5);

이 경우 마지막 값이 알파(투명도) 값이므로, 색상이 반투명으로 나타나게 됩니다.