CSS 독학 가이드 5 - 색상과 타이포그래피

2025년 11월 25일 learning by Seven Fingers Studio 19분

CSS색상타이포그래피폰트그라디언트디자인

색상이 디자인의 80%다

레이아웃이 잘 잡혀도 색상이 이상하면 전체가 이상해 보여요. 반대로 색상만 잘 써도 “와, 디자인 잘하네!” 소리를 듣죠.

저는 처음에 색상 고르는 게 제일 어려웠어요. 지금도 완벽하진 않지만, 색상 표현 방법과 조합 원리를 알고 나니 훨씬 나아졌습니다.

색상 표현 방법

1. 색상 이름

.box {
  color: red;
  background-color: blue;
}

장점: 간단함 단점: 선택 폭 좁음 (140개 정도)

개발 초기나 테스트할 때만 쓰세요.

2. HEX 코드 (16진수) ⭐ 가장 많이 씀

.box {
  color: #ff0000;  /* 빨강 */
  background: #0000ff;  /* 파랑 */
}

실행 결과:

빨간 글씨, 파란 배경

HEX 코드: #ff0000 (빨강), #0000ff (파랑)

#RRGGBB 형식이에요. 각 2자리씩 빨강, 초록, 파랑의 강도를 나타냅니다.

/* 축약형 (같은 숫자 반복할 때) */
#ffffff → #fff  /* 흰색 */
#000000 → #000  /* 검정 */
#ff6600 → #f60  /* 주황 */

실무 팁: 디자이너가 전달하는 색상은 거의 HEX 코드예요.

3. RGB / RGBA

.box {
  color: rgb(255, 0, 0);  /* 빨강 */
  background: rgba(0, 0, 255, 0.5);  /* 반투명 파랑 */
}

실행 결과:

반투명 배경 (RGBA)

RGBA의 마지막 값(0.5)으로 50% 투명도 적용

RGB: Red, Green, Blue (각 0~255)
RGBA: A는 Alpha (투명도, 0~1)

언제 쓰나요?

투명도 조절 필요할 때
JavaScript로 색상 조작할 때

4. HSL / HSLA ⭐ 색상 조작에 최고

.box {
  color: hsl(0, 100%, 50%);  /* 빨강 */
  background: hsla(240, 100%, 50%, 0.5);  /* 반투명 파랑 */
}

실행 결과:

HSL 색상 환 (Hue: 0-360도)

HSL은 색조(H), 채도(S), 명도(L)로 직관적으로 색상을 조절할 수 있습니다

H (Hue): 색조 (0~360도)
- 0 = 빨강, 120 = 초록, 240 = 파랑
S (Saturation): 채도 (0~100%)
- 0% = 회색, 100% = 선명
L (Lightness): 명도 (0~100%)
- 0% = 검정, 50% = 보통, 100% = 흰색

왜 좋은가요?

:root {
  --primary: hsl(220, 90%, 56%);
}

.button { background: var(--primary); }
.button:hover { background: hsl(220, 90%, 46%); }  /* 명도만 낮춤 */
.button-light { background: hsl(220, 70%, 80%); }  /* 채도와 명도 조정 */

같은 색상(220도)을 유지하면서 명도만 바꾸면 자연스러운 변형이 가능해요!

그라디언트 (Gradient)

1. 선형 그라디언트 (Linear Gradient)

.box {
  background: linear-gradient(to right, #ff0000, #0000ff);
  /* 빨강에서 파랑으로 */
}

방향 지정:

/* 키워드 */
background: linear-gradient(to top, red, blue);
background: linear-gradient(to bottom right, red, blue);

/* 각도 (시계방향) */
background: linear-gradient(45deg, red, blue);
background: linear-gradient(180deg, red, blue);  /* 위에서 아래 */

여러 색상:

background: linear-gradient(
  to right,
  #ff0000,
  #ffff00,
  #00ff00,
  #0000ff
);

색상 위치 지정:

background: linear-gradient(
  to right,
  #ff0000 0%,
  #ffff00 33%,
  #00ff00 66%,
  #0000ff 100%
);

2. 원형 그라디언트 (Radial Gradient)

.box {
  background: radial-gradient(circle, #ff0000, #0000ff);
}

/* 타원형 */
background: radial-gradient(ellipse, red, blue);

/* 위치 지정 */
background: radial-gradient(circle at top left, red, blue);
background: radial-gradient(circle at 30% 40%, red, blue);

3. 실전 그라디언트

/* 부드러운 배경 */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 버튼 효과 */
.button {
  background: linear-gradient(to bottom, #5cb85c, #4cae4c);
}

.button:hover {
  background: linear-gradient(to bottom, #4cae4c, #3d8b3d);
}

/* 텍스트 그라디언트 */
.gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

실행 결과:

부드러운 그라디언트 배경

텍스트 그라디언트

타이포그래피 기초

font-family (폰트 종류)

body {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

폰트 스택: 왼쪽부터 우선 적용, 없으면 다음 폰트 사용

일반 분류:

serif: 명조체 (Times New Roman)
sans-serif: 고딕체 (Arial, Helvetica)
monospace: 고정폭 (Courier)
cursive: 필기체
fantasy: 장식체

웹폰트 사용하기

Google Fonts 방법:

fonts.google.com 접속
폰트 선택 (예: Noto Sans KR)
HTML에 링크 추가

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
</head>

body {
  font-family: 'Noto Sans KR', sans-serif;
}

@font-face 방법 (로컬 폰트):

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/custom.woff2') format('woff2'),
       url('/fonts/custom.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

font-size (글자 크기)

p {
  font-size: 16px;   /* 고정 크기 */
  font-size: 1rem;   /* root 기준 (보통 16px) */
  font-size: 1.5em;  /* 부모 기준 */
  font-size: 100%;   /* 부모와 동일 */
}

실무 권장:

html { font-size: 16px; }  /* 기본 크기 */

h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.5rem; }   /* 24px */
p { font-size: 1rem; }      /* 16px */
small { font-size: 0.875rem; }  /* 14px */

rem을 쓰면 사용자가 브라우저에서 글자 크기를 조정할 수 있어요!

font-weight (굵기)

p {
  font-weight: normal;  /* 400 */
  font-weight: bold;    /* 700 */
  font-weight: 100;     /* 아주 얇음 */
  font-weight: 900;     /* 아주 굵음 */
}

실무 사용:

h1 { font-weight: 700; }  /* 굵게 */
p { font-weight: 400; }   /* 보통 */
.light { font-weight: 300; }  /* 얇게 */

line-height (줄 간격)

p {
  line-height: 1.6;  /* 글자 크기의 1.6배 (추천) */
  line-height: 24px; /* 고정 크기 */
  line-height: 160%; /* 퍼센트 */
}

가독성 황금 비율:

p {
  font-size: 16px;
  line-height: 1.6;  /* 25.6px 간격 */
}

1.4~1.8 사이가 가장 읽기 편해요. 저는 1.6을 주로 씁니다.

letter-spacing (자간)

h1 {
  letter-spacing: 2px;    /* 글자 사이 2px */
  letter-spacing: 0.1em;  /* 글자 크기의 10% */
  letter-spacing: -1px;   /* 좁히기 */
}

언제 쓰나요?

제목: 약간 넓게 (1~2px)
소문자 영어: 약간 넓게 (0.5~1px)
본문: 기본값 유지

text-align (정렬)

p {
  text-align: left;    /* 왼쪽 (기본) */
  text-align: center;  /* 중앙 */
  text-align: right;   /* 오른쪽 */
  text-align: justify; /* 양쪽 정렬 */
}

text-decoration (밑줄/취소선)

a {
  text-decoration: none;  /* 링크 밑줄 제거 */
}

.sale {
  text-decoration: line-through;  /* 취소선 */
}

.underline {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;  /* 물결 밑줄 */
}

text-transform (대소문자 변환)

.uppercase { text-transform: uppercase; }  /* 대문자 */
.lowercase { text-transform: lowercase; }  /* 소문자 */
.capitalize { text-transform: capitalize; }  /* 첫글자만 대문자 */

텍스트 그림자 (text-shadow)

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  /* x좌표 y좌표 blur 색상 */
}

실전 예제:

/* 부드러운 그림자 */
.soft-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 강한 그림자 */
.strong-shadow {
  text-shadow: 3px 3px 0 #000;
}

/* 여러 겹 그림자 */
.neon {
  color: #fff;
  text-shadow:
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 30px #00ff00;
}

말줄임 (Text Overflow)

한 줄 말줄임

.ellipsis {
  white-space: nowrap;        /* 줄바꿈 금지 */
  overflow: hidden;           /* 넘치는 부분 숨김 */
  text-overflow: ellipsis;    /* ... 표시 */
}

여러 줄 말줄임

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 3줄까지만 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

색상 조합 팁

1. 60-30-10 법칙

주 색상 60%
보조 색상 30%
강조 색상 10%

:root {
  --primary: #3498db;    /* 주 색상 60% */
  --secondary: #2c3e50;  /* 보조 색상 30% */
  --accent: #e74c3c;     /* 강조 색상 10% */
}

2. 무채색 + 강조색

:root {
  --gray-900: #1a1a1a;
  --gray-700: #4a4a4a;
  --gray-500: #6b6b6b;
  --gray-300: #d4d4d4;
  --gray-100: #f5f5f5;

  --accent: #3b82f6;  /* 파랑 강조 */
}

안전하고 세련된 조합이에요!

3. 색상 툴 추천

Coolors.co: 색상 팔레트 생성
Adobe Color: 색상 조합 이론 기반
Paletton: 보색, 유사색 자동 생성

실전 예제: 블로그 타이포그래피

:root {
  --font-sans: 'Pretendard', -apple-system, sans-serif;
  --font-serif: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 2rem; margin: 2rem 0 1rem; }
h3 { font-size: 1.5rem; margin: 1.5rem 0 0.75rem; }

p {
  margin-bottom: 1.5rem;
}

code {
  font-family: var(--font-mono);
  background: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

다음 단계

색상과 타이포그래피를 마스터했으니 이제 반응형 디자인을 배울 차례예요. 모바일, 태블릿, 데스크톱에서 모두 잘 보이는 웹사이트를 만드는 법을 배워봅시다!

다음 글에서는 미디어 쿼리, 유동 레이아웃, 반응형 이미지 등을 다룰 거예요.

실습 과제:

HSL로 비슷한 색상 5개 만들어보기 (H는 고정, S와 L만 변경)
그라디언트 버튼 만들어보기
3줄 말줄임 카드 UI 만들어보기
자신만의 색상 팔레트 정하기 (주, 보조, 강조색)

시리즈 네비게이션

이전글: CSS 독학 가이드 - Grid 레이아웃
현재글: CSS 독학 가이드 - 색상과 타이포그래피
다음글: CSS 독학 가이드 - 반응형 디자인

← 블로그 목록으로