CSS Color Format

by

원본: CSS color format basic tutorial

이 포스트에서는 Hex 코드, HTML 색 이름, RGB 및 HSL 같은 다양한 CSS Color Format을 사용하는 방법을 알아보겠습니다.

CSS Color Format: Hex 코드 사용 방법

HTML 요소에 색을 추가하고자 하는 경우 Hex 색상 코드를 많이 사용합니다.

css 파일에서는 body 태그의 color 속성에 Hex 색상 코드를 적용하면 웹 사이트 텍스트의 기본 색상을 변경할 수 있습니다:

body {
  color: #FF0000;
}

또 다른 방법으로는 html 파일의 <head> 요소에 Hex 색상 코드를 추가하는 것 입니다. 다음과 같이 <head> 안에 <style>을 추가할 수 있습니다:

<head>
  <style>
    body {
      color: #FF0000;
    }
  </style>
</head>

body 태그는 예제일 뿐이고 대부분의 HTML 요소의 color 속성에 Hex 코드를 적용할 수 있습니다.

다음은 색상을 적용한 전체 코드입니다:

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      color: #FF0000;
    }
  </style>
</head>

<body>
  <h1>shinyks.com</h1>
  <p>color example</p>
</body>

</html>

위의 코드를 실행하면 다음과 같은 결과를 볼 수 있습니다:

CSS Color Format 예제

CSS Color Format: 색상 이름 사용 방법

HTML 색상 이름은 CSS로 콘텐츠의 스타일을 지정하는 또 다른 방법이며 다른 포멧 보다 좀 더 알아보기 쉽습니다.

실제 사용은 Hex 색상 코드를 적용하는 것과 같은 방법을 씁니다. 다음은 스타일시트에 body 태그의 color 속성을 설정하는 예제입니다:

body {
  color: red;
}

현재 160 개 이상의 색상 이름을 모든 최신 브라우저에서 지원하고 있습니다.

RGB 사용 방법

RGB는 각각 Red, Green, Blue를 의미하는 색상 시스템으로 많은 디자인 프로그램 및 기술에 적용되어 있으며 최근에는 웹 디자이너와 개발자 모두가 사용하는 색상 시스템입니다.

CSS에서 RGB 색상을 사용하려면 소문자 ‘rgb’에 괄호로 묶은 red, green, blue의 값을 넣으면 됩니다. 각각의 red, green, blue 값의 범위는 0 에서 255 사이 입니다.

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

RGB 색상의 이점 중 하나는 색상 외에 투명도 까지 제어할 수 있다는 점 입니다. 이를 사용하려면 rgb 키워드 대신 rgba를 사용하여 alpha를 의미하는 네 번째 자리에 0에서 1 사이의 값을 넣어 투명도를 제어할 수 있습니다.

다음의 예제에서는 alpha 값을 0.5로 지정하였습니다. 이 값은 0과 1의 중간 값 이므로 HTML 페이지의 텍스트 투명도를 50%로 보이게 합니다:

body {
  color: rgba(255, 0, 0, 0.5);
}

RGB 색상을 사용하고 싶은데 어떤 값을 넣어야 할지 모르겠는 경우 MDN Color Picker Tool에서 색상을 생성해 볼 수 있습니다.

HSL 사용 방법

아마 HSL에 대해 들어 본 적 있을 것 입니다. 이는 각각 색조(Hue), 채도(Saturation), 명도(Lightness)를 나타내며 많은 프로그램에서 사용하고 있는 또 다른 색상 시스템입니다.

색조는 0 ~ 360도 단위로 측정되며, 채도와 밝기는 0% ~ 100% 사이의 값을 가집니다. RGB 색상과 비슷하게 HSL 색상의 구문은 다음과 같이 hsl 키워드를 사용합니다.

body {
  color: hsl(0, 100%, 50%);
}

RGB 색상의 alpha와 마찬가지로 HSL 역시 색상의 투명도를 제어하는 alpha 채널을 지원합니다. 사용 방법은 hsl 키워드 대신 hsla 키워드를 사용하고 alpha 값의 범위는 0 ~ 1 사이의 값 입니다.

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

참고로 rgba(), hsl(), hsla()는 CSS에 비교적 최근에 추가되어, 일부 오래된 브라우저에서는 지원되지 않습니다. 상황에 따라 투명도를 조작하는 다른 방법을 찾아야 할 수도 있습니다.

관련 글