[CSS] 텍스트 색 및 배경색 변경하기 (color, background-color)

CSS에서 색상을 지정하기 위해 알아야 할 주요 속성과 값에 대해 알아보자.

---

type(속성)

color

• color 속성을 사용하여 선택한 요소의 텍스트 색상을 바꿀 수 있다.
• 텍스트뿐만 아니라 테두리와 같은 텍스트와 관련된 일부 속성에도 영향을 준다.

background-color

• 선택한 요소의 배경색을 변경해준다.
• 배경색은 컨텐츠뿐만 아니라 요소의 패딩 영역(padding) 에도 적용된다.

background

• background는 background-color 보다 훨씬 많은 일을 한다.
• 배경 색상뿐만 아니라, 배경 이미지, 그라디언트(gradient), 배경 반복(repeat) 등의 옵션을 설정할 수 있다.
• 배경색을 바꾸는 것 뿐만 아니라 배경 이미지, gradient 등을 설정할 수 있다.

---

value(값)

색상명 사용

• 브라우저가 제공하는 140가지 색상명을 통해 색을 설정할 수 있다.
• 예제:
  • orange
  • magenta
  • green
  • white
  • black
    요즘 모니터가 1,600만 가지 이상의 색상을 제공하는 것과 비교하면 140개의 색은 굉장히 적다. 따라서 색상명을 사용한 색상 설정은 복잡한 색상 표현에는 적합하지 않다.

RGB

• 가산 컬러 시스템을 사용한다.
• 브라우저는 Red, Green, Blue 세 가지 채널로 색성을 표현하며, 각 채널은 0 ~ 255 사이의 값을 가진다.
• 형식: rgb(RED, GREEN, BLUE)
• 예제:
  • rgb(255, 0, 0) → 빨간색
  • rgb(0, 255, 0) → 초록색
  • rgb(0, 0, 255) → 파란색
  • rgb(0, 0, 0) → 검정색
  • rgb(255, 255, 255) → 흰색

16진법(Hex)

• 색상을 16진법(Hexadecimal) 으로 표현한다.
• 형식: #RRGGBB
  • 각 쌍(RR, GG, BB)은 0 ~ FF(10진수로 0 ~ 255)에 해당한다.
• # 해시 기호를 앞에 붙여줘야 한다.
• 단축형: 만약 R, G, B 값이 동일하다면, 3자리로 줄여서 표현할 수 있다.
  • #CC55EE => #C5E