색상과 배경 마음대로 다루기

색상 하나가 분위기를 바꾼다

같은 텍스트라도 배경색과 글자색에 따라 완전히 다른 느낌을 줍니다. 밝고 화사한 느낌, 차갑고 전문적인 느낌, 따뜻하고 친근한 느낌… 색상이 만드는 차이는 생각보다 엄청납니다.

이번 편에서는 색상 표현 방법과 배경 관련 CSS 속성을 깊이 있게 배웁니다.

색상 표현 방법

1. HEX 코드

color: #ff6b6b;   /* 산호색 */
color: #4ecdc4;   /* 민트 */
color: #2c3e50;   /* 짙은 네이비 */
color: #f9f9f9;   /* 거의 흰색 */

#RRGGBB 형식입니다. 빨강(R), 초록(G), 파랑(B) 각각 0~~ff(0~~255) 범위입니다.

같은 두 글자가 반복되면 줄여 쓸 수 있습니다.

color: #ffffff;  →  color: #fff;   /* 흰색 */
color: #000000;  →  color: #000;   /* 검정 */
color: #ff0000;  →  color: #f00;   /* 빨강 */

2. RGB / RGBA

color: rgb(255, 107, 107);         /* 산호색 */
color: rgba(255, 107, 107, 0.5);   /* 50% 투명 산호색 */
color: rgba(0, 0, 0, 0.3);         /* 30% 투명 검정 = 반투명 오버레이 */

rgba의 네 번째 값(알파)은 0(완전 투명) ~ 1(완전 불투명) 입니다.

3. HSL / HSLA

color: hsl(0, 100%, 50%);    /* 빨강 */
color: hsl(120, 100%, 50%);  /* 초록 */
color: hsl(240, 100%, 50%);  /* 파랑 */
color: hsl(0, 0%, 50%);      /* 회색 */

H (Hue): 색조 0~360° (빨강:0, 초록:120, 파랑:240)
S (Saturation): 채도 0~100%
L (Lightness): 밝기 0~100%

HSL은 색을 직관적으로 조절할 때 편합니다. 밝기만 바꾸고 싶으면 L 값만 변경하면 됩니다.

글자색 — `color`

p {
  color: #333333;   /* 짙은 회색 (검정보다 눈이 덜 피로함) */
}

a {
  color: #0070f3;   /* 파란 링크 */
}

.muted {
  color: #999999;   /* 흐릿한 보조 텍스트 */
}

배경색 — `background-color`

body {
  background-color: #f5f5f5;
}

header {
  background-color: #1a1a2e;
}

.card {
  background-color: white;
}

.warning {
  background-color: #fff3cd;   /* 경고 배경: 연한 노랑 */
  color: #664d03;
}

배경 이미지 — `background-image`

.hero {
  background-image: url('background.jpg');
  background-size: cover;        /* 컨테이너를 꽉 채움 */
  background-position: center;   /* 가운데 정렬 */
  background-repeat: no-repeat;  /* 반복 없음 */
  height: 400px;
}

속성	설명
`background-size: cover`	비율 유지하며 컨테이너를 꽉 채움
`background-size: contain`	전체 이미지가 보이도록 축소
`background-position: center`	가운데 정렬
`background-repeat: no-repeat`	이미지 반복 없음
`background-attachment: fixed`	스크롤해도 배경 고정

그라디언트 — `gradient`

그라디언트는 두 가지 이상의 색이 자연스럽게 섞이는 효과입니다. 멋진 헤더나 버튼에 자주 씁니다.

선형 그라디언트

.gradient-box {
  /* 위에서 아래로 */
  background: linear-gradient(to bottom, #ff6b6b, #ffd93d);

  /* 왼쪽에서 오른쪽으로 */
  background: linear-gradient(to right, #667eea, #764ba2);

  /* 대각선 (45도) */
  background: linear-gradient(45deg, #f093fb, #f5576c);
}

원형 그라디언트

.circle-gradient {
  background: radial-gradient(circle, #f9f9f9, #333333);
}

투명도 — `opacity`

요소 전체의 투명도를 조절합니다.

.overlay {
  opacity: 0.7;   /* 70% 불투명 (30% 투명) */
}

.hidden {
  opacity: 0;     /* 완전 투명 (공간은 차지함) */
}

opacity는 요소 전체(글자, 배경, 자식 요소 모두)에 적용됩니다. 배경만 투명하게 하려면 rgba를 씁니다.

실전 예시: 카드 컴포넌트

.card {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
}

.card-header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 15px 20px;
  border-radius: 8px 8px 0 0;
}

.card-badge {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
}

직접 해보기 ✏️

아래 조건에 맞는 CSS를 작성하고 HTML에 적용해 보세요.

body: 배경색 #f0f4f8, 글자색 #2d3748
header: 좋아하는 그라디언트 배경 + 흰 글자
.card 클래스: 흰 배경, 테두리 1px, 모서리 둥글게 (border-radius)
.card:hover: 마우스 오버 시 배경색을 살짝 다른 색으로

<header>
  <h1>내 사이트</h1>
</header>

<div class="card">
  <h2>카드 제목</h2>
  <p>카드 내용입니다.</p>
</div>

색상 조합이 막막하면 coolors.co 에서 팔레트를 생성해 보세요.

정리

속성	용도
`color`	글자색
`background-color`	배경색
`background-image: url()`	배경 이미지
`background-size: cover`	배경 이미지 꽉 채우기
`linear-gradient()`	선형 그라디언트
`rgba(r, g, b, a)`	투명도 포함 색상
`opacity`	요소 전체 투명도

다음 편에서는 폰트와 텍스트 스타일링을 배웁니다. 구글 폰트를 무료로 적용하는 방법도 포함입니다.