글자와 색을 다루는 첫걸음: 텍스트, 폰트, 색상, 배경

2026-04-08Views 268약 9분

웹페이지를 처음 꾸밀 때 가장 빨리 재미를 느끼는 부분이 바로 글자와 색입니다. 같은 HTML이라도 글자 크기를 조금 키우고, 줄 간격을 조절하고, 배경색을 얹는 순간 화면 분위기가 확 달라집니다. 마치 흰 도화지에 첫 색을 올리는 기분이라고 할까요.

이 챕터에서는 color, font-family, font-size, line-height, text-align, background-color 같은 가장 자주 쓰는 속성을 익히며, 읽기 쉬운 화면을 만드는 기본 감각을 잡아보겠습니다. 특히 초보자가 흔히 하는 실수인 "예쁘게는 했는데 읽기 불편한 화면"을 피하는 데 집중하겠습니다.

먼저 감 잡기: 글자를 꾸민다는 것은 무엇일까

CSS에서 글자 스타일링은 크게 두 갈래로 나눌 수 있습니다. 하나는 글꼴 자체를 바꾸는 일이고, 다른 하나는 글자가 배치되는 방식을 다듬는 일입니다. 예를 들어 font-family, font-size, font-weight는 글꼴의 성격을 바꾸고, line-height, letter-spacing, text-align은 읽는 흐름을 바꿉니다.¹

쉽게 말해 이런 차이입니다.

폰트 관련 속성은 "이 글자가 어떤 얼굴을 가질까?"를 정합니다.
텍스트 관련 속성은 "이 글자가 얼마나 읽기 편할까?"를 정합니다.
배경 관련 속성은 "이 글자가 어떤 무드 위에 놓일까?"를 정합니다.

초보자일수록 장식보다 가독성을 먼저 챙기는 습관이 중요합니다. 멋진 화면은 대개 화려해서가 아니라 읽기 편해서 오래 보게 됩니다.

예제 준비: 아주 작은 소개 카드

앞으로 여러 속성을 실습할 수 있도록 간단한 HTML을 하나 준비하겠습니다.

<div class="card">
  <h1>CSS 기초 스터디</h1>
  <p class="subtitle">글자와 색을 다루는 첫걸음</p>
  <p>
    좋은 디자인은 거창한 효과보다 읽기 쉬운 글자에서 시작합니다.
    오늘은 색, 폰트, 줄 간격, 배경을 이용해 편안한 화면을 만들어 봅니다.
  </p>
  <a href="#">자세히 보기</a>
</div>

아직은 아주 밋밋합니다. 이제 CSS로 조금씩 숨을 불어넣어 보겠습니다.

글자 색 바꾸기: `color`

텍스트 색을 바꾸는 가장 기본 속성은 color입니다. 이름 그대로 글자 색을 정합니다. 색상 값은 여러 방식으로 쓸 수 있는데, 초보자에게 가장 많이 보이는 방식은 색상 이름, HEX, RGB, HSL입니다.²

h1 {
  color: navy;
}

.subtitle {
  color: #666666;
}

p {
  color: rgb(51, 51, 51);
}

a {
  color: hsl(220, 70%, 45%);
}

각 방식은 이렇게 이해하면 쉽습니다.

색상 이름: red, blue, green처럼 바로 읽히는 값
HEX: #333333, #ff6600처럼 웹에서 아주 자주 쓰는 방식
RGB/RGBA: 빨강, 초록, 파랑의 양으로 색을 만드는 방식
HSL/HSLA: 색상, 채도, 밝기로 색을 다루는 방식

처음에는 HEX가 가장 무난합니다. 예를 들어 본문 글자색은 완전한 검정 #000보다 조금 부드러운 #222, #333, #444를 많이 사용합니다. 화면이 덜 딱딱해 보이기 때문입니다.

색상보다 더 중요한 것: 대비

텍스트와 배경의 대비가 약하면, 아무리 예쁜 색이어도 읽기 어렵습니다. 연한 회색 글자를 거의 흰 배경 위에 올리면 분위기는 세련돼 보일 수 있지만, 실제로는 눈이 피곤해집니다. 글자색과 배경색은 충분히 구분되게 잡아야 합니다.³

좋은 예:

body {
  background-color: #ffffff;
  color: #222222;
}

아쉬운 예:

body {
  background-color: #ffffff;
  color: #d9d9d9;
}

두 번째 코드는 "감성은 있는데 잘 안 보이는" 대표 사례입니다.

폰트의 분위기 정하기: `font-family`

폰트는 화면의 말투를 정합니다. 같은 문장도 폰트가 바뀌면 느낌이 달라집니다. font-family는 글꼴을 지정하는 속성입니다.

body {
  font-family: Arial, Helvetica, sans-serif;
}

여기서 중요한 개념이 폰트 스택(font stack) 입니다. 브라우저는 왼쪽부터 차례대로 폰트를 확인하고, 사용 가능한 폰트를 찾으면 그걸 적용합니다. 마지막에는 sans-serif, serif, monospace 같은 일반 계열 이름을 넣어 두는 것이 좋습니다.⁴

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

이 코드는 이런 뜻입니다.

"Helvetica Neue가 있으면 그걸 쓰고, 없으면 Arial, 그것도 없으면 아무 sans-serif 계열이라도 써 줘."

어떤 폰트를 고르면 좋을까

초보자는 우선 너무 특이한 폰트보다 읽기 쉬운 계열부터 시작하는 것이 좋습니다.

sans-serif: 깔끔하고 현대적인 느낌, 웹 본문에 무난함
serif: 책이나 기사 같은 느낌, 차분하고 전통적임
monospace: 글자 폭이 모두 같음, 코드 표시에 자주 사용

그리고 공백이 들어가는 폰트 이름은 따옴표로 감싸는 습관을 들이면 안전합니다.⁴

h1 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

글자 크기와 굵기: `font-size`, `font-weight`, `font-style`

글자를 꾸밀 때 가장 먼저 손이 가는 속성이 크기입니다.

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

초보자에게는 px가 가장 직관적입니다. 다만 실무에서는 rem도 자주 쓰입니다. rem은 문서의 기준 글자 크기를 바탕으로 계산되어, 전체 크기 조절이 편합니다.¹

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

굵기는 font-weight로 조절합니다.

h1 {
  font-weight: 700;
}

.subtitle {
  font-weight: 400;
}

일반적으로 이렇게 기억하면 충분합니다.

400: 보통 굵기
700: 굵게
숫자가 클수록 더 두꺼움

기울임은 font-style입니다.

em {
  font-style: italic;
}

하지만 본문 전체를 기울이는 일은 드뭅니다. 강조가 필요한 짧은 부분에만 쓰는 편이 좋습니다.

읽기 편한 화면의 핵심: 줄 간격과 정렬

초보자가 가장 놓치기 쉬운 부분이 바로 여기입니다. 폰트보다 더 중요한 게 줄 간격일 때가 많습니다.

줄 간격: `line-height`

본문이 답답해 보인다면 대개 줄 간격이 너무 좁은 경우가 많습니다. line-height는 줄과 줄 사이의 높이를 정합니다.⁵

p {
  line-height: 1.7;
}

숫자만 쓰는 방식이 특히 편합니다. 현재 글자 크기의 몇 배로 줄 간격을 줄지 정하는 방식입니다.

본문은 보통 1.5 ~ 1.8 정도가 읽기 편합니다.
제목은 본문보다 조금 좁아도 괜찮습니다.
너무 크면 줄이 흩어져 보이고, 너무 작으면 숨이 막힙니다.

예를 들어 본문이 16px인데 line-height: 1.7;이라면 꽤 편안한 읽기 흐름이 됩니다.

정렬: `text-align`

h1 {
  text-align: center;
}

p {
  text-align: left;
}

정렬은 쉽지만, 의외로 남용하기 쉬운 속성입니다.

제목 한두 개는 가운데 정렬이 잘 어울림
긴 본문은 왼쪽 정렬이 가장 읽기 편함
justify는 양쪽 정렬인데, 상황에 따라 단어 간격이 부자연스러울 수 있음⁶

처음에는 "본문은 왼쪽 정렬"이라고 생각해도 거의 틀리지 않습니다.

글자의 디테일 다듬기: `text-transform`, `text-decoration`, `letter-spacing`

이제 화면에 성격을 조금 더 넣어 보겠습니다.

대소문자 모양 바꾸기: `text-transform`

h1 {
  text-transform: uppercase;
}

영문에서는 제목을 대문자로 바꾸는 데 자주 씁니다. 다만 한글은 대소문자 개념이 없으므로 변화가 없습니다.¹

밑줄과 취소선: `text-decoration`

a {
  text-decoration: none;
}

.old-price {
  text-decoration: line-through;
}

링크의 기본 밑줄을 없앨 때 많이 사용합니다. 하지만 링크에서 밑줄을 없앴다면 색상이나 굵기 같은 다른 신호를 줘서 클릭 가능한 요소임을 알리는 것이 좋습니다.⁶

또 하나 기억할 점이 있습니다. 링크가 아닌 일반 텍스트에 밑줄을 남발하면 사용자가 링크로 오해할 수 있습니다.⁶

자간 조절: `letter-spacing`

h1 {
  letter-spacing: -0.5px;
}

.subtitle {
  letter-spacing: 1px;
}

글자 사이 간격을 조절하는 속성입니다. 제목에서는 아주 약하게 좁히거나 넓히는 정도가 자주 쓰입니다. 하지만 본문에 크게 적용하면 오히려 읽기 어려워질 수 있습니다.⁵

작은 팁 하나를 드리면, 영어 제목은 살짝 넓히면 분위기가 나고, 한글 본문은 과한 자간 조절을 피하는 편이 안전합니다.

배경 넣기: `background-color`

이제 화면의 바탕을 꾸며 보겠습니다. 가장 쉬운 방법은 background-color입니다.

body {
  background-color: #f7f8fb;
}

.card {
  background-color: #ffffff;
}

배경색은 요소의 내용뿐 아니라 패딩과 테두리 영역까지 채웁니다.⁷ 그래서 카드, 버튼, 박스 같은 UI를 만들 때 아주 자주 사용합니다.

중요한 원칙은 하나입니다. 배경은 글자를 돋보이게 해야지, 싸우면 안 됩니다.

예를 들어 카드 배경은 흰색, 페이지 전체는 아주 연한 회색처럼 두면 구분이 깔끔해집니다.

배경 이미지 넣기: `background-image`

배경은 색만 되는 것이 아닙니다. 이미지를 넣을 수도 있습니다.

.hero {
  background-image: url("banner.jpg");
}

하지만 여기서 끝내면 보통 이미지가 반복됩니다. 기본값이 반복이기 때문입니다. 그래서 보통 아래 속성들을 함께 씁니다.⁸

.hero {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

각 속성의 뜻은 이렇습니다.

background-repeat: no-repeat; → 반복하지 않기
background-position: center; → 가운데 배치
background-size: cover; → 영역을 꽉 채우기

cover는 화면을 예쁘게 채우는 대신 이미지 일부가 잘릴 수 있습니다. 반대로 contain은 이미지를 온전히 보여 주지만 빈 공간이 생길 수 있습니다.⁹

한 줄로 쓰기: `background` 축약 속성

배경 관련 속성은 여러 개가 함께 다니기 때문에 background 축약 속성으로 묶어 쓰기도 합니다.⁸

.hero {
  background: #222 url("banner.jpg") no-repeat center / cover;
}

처음엔 조금 복잡해 보여도 뜻은 같습니다. 다만 초보자라면 처음부터 축약형만 쓰기보다, 속성을 하나씩 나눠 쓰며 익히는 것이 이해에 더 좋습니다.

투명하게 만들기: `opacity`와 `rgba()`의 차이

초보자가 자주 헷갈리는 부분입니다.

.card {
  opacity: 0.5;
}

이렇게 하면 카드 배경만 투명해지는 것이 아니라, 카드 안의 글자까지 함께 흐려집니다. opacity는 요소 전체에 적용되기 때문입니다.¹⁰

배경만 투명하게 하고 싶다면 색상에 알파값을 넣는 방법이 더 낫습니다.

.card {
  background-color: rgba(255, 255, 255, 0.7);
}

이 방식은 배경만 반투명하게 만들고 텍스트는 또렷하게 유지할 수 있어 실무에서 자주 씁니다.¹⁰

실전 예제: 읽기 쉬운 소개 카드 만들기

이제 지금까지 배운 내용을 합쳐 보겠습니다.

HTML

<div class="card">
  <h1>CSS 기초 스터디</h1>
  <p class="subtitle">글자와 색을 다루는 첫걸음</p>
  <p>
    좋은 디자인은 거창한 효과보다 읽기 쉬운 글자에서 시작합니다.
    오늘은 색, 폰트, 줄 간격, 배경을 이용해 편안한 화면을 만들어 봅니다.
  </p>
  <a href="#">자세히 보기</a>
</div>

CSS

body {
  background-color: #f4f7fb;
  color: #222;
  font-family: "Pretendard", Arial, sans-serif;
}

.card {
  width: 420px;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 16px;
}

.card h1 {
  color: #173b6b;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

.card .subtitle {
  color: #4f6b8a;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.card p {
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
}

.card a {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}

.card a:hover {
  text-decoration: underline;
}

이 예제에서 눈여겨볼 부분은 다음과 같습니다.

본문은 16px와 line-height: 1.7로 읽기 편하게 만들었습니다.
제목은 더 크고 진한 색으로 눈에 띄게 했습니다.
배경은 흰색, 페이지는 연한 회색으로 두어 카드가 자연스럽게 떠 보이게 했습니다.
링크는 밑줄을 기본으로 제거했지만, 호버 때 다시 보여 주어 클릭 가능성을 알렸습니다.

즉, "예쁘게" 만들기 전에 "잘 읽히게" 만든 것입니다. 이 순서가 정말 중요합니다.

배경에 분위기 더하기: 그라데이션

단색 배경이 심심하다면 그라데이션도 좋은 선택입니다.

.banner {
  background: linear-gradient(to right, #2563eb, #7c3aed);
  color: white;
}

그라데이션은 두 색 이상이 자연스럽게 이어지는 배경입니다. 이미지 없이도 배경에 깊이를 줄 수 있어 많이 사용됩니다.⁹

다만 역시 원칙은 같습니다. 배경이 화려해질수록 텍스트는 더 또렷해야 합니다.

초보자가 자주 하는 실수

글자를 너무 작게 만든다

예쁘게 보이려고 본문을 12px, 13px로 작게 만드는 경우가 많습니다. 하지만 실제로는 읽기 힘들어집니다. 초보자라면 본문은 우선 16px 전후에서 시작해 보세요.

줄 간격을 기본값에 맡긴다

기본 줄 간격은 대체로 빽빽하게 느껴집니다. 본문에는 1.5 이상을 먼저 시도해 보세요.

배경색과 글자색이 비슷하다

연회색 글자를 흰 배경에 올리면 순간적으로는 세련돼 보일 수 있지만, 오래 읽기 어렵습니다. 대비를 항상 확인하세요.³

링크 밑줄을 없애고 아무 표시도 안 한다

이러면 사용자는 어디가 클릭 가능한지 모를 수 있습니다. 색상, 굵기, 호버 효과 중 하나는 남겨 두는 편이 좋습니다.

`opacity`로 카드 전체를 흐리게 만든다

배경만 투명하게 만들고 싶을 때 opacity를 쓰면 텍스트까지 흐려집니다. 이때는 rgba() 또는 hsla()를 고려하세요.¹⁰

바로 써먹는 추천 조합

처음에는 직접 모든 값을 정하기 어렵습니다. 그럴 때는 아래처럼 무난한 조합을 시작점으로 쓰면 좋습니다.

조합 1: 블로그형 본문

body {
  background-color: #ffffff;
  color: #222222;
  font-family: Arial, sans-serif;
}

p {
  font-size: 16px;
  line-height: 1.7;
}

조합 2: 카드형 소개 박스

.card {
  background-color: #ffffff;
  color: #333333;
}

.card h2 {
  color: #0f172a;
  font-size: 24px;
}

조합 3: 강조 배너

.banner {
  background: linear-gradient(to right, #0ea5e9, #2563eb);
  color: #ffffff;
  text-align: center;
}

이런 조합을 여러 번 써 보면, 어느 순간 "아, 이건 너무 답답하네", "이건 너무 흐리네" 같은 감각이 생깁니다. CSS 실력은 문법만이 아니라 그런 눈도 함께 자라는 과정입니다.

핵심만 다시 정리

이번 챕터에서 꼭 기억할 것은 많아 보이지만, 사실 핵심은 몇 가지입니다.

color는 글자색을 바꾼다.
font-family, font-size, font-weight는 글자의 성격을 정한다.
line-height, text-align, letter-spacing는 읽는 흐름을 다듬는다.
background-color, background-image는 화면의 분위기를 만든다.
예쁜 것보다 먼저 중요한 것은 읽기 쉬움이다.

좋은 텍스트 스타일은 "와, 디자인 멋지다"보다 "읽기 편하다"는 느낌을 먼저 줍니다. 그리고 그 상태에서 색과 배경이 자연스럽게 분위기를 더하면, 비로소 화면이 살아납니다.

직접 해보기

아래 과제를 직접 해보면 훨씬 빠르게 익숙해집니다.

위의 소개 카드 예제에서 제목 색을 세 가지 방식으로 바꿔 보세요. navy, #173b6b, rgb(...)처럼요.
본문 line-height를 1.2, 1.5, 1.8로 바꿔 보고 어떤 값이 가장 읽기 편한지 비교해 보세요.
카드 배경을 단색, 이미지, 그라데이션으로 각각 바꿔 보고 텍스트 가독성이 어떻게 달라지는지 확인해 보세요.

다음 챕터에서는 이 글자와 배경이 실제로 차지하는 공간, 즉 CSS 박스 모델과 여백을 배웁니다. 이제 보기 좋게 꾸밀 줄 알게 되었으니, 다음에는 요소 사이 간격을 더 똑똑하게 다루게 될 것입니다.

참고

¹MDN Fundamental text and font styling

²Programiz CSS Text Color

³W3Schools CSS Text

⁴MDN 기본적인 텍스트 및 글꼴 스타일링

⁵Tutorial Republic CSS Text

⁶Tutorial Republic Formatting Text Using CSS

⁷W3Schools CSS background-color Property

⁸Tutorial Republic CSS Background

⁹Inventive Lake CSS Background: Complete Guide with Examples for Beginners

¹⁰W3Schools CSS Backgrounds

책 목록

처음부터 끝까지 배우는 CSS 기초

전체 목차 보기