CSS 색상과 글꼴 꾸미기 – 구글 폰트 적용 방법까지

CSS 색상과 글꼴 꾸미기 – 구글 폰트 적용 방법까지

지난 글에서는 margin, padding, border로 이루어진 박스 모델을 배우며 요소 사이의 여백과 크기를 다루는 방법을 알아보았습니다. 이제 상자의 배치는 어느 정도 다룰 수 있게 되었으니, 페이지의 분위기를 결정하는 두 가지 요소인 색상과 글꼴을 배워볼 차례입니다. 같은 내용이라도 어떤 색과 글꼴을 쓰느냐에 따라 귀엽게도, 전문적으로도, 따뜻하게도 보일 수 있습니다. 오늘은 CSS에서 색상을 표현하는 네 가지 방법과 글꼴 관련 속성을 정리하고, 무료로 예쁜 웹 폰트를 사용할 수 있는 구글 폰트 적용 방법까지 단계별로 알아보겠습니다.

1. CSS에서 색상을 지정하는 속성

CSS에서 색상과 관련된 대표적인 속성은 세 가지입니다.

• color : 글자 색을 지정합니다.
• background-color : 요소의 배경 색을 지정합니다. 지난 글에서 배운 것처럼 padding 영역까지 칠해집니다.
• border-color : 테두리 색을 지정합니다. 보통은 border: 1px solid 색상;처럼 한 줄로 함께 적습니다.

이제 이 속성들에 넣을 색상 값을 표현하는 방법을 하나씩 살펴보겠습니다.

2. 색상 표현법 ① 색상 이름

가장 쉬운 방법은 영어 색상 이름을 그대로 쓰는 것입니다. CSS는 약 140개의 색상 이름을 지원합니다.

h1 { color: tomato; }
p  { color: dimgray; }
.box { background-color: lightyellow; }

외우기 쉽고 직관적이라 연습할 때 편리하지만, 원하는 미묘한 색을 정확히 표현하기 어렵다는 단점이 있습니다. 그래서 실제 디자인에서는 아래의 숫자 기반 방식을 주로 사용합니다.

3. 색상 표현법 ② HEX 코드 (16진수)

실무에서 가장 많이 쓰는 방식입니다. # 뒤에 여섯 자리의 문자를 적는데, 앞에서부터 두 자리씩 빨강(R)·초록(G)·파랑(B)의 양을 나타냅니다.

#FF0000   /* 빨강 최대, 나머지 0 → 빨간색 */
#264DE4   /* 이 글의 제목 파란색 */
#000000   /* 검정 */
#FFFFFF   /* 흰색 */

각 자리에는 0~9와 A~F가 들어가며, 00이 가장 적고 FF가 가장 많은 양입니다. 세 색의 빛을 모두 최대로 섞으면(#FFFFFF) 흰색, 모두 빼면(#000000) 검정이 됩니다. 물감과 달리 빛은 섞을수록 밝아진다고 기억하면 이해가 쉽습니다.

두 자리씩 같은 문자가 반복될 때는 세 자리로 줄여 쓸 수 있습니다. 예를 들어 #FFFFFF는 #FFF, #333333은 #333으로 적어도 같은 색입니다. 본문 글자색으로 순수한 검정(#000) 대신 #222나 #333 같은 진한 회색을 쓰면 눈의 피로가 덜해 많은 웹사이트에서 선호합니다.

4. 색상 표현법 ③ RGB와 RGBA

RGB는 HEX와 같은 원리를 0~255 사이의 숫자로 표현하는 방식입니다. 숫자라서 HEX보다 직관적으로 느끼는 분도 많습니다.

color: rgb(38, 77, 228);          /* #264DE4와 같은 색 */
background: rgba(38, 77, 228, 0.3); /* 30%만 불투명한 파란색 */

RGB의 진짜 강점은 네 번째 값을 추가한 RGBA에 있습니다. A는 Alpha(투명도)의 약자로, 0이면 완전히 투명하고 1이면 완전히 불투명합니다. 아래는 같은 파란색을 투명도만 다르게 한 모습입니다.

투명도를 조절하는 속성으로 opacity도 있지만 차이가 있습니다. opacity: 0.5는 요소의 배경뿐 아니라 안의 글자까지 모두 반투명하게 만듭니다. 반면 rgba로 배경색만 지정하면 배경만 투명해지고 글자는 선명하게 유지됩니다. 사진 위에 반투명한 검은 막을 깔고 흰 글자를 올리는 디자인을 만들 때 rgba가 특히 유용합니다.

5. 색상 표현법 ④ HSL

HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)로 색을 표현합니다. 사람이 색을 인식하는 방식과 비슷해서, 같은 계열의 색을 밝게 또는 어둡게 바꿀 때 매우 편리합니다.

hsl(225, 77%, 30%)   /* 진한 파랑 */
hsl(225, 77%, 52%)   /* 기본 파랑 */
hsl(225, 77%, 85%)   /* 연한 파랑 */

첫 번째 숫자는 색상환의 각도(0은 빨강, 120은 초록, 240은 파랑)이고, 두 번째는 색의 선명함, 세 번째는 밝기입니다. 위처럼 첫 번째 숫자는 그대로 두고 마지막 숫자만 바꾸면 버튼의 기본 색과 마우스를 올렸을 때의 진한 색처럼 조화로운 색 조합을 쉽게 만들 수 있습니다.

6. 네 가지 색상 표현법 비교

7. 색을 잘 고르는 실전 팁

색을 표현하는 방법을 알았다면, 이제 어떤 색을 고를지가 문제입니다. 디자인 전문가가 아니어도 다음 원칙만 지키면 훨씬 깔끔한 페이지를 만들 수 있습니다.

• 색은 3가지 이내로 : 기본 배경색, 주요 포인트 색, 강조 색 정도로 제한하세요. 흔히 배경 60%, 보조 색 30%, 강조 색 10% 비율을 추천합니다.
• 글자와 배경의 대비를 충분히 : 연한 회색 배경에 연한 회색 글자는 읽기 어렵습니다. 특히 시력이 약한 사용자를 위해 글자와 배경은 명도 차이를 크게 두는 것이 웹 접근성의 기본입니다.
• 색으로만 정보를 전달하지 않기 : “빨간 항목은 필수입니다”처럼 색에만 의존하면 색을 구분하기 어려운 사용자는 알 수 없습니다. 별표(*)나 글자를 함께 표시하세요.
• 색 고르기 도구 활용 : 구글에서 “color picker”를 검색하면 바로 색을 고르고 HEX·RGB 값을 확인할 수 있습니다. 브라우저 개발자 도구에서 색상 값 옆의 작은 네모를 클릭해도 색상 선택기가 나타납니다.

8. 글꼴 지정하기 – font-family

이제 글꼴로 넘어가 보겠습니다. 글꼴은 font-family 속성으로 지정하며, 쉼표로 구분해 여러 개를 순서대로 적는 것이 기본입니다.

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

여러 개를 적는 이유는 사용자의 컴퓨터에 해당 글꼴이 없을 수도 있기 때문입니다. 브라우저는 첫 번째 글꼴부터 확인해 사용할 수 있는 것을 고릅니다. 위 코드는 “Noto Sans KR을 쓰고, 없으면 맑은 고딕을, 그것도 없으면 아무 고딕 계열 글꼴을 써라”라는 뜻입니다. 이렇게 대비책으로 적어 두는 글꼴을 폴백(fallback) 글꼴이라고 합니다. 글꼴 이름에 띄어쓰기가 있으면 작은따옴표로 감싸야 한다는 점도 기억해 두세요.

맨 마지막에는 항상 글꼴의 큰 분류를 적어 주는 것이 좋습니다.

sans-serif는 획 끝에 장식이 없는 깔끔한 글꼴로 화면에서 읽기 편해 웹 본문에 가장 많이 쓰입니다. serif는 획 끝에 돌기가 있는 글꼴로 신문이나 책 같은 고전적인 느낌을 줍니다. monospace는 모든 글자의 폭이 같아 코드를 보여줄 때 사용합니다.

9. 글자 모양을 다듬는 속성들

① font-size – 글자 크기
가장 기본적인 단위는 px이지만, 실무에서는 rem도 많이 사용합니다. 1rem은 브라우저 기본 글자 크기(보통 16px)를 뜻하므로 1.5rem은 24px이 됩니다. rem을 쓰면 사용자가 브라우저 설정에서 글자 크기를 키웠을 때 페이지 전체가 함께 커져 접근성에 유리합니다. 본문 글자는 16px 이상으로 설정하는 것이 읽기 편합니다.

② font-weight – 글자 굵기
normal과 bold로 지정하거나, 100(가장 얇음)부터 900(가장 굵음)까지 숫자로 지정합니다. 400이 보통, 700이 굵게에 해당합니다. 단, 숫자 굵기는 글꼴이 해당 굵기를 지원해야만 제대로 표현됩니다.

③ line-height – 줄 간격
한글은 영어보다 글자가 빽빽해 보이기 때문에 줄 간격이 특히 중요합니다. 본문은 단위 없이 1.6~1.8 정도를 추천합니다. 단위 없이 쓰면 글자 크기의 몇 배인지를 뜻해, 글자 크기가 바뀌어도 비율이 유지됩니다.

④ letter-spacing – 글자 간격
글자 사이 간격을 조절합니다. 큰 제목은 -0.5px처럼 살짝 좁히면 단단하고 세련된 느낌이 납니다.

⑤ text-align, text-decoration
text-align은 글자의 가로 정렬(left, center, right)을, text-decoration은 밑줄이나 취소선을 지정합니다. 링크의 기본 밑줄을 없앨 때 text-decoration: none;을 자주 사용합니다.

10. 구글 폰트란?

font-family에 적은 글꼴은 사용자 컴퓨터에 설치되어 있어야 보입니다. 내 컴퓨터에 예쁜 글꼴이 있어서 지정했더라도, 방문자의 컴퓨터에 없다면 기본 글꼴로 바뀌어 버립니다. 이 문제를 해결하는 것이 웹 폰트입니다. 웹 폰트는 글꼴 파일을 인터넷에서 내려받아 보여주기 때문에, 누가 어떤 기기로 접속하든 똑같은 글꼴로 표시됩니다.

구글 폰트(Google Fonts)는 구글이 운영하는 무료 웹 폰트 서비스로, 상업적 용도로도 자유롭게 쓸 수 있는 글꼴을 제공합니다. 한글 글꼴로는 Noto Sans KR, Nanum Gothic(나눔고딕), Nanum Myeongjo(나눔명조), Gowun Dodum(고운돋움), Black Han Sans 등이 인기가 많습니다.

11. 구글 폰트 적용 방법 (단계별)

1단계 : 글꼴 고르기
구글 폰트 사이트(fonts.google.com)에 접속해 검색창에 원하는 글꼴 이름을 입력합니다. 한글 글꼴만 보고 싶다면 언어 필터에서 Korean을 선택하면 됩니다. 미리보기 입력란에 한글 문장을 적으면 실제로 어떻게 보이는지 확인할 수 있습니다.

2단계 : 굵기 선택 후 코드 받기
글꼴을 선택해 사용할 굵기를 고른 뒤 코드 받기 메뉴로 들어가면, HTML에 넣을 link 코드와 CSS에 넣을 font-family 코드가 나타납니다.

3단계 : HTML의 head에 link 코드 붙여넣기

<head>
  <meta charset="UTF-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

앞의 두 줄(preconnect)은 글꼴 서버에 미리 연결해 두어 글꼴을 더 빨리 불러오게 하는 코드입니다. 세 번째 줄의 주소에서 wght@400;700은 보통 굵기와 굵은 굵기 두 가지를 불러온다는 뜻이고, display=swap은 글꼴을 불러오는 동안 기본 글꼴로 먼저 글자를 보여주어 화면이 비어 보이지 않게 합니다. 구글 폰트 link는 직접 만든 style.css보다 위에 두는 것이 좋습니다.

4단계 : CSS에서 font-family 지정하기

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

이제 저장하고 새로고침하면 페이지 전체에 Noto Sans KR 글꼴이 적용됩니다. HTML을 수정할 수 없는 상황이라면 CSS 파일 맨 위에 @import url('구글 폰트 주소'); 형식으로 불러오는 방법도 있지만, link 방식이 로딩 속도 면에서 더 유리합니다.

굵기를 너무 많이 불러오지 마세요. 한글 글꼴은 글자 수가 많아 파일 용량이 영어 글꼴보다 훨씬 큽니다. 굵기를 하나 추가할 때마다 내려받을 파일이 늘어나 페이지가 느려지므로, 실제로 쓰는 굵기(보통 400과 700)만 선택하는 것이 좋습니다.

12. 실습: 색상과 글꼴로 블로그 글 페이지 꾸미기

오늘 배운 내용을 모두 적용해 읽기 편한 블로그 글 페이지를 만들어 보겠습니다. 아래 코드를 post.html로 저장해 브라우저에서 열어보세요. 인터넷에 연결되어 있어야 구글 폰트가 적용됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>색상과 글꼴 실습</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: #f5f7fb;
      font-family: 'Noto Sans KR', sans-serif;
      color: #333;
      line-height: 1.8;
    }

    .post {
      max-width: 680px;
      margin: 40px auto;
      padding: 40px;
      background: #fff;
      border-radius: 12px;
    }

    .post h1 {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -0.5px;
      color: #1a1a2e;
      margin: 0 0 8px;
    }

    .date {
      font-size: 0.9rem;
      color: #888;
      margin: 0 0 24px;
    }

    .highlight {
      background: rgba(38, 77, 228, 0.08);
      border-left: 4px solid #264de4;
      padding: 14px 18px;
      border-radius: 4px;
    }

    a {
      color: #264de4;
      text-decoration: none;
      font-weight: 700;
    }

    a:hover {
      color: hsl(225, 77%, 35%);
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <article class="post">
    <h1>오늘의 코딩 공부 기록</h1>
    <p class="date">2026년 10월 18일</p>
    <p>오늘은 CSS로 색상과 글꼴을 바꾸는 방법을 배웠다.
       구글 폰트를 적용하니 페이지 분위기가 확 달라졌다.</p>
    <p class="highlight">배운 점: 본문 글자는 순수한 검정보다
       진한 회색이 눈이 편하다.</p>
    <p>자세한 내용은 <a href="#">지난 글</a>에서 확인할 수 있다.</p>
  </article>
</body>
</html>

완성된 화면은 대략 다음과 같습니다.

코드를 살펴보면 오늘 배운 네 가지 색상 표현법이 모두 쓰였습니다. 대부분의 색은 HEX로, 강조 상자의 연한 배경은 rgba로, 링크에 마우스를 올렸을 때의 진한 파랑은 hsl로 지정했습니다. 제목은 rem 단위와 letter-spacing으로 다듬었고, 본문은 진한 회색과 넉넉한 줄 간격으로 읽기 편하게 만들었습니다.

13. 자주 하는 실수와 해결 방법

• 구글 폰트가 적용되지 않아요 : link 코드를 빠뜨렸거나, CSS의 글꼴 이름 철자가 틀린 경우입니다. ‘Noto Sans KR’처럼 띄어쓰기와 대소문자까지 정확히 적고 작은따옴표로 감싸세요.
• HEX 코드에 # 누락 : color: 264DE4;처럼 #을 빼면 색이 적용되지 않습니다.
• 굵게 했는데 변화가 없어요 : 구글 폰트에서 해당 굵기를 불러오지 않은 경우입니다. 700을 쓰려면 주소에 wght@700이 포함되어야 합니다.
• opacity를 줬더니 글자까지 흐려져요 : 배경만 투명하게 하려면 opacity 대신 rgba 배경색을 사용하세요.
• 페이지가 느려졌어요 : 한글 웹 폰트를 여러 종류, 여러 굵기로 불러오면 용량이 커집니다. 글꼴은 1~2종류, 굵기는 꼭 필요한 것만 사용하세요.

마무리하며

오늘은 CSS로 페이지의 분위기를 만드는 색상과 글꼴에 대해 알아보았습니다. 색상은 색상 이름, HEX, RGBA, HSL 네 가지로 표현할 수 있으며 일반적인 색은 HEX, 투명도가 필요하면 RGBA, 같은 계열의 밝기 조절은 HSL이 편리합니다. 글꼴은 font-family에 폴백 글꼴까지 함께 적고, 본문은 16px 이상의 크기와 1.6~1.8 정도의 줄 간격을 주면 읽기 편한 페이지가 됩니다. 마지막으로 구글 폰트를 활용하면 어떤 기기에서든 같은 글꼴을 무료로 보여줄 수 있으니, 마음에 드는 한글 글꼴을 골라 지금까지 만든 실습 페이지에 직접 적용해 보세요.

다음 글에서는 요소를 가로·세로로 자유롭게 정렬할 수 있는 CSS Flexbox를 다루겠습니다. 지금까지 가장 까다로웠던 “가운데 정렬”과 “나란히 배치”가 몇 줄의 코드로 해결되는 경험을 하실 수 있을 겁니다. 궁금한 점은 댓글로 남겨 주세요!