dev_or_alive

[CSS][color] color, background-color 본문

Web Programming/CSS

[CSS][color] color, background-color

개발로 먹고살자 2025. 5. 4. 18:14

✅ 개요

웹 스타일을 다룰 때 가장 먼저 만나게 되는 속성이 color와 background-color입니다.

이번 포스트에서는 색상을 지정하는 가장 기본적인 방법을 알아보겠습니다.

✅ 핵심 속성

색상 관련한 핵심 속성으로는 color와 background-color가 있습니다.

color 속성은 텍스트(전경색)를 나타내며, background-color는 배경색을 나타냅니다.

color는 텍스트에 적용하며 “상속”되는 특징이 있습니다. (부모 요소에 적용된 color값이 자식 요소에도 자동 적용됩니다.)

background-color는 배경색을 적용하며, 상속되지 않습니다.

p {
  color: red;
}
.box {
  background-color: #f0f0f0;
}

🔥 색상 표기 방법

색상의 값을 표기하는데에는 기본적으로 아래와 같이 4가지 방법이 있습니다.

  • 이름 : red, skyblue
  • 16진수 : #ffffff, #fff
  • RGB/RGBA : rgb(255, 107, 129), rgba(255, 107, 129, 0.8)
  • HSL : hsl(0, 0%, 84%), hsla(0, 100%, 50%, 0.5)

🔥 이름을 이용한 표기

color : skyblue; 형태의 문법으로 작성합니다.

대소문자를 구분 하지 않으며, 영문 표기만 가능합니다.

장점으로는 암기하기 쉬우며, 주요 원색에 대한 처리를 할 때 유용합니다.

단점으로는 주요 140색 이외에는 사용할 수 없어 정밀한 제어가 불가합니다.

.warning {
  color: crimson;
}
.ghost-btn {
  background: transparent;
  border: 1px solid currentColor;
}

🔥 16진수를 이용한 표기

#bb3636처럼 16진수를 이용하여 표현합니다.

가장 많이 쓰이며, 디자이너 툴과의 연동이 편리합니다.

단점으로는 투명도 처리에 별도 속성이 필요합니다.

.brand {
  color: #0d6efd;
}
.overlay {
  background: #00000080; /* 50% 투명 블랙 (#000 + 80) */
}

🔥 RGB/RGBA를 이용한 표기

color: rgb(255, 255, 255); 처럼 RGB를 이용하여 표현이 가능합니다.

알파값을 추가하여 color: rgb(255, 255, 255, 0.8) 같이 사용도 가능합니다.

각 자리수는 red, green, blue (0~255) 투명도 알파값( 0~1 또는 0~100%)를 나타냅니다.

투명도 지정이 간단하지만,

빛의 3원색 강도를 동시에 조정해야만 색조,채도,명도를 바꿀수 있으므로

“색을 밝게, 어둡게 하거나 다른 계열로 돌리는 작업”이 번거롭습니다.

.backdrop {
  background: rgb(0 0 0 / 60%);
} /* 어두운 투명막 */
.alert {
  color: rgb(255 0 0);
} /* 순수한 빨강 */

🔥 HSL/HSLA를 이용한 표기

HSL은 Hue(0~360), Saturation(0~100%), Lighness(0~100%)로 구성되어 있습니다.

이는 각각 색상, 선명, 밝기를 나타냅니다.

Hue값 하나만 조정하면 손쉽게 색조를 이동할 수 있어 팔레트 확장, 다크모드, 파스텔 조정등에 매우 편리합니다.

H(색상 : Hue)

  • 범위 : 0~360deg
  • 색상환에서의 위치를 나타냅니다.
  • 0과 360은 빨강, 120은 초록, 240은 파랑으로 원을 돌며 색이 변합니다.

S(채도 : Saturation)

  • 범위 : 0~100%
  • 색의 선명함을 뜻합니다. 0%면 완전 회색(무채색) 100%면 가장 짙은 순색입니다.

L(명도 : Lightness)

  • 범위 : 0~100%
  • 밝기를 의미합니다. 0%는 검정, 50%에서 가장 선명하며 100%는 흰색이 됩니다.
/* 빨강 → Hue +120° → 초록 */
.red {
  background: hsl(0 80% 50%);
}
.green {
  background: hsl(120 80% 50%);
}

🔥 기본 예제를 통한 감잡기

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        background-color: #ffffff;
        color: #222;
      }
      h1 {
        color: hsl(200, 70%, 45%);
      }
      .warning {
        background-color: rgba(255, 213, 0, 0.3);
      }
      .accent {
        color: #e63946;
      }
    </style>
  </head>
  <body>
    <h1>CSS 색상 연습</h1>
    <p>기본 텍스트입니다.</p>
    <p class="accent">강조 텍스트입니다.</p>
    <p class="warning">주의 배경 박스입니다.</p>
  </body>
</html>

✅ 마무리

색상의 네 가지 표기법은 각각 표현력, 가독성, 용이성이 서로 다릅니다.

상황에 맞는 표기법을 사용하여 작성할 경우 테마 변경이나 유지보수가 더욱 편리해질수 있습니다.

반응형

'Web Programming > CSS' 카테고리의 다른 글

[CSS][길이 단위] %, vw, vh  (0) 2025.05.19
[CSS][길이단위] px, em, rem  (0) 2025.05.08
[CSS][선택자] 개요 및 기본 문법  (1) 2025.05.03
[CSS] CSS 개요 및 기초 이해하기  (0) 2025.05.01
SVG(Scalable Vector Graphics)에 대해 알아보자  (2) 2024.04.07
'Web Programming/CSS' Related Articles more