색상, 폰트, 텍스트 스타일링

지난 장에서 우리는 CSS의 기본 문법과 원하는 HTML 요소를 정확히 선택하는 다양한 선택자들에 대해 학습했습니다. CSS로 웹 페이지의 색상, 타이포그래피, 배경을 구성하는 방법을 다룹니다.

이 장에서는 웹 페이지 첫인상을 좌우하는 색상(Color), 글꼴(Font), 텍스트(Text) 스타일링 기법을 정리합니다. 배경색, 글자색을 지정하는 방법부터 폰트의 종류, 크기, 굵기, 줄 간격, 텍스트 정렬, 그림자 효과 등 웹 콘텐츠의 가독성과 미적 요소를 높이는 CSS 속성들을 상세히 살펴보겠습니다.

색상 스타일링: 색상 표기법과 대비 기준

색상, 폰트, 텍스트 스타일링에서는 스타일 규칙, 레이아웃 계산, 화면 반영 결과를 정리합니다.

색상은 웹 페이지의 분위기를 결정하고, 사용자의 시선을 유도하며, 정보를 분류하는 데 중요한 역할을 합니다. CSS에서는 다양한 방법으로 색상을 지정할 수 있습니다.

주요 색상 관련 속성

color: 텍스트의 색상을 지정합니다.
background-color: 요소의 배경 색상을 지정합니다.
border-color: 테두리의 색상을 지정합니다.

색상 값 표기법

색상 이름 (Keyword Names)

미리 정의된 색상 이름 (약 140여 개)을 사용합니다. 직관적이지만 색상의 선택이 제한적입니다.
예: red, blue, green, white, black, transparent (투명)

h1 { color: tomato; }
body { background-color: lightgray; }

HEX 값 (Hexadecimal)

#RRGGBB 또는 #RGB 형식의 16진수 코드를 사용하여 색상을 표현합니다.
RR, GG, BB는 각각 빨강(Red), 초록(Green), 파랑(Blue)의 강도를 00(최소)부터 FF(최대)까지 나타냅니다. 0부터 255까지의 십진수에 해당합니다.
가장 널리 사용되는 방법으로, 세밀한 색상 표현이 가능합니다.
예: #FF0000 (빨강), #0000FF (파랑), #336699, #FFF (흰색, #FFFFFF의 축약형)

p { color: #333333; } /* 진한 회색 */
.hero { background-color: #F8F8F8; } /* 아주 연한 회색 */

RGB 값 (Red, Green, Blue)

rgb(빨강, 초록, 파랑) 형식으로 색상을 표현합니다. 각 값은 0에서 255까지의 정수입니다.
rgba(빨강, 초록, 파랑, 알파) 형식으로 불투명도(알파)를 추가할 수 있습니다. 알파 값은 0(완전 투명)에서 1(완전 불투명) 사이의 소수점 값입니다.
예: rgb(255, 0, 0) (빨강), rgb(0, 128, 0) (녹색), rgba(0, 0, 0, 0.5) (50% 투명한 검정)

button { background-color: rgb(76, 175, 80); } /* 진한 초록색 */
.overlay { background-color: rgba(0, 0, 0, 0.7); } /* 70% 불투명 검정 */

HSL 값 (Hue, Saturation, Lightness)

hsl(색상, 채도, 밝기) 형식으로 색상을 표현합니다.
Hue (색상): 색상환의 각도 (0-360도, 0 또는 360은 빨강, 120은 녹색, 240은 파랑)
Saturation (채도): 색상의 선명도 (0%는 회색 음영, 100%는 완전한 색상)
Lightness (밝기): 색상의 밝기 (0%는 검정, 50%는 원본 색상, 100%는 흰색)
hsla(색상, 채도, 밝기, 알파) 형식으로 불투명도를 추가할 수 있습니다.
예: hsl(0, 100%, 50%) (빨강), hsl(200, 80%, 60%) (밝은 파랑)

.accent-color { color: hsl(210, 90%, 40%); } /* 다크 블루 */

💡 Tip: 색상 표기법은 취향과 상황에 따라 선택할 수 있습니다. HEX는 가장 일반적이고 간결하며, RGB/RGBA는 투명도 조절에 용이하고, HSL/HSLA는 색상 자체를 직관적으로 조절하는 데 유리합니다.

폰트 스타일링: 텍스트의 분위기 조절

글꼴(Font)은 텍스트의 가독성과 웹 페이지의 전반적인 미학에 결정적인 영향을 미칩니다.

주요 폰트 관련 속성

font-family: 텍스트에 적용할 글꼴을 지정합니다. 여러 글꼴을 쉼표로 구분하여 나열할 수 있으며, 앞의 글꼴이 없으면 다음 글꼴을 사용합니다. 마지막에는 항상 일반적인 글꼴 계열(generic family)을 지정하는 것이 좋습니다.
- 일반 글꼴 계열: serif (명조체 계열, 획 끝에 작은 장식), sans-serif (고딕체 계열, 장식 없음), monospace (고정 너비 글꼴), cursive (필기체), fantasy (장식적인 글꼴)
```
body {
    font-family: 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;
}
h1 {
    font-family: Georgia, serif;
}
```
💡 Tip: 웹 폰트(@font-face)를 사용하여 사용자 시스템에 없는 다양한 폰트를 적용할 수 있습니다. (나중에 심화 과정에서 다룸)
font-size: 텍스트의 크기를 지정합니다.
- 픽셀 (px): 고정된 절대 크기. 화면 해상도에 따라 다르게 보일 수 있음.
- em: 부모 요소의 font-size를 기준으로 상대적인 크기. (1em = 부모 폰트 사이즈)
- rem: 루트(<html>) 요소의 font-size를 기준으로 상대적인 크기. (1rem = <html> 폰트 사이즈)
- 퍼센트 (%): 부모 요소의 font-size를 기준으로 백분율.
- 뷰포트 단위 (vw, vh, vmin, vmax): 뷰포트(브라우저 창) 크기를 기준으로 상대적인 크기. 반응형 웹에 유용.
- 키워드: xx-small, x-small, small, medium, large, x-large, xx-large
```
p { font-size: 16px; }
h2 { font-size: 2em; } /* 부모 폰트의 2배 */
.article-title { font-size: 3rem; } /* html 폰트의 3배 */
.responsive-text { font-size: 3vw; } /* 뷰포트 너비의 3% */
```
💡 Tip: 웹 접근성을 위해 px보다는 em이나 rem을 사용하는 것이 좋습니다. 사용자가 브라우저의 기본 폰트 크기를 조절했을 때 웹 페이지의 텍스트 크기도 함께 조절되기 때문입니다.
font-weight: 텍스트의 굵기를 지정합니다.
- 키워드: normal (400), bold (700), bolder, lighter
- 숫자: 100부터 900까지 (대부분의 폰트는 400(normal), 700(bold)만 지원)
```
strong { font-weight: bold; }
.thin-text { font-weight: 300; }
```
font-style: 텍스트의 기울임 여부를 지정합니다.
- normal, italic (기울임), oblique (강제 기울임)
```
em { font-style: italic; }
```
line-height: 줄 간격을 지정합니다.
- 숫자 (1.5): font-size의 배수. 가장 권장되는 방법. (예: 16px 폰트의 1.5배 줄 간격 = 24px)
- 단위 포함 (24px, 150%): 고정된 값.
```
p { line-height: 1.8; } /* 텍스트 가독성 향상을 위해 1.5 이상 권장 */
```
font 단축 속성:
- 위의 여러 폰트 관련 속성들을 한 줄에 요약하여 작성할 수 있습니다.
- 순서: font-style font-variant font-weight font-size/line-height font-family
- 필수: font-size와 font-family
```
p {
    font: italic bold 16px/1.5 'Malgun Gothic', sans-serif;
    /* font-style: italic; font-weight: bold; font-size: 16px; line-height: 1.5; font-family: 'Malgun Gothic', sans-serif; */
}
```

텍스트 스타일링: 섬세한 표현과 효과 추가

폰트 자체 외에도 텍스트의 정렬, 간격, 장식, 그림자 등을 제어하여 가독성과 디자인을 향상시킬 수 있습니다.

주요 텍스트 관련 속성

text-align: 텍스트의 가로 정렬 방식을 지정합니다.
- left, right, center, justify (양쪽 정렬)
```
h1 { text-align: center; }
.article-body { text-align: justify; }
```
text-decoration: 텍스트에 줄을 추가하거나 제거합니다.
- none (줄 없음), underline (밑줄), overline (윗줄), line-through (취소선)
- 링크(<a> 태그)의 기본 밑줄을 제거할 때 text-decoration: none;을 많이 사용합니다.
```
a { text-decoration: none; }
.strike { text-decoration: line-through; }
```
text-transform: 텍스트의 대소문자를 변환합니다.
- none, uppercase (모두 대문자), lowercase (모두 소문자), capitalize (각 단어의 첫 글자만 대문자)
```
h2 { text-transform: uppercase; }
```
letter-spacing: 글자(자간) 사이의 간격을 지정합니다.
- px, em 등의 단위 사용.
```
h1 { letter-spacing: 2px; } /* 글자 간격 넓힘 */
```
word-spacing: 단어 사이의 간격을 지정합니다.
```
p { word-spacing: 5px; } /* 단어 간격 넓힘 */
```
text-indent: 텍스트의 첫 줄을 들여쓰기 합니다.
```
.indent-para { text-indent: 30px; }
```
white-space: 텍스트 내의 공백(줄바꿈, 띄어쓰기)을 처리하는 방식을 지정합니다.
- normal (기본), nowrap (강제로 줄바꿈하지 않음), pre (HTML <pre> 태그처럼 공백과 줄바꿈 유지), pre-wrap (공백 유지, 필요시 줄바꿈), pre-line (공백 축소, 줄바꿈 유지)
```
.no-wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 한 줄로 표시하고 넘치면 ... */
```

text-shadow: 텍스트에 그림자 효과를 추가합니다.

text-shadow: [가로 오프셋] [세로 오프셋] [흐림 정도] [색상];
쉼표로 구분하여 여러 그림자를 추가할 수 있습니다.

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000; /* 검정색 그림자 */
}
.neon-text {
    color: #fff;
    text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #00f; /* 네온 효과 */
}

아래 다이어그램은 색상, 폰트, 텍스트 속성을 가독성 중심으로 조합하는 순서를 보여줍니다.

실습: 웹 페이지 색상, 폰트, 텍스트 스타일링

지금까지 배운 색상, 폰트, 텍스트 관련 CSS 속성들을 활용하여 간단한 블로그 게시물 페이지를 꾸며봅시다.

프로젝트 폴더 구조

blog-post.html

blog.css

blog-post.html 파일 작성

blog-post.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 텍스트 스타일링 예제 - 나의 블로그</title>
    <link rel="stylesheet" href="css/blog.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1 class="main-title">나의 웹 개발 이야기</h1>
        <p class="subtitle">CSS 색상, 폰트, 텍스트 스타일링 연습</p>
    </header>

    <main>
        <article class="blog-post">
            <h2 class="post-title">CSS로 웹 페이지에 생명 불어넣기</h2>
            <div class="post-meta">
                <p>작성자: 김코딩 | <time datetime="2025-06-15">2025년 6월 15일</time></p>
            </div>

            <p>CSS로 웹 페이지의 시각 표현을 구성하는 방법을 다룹니다.
                HTML이 웹의 구조를 담당한다면, CSS는 그 구조에 <b>색상, 간격, 질감, 강조</b>를 적용합니다.</p>

            <p class="important-text">이 단락은 특히 중요한 내용이므로, 다른 스타일이 적용되었습니다.
                CSS는 웹 디자인의 핵심 요소이며, 사용자 경험(UX)에 지대한 영향을 미칩니다.</p>

            <h3>색상 선택의 중요성</h3>
            <p>웹 디자인에서 색상 팔레트를 잘 선택하는 것은 매우 중요합니다.
                <span class="color-example red">빨간색</span>은 열정적이고 경고의 의미를,
                <span class="color-example blue">파란색</span>은 신뢰와 안정감을,
                <span class="color-example green">초록색</span>은 자연과 성장을 나타낼 수 있습니다.</p>
            <p>HEX, RGB, HSL 등 다양한 색상 표기법을 사용하여 원하는 색상을 정확하게 표현할 수 있습니다.</p>

            <h3>가독성을 높이는 폰트 설정</h3>
            <p>사용자가 정보를 쉽게 읽을 수 있도록 <mark>폰트의 종류와 크기, 줄 간격</mark>을 신중하게 선택해야 합니다.
                너무 작거나 너무 큰 폰트, 혹은 가독성이 떨어지는 폰트는 사용자에게 피로감을 줄 수 있습니다.</p>
            <p class="quote-text">"좋은 디자인은 사용자가 내용을 쉽게 이해하도록 돕는 것이다."</p>

            <h3>텍스트 정렬과 효과</h3>
            <p>텍스트의 정렬 방식(`text-align`)이나 자간(`letter-spacing`), 단어 간격(`word-spacing`) 조절은
                페이지의 미적 완성도를 높이는 데 기여합니다. 또한, <span class="shadow-text">텍스트 그림자 효과</span>(`text-shadow`)를 통해
                입체감을 주거나 독특한 시각적 효과를 만들 수 있습니다.</p>

            <p>CSS를 통해 이 모든 것을 제어할 수 있으며, 이는 여러분의 웹 페이지를 더욱 특별하게 만들 것입니다.</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2025 나의 웹 개발 블로그. 모든 권리 보유.</p>
        <p class="small-info">학습 목적으로 제작되었습니다.</p>
    </footer>
</body>
</html>

css/blog.css 파일 작성

css/blog.css

/* Google Fonts Noto Sans KR 적용 (웹 폰트) */
body {
    font-family: 'Noto Sans KR', sans-serif; /* Noto Sans KR을 1순위로, 없으면 sans-serif 사용 */
    background-color: #eef1f5; /* 아주 연한 파란색 배경 */
    color: #34495e; /* 진한 회색 텍스트 */
    line-height: 1.7; /* 기본 줄 간격 설정으로 가독성 향상 */
    margin: 0;
    padding: 0;
}

/* 헤더 스타일링 */
header {
    background-color: #2c3e50; /* 어두운 남색 배경 */
    color: white;
    padding: 30px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.main-title {
    font-size: 2.8em; /* 큰 제목 */
    font-weight: 700; /* 굵게 */
    letter-spacing: 1px; /* 자간 조절 */
    margin-bottom: 5px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.3); /* 제목에 그림자 */
}

.subtitle {
    font-size: 1.2em;
    font-style: italic; /* 기울임 */
    color: #bdc3c7; /* 연한 회색 */
}

/* 메인 콘텐츠 영역 */
main {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 블로그 게시물 전체 스타일 */
.blog-post {
    padding: 20px;
}

.post-title {
    font-size: 2.2em;
    color: #2980b9; /* 파란색 제목 */
    text-align: left;
    margin-bottom: 15px;
    border-bottom: 2px solid #2980b9;
    padding-bottom: 10px;
}

.post-meta {
    font-size: 0.9em;
    color: #7f8c8d; /* 회색 메타 정보 */
    margin-bottom: 25px;
    text-align: right; /* 오른쪽 정렬 */
}

/* 일반 문단 스타일 */
.blog-post p {
    font-size: 1.1em;
    margin-bottom: 1.2em;
    word-spacing: 1px; /* 단어 간격 미세 조정 */
    text-indent: 20px; /* 첫 줄 들여쓰기 */
}

/* 중요 텍스트 스타일 */
.important-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #c0392b; /* 진한 빨간색 */
    background-color: #fcecec; /* 연한 빨간색 배경 */
    padding: 10px 15px;
    border-left: 5px solid #e74c3c; /* 왼쪽 테두리 */
    margin-bottom: 20px;
    border-radius: 5px;
}

/* 색상 예시 텍스트 */
.color-example {
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
}
.red { background-color: #ffe0e0; color: #cc0000; }
.blue { background-color: #e0f2f7; color: #0056b3; }
.green { background-color: #e6ffe6; color: #008000; }

/* mark 태그 스타일 오버라이드 */
mark {
    background-color: #ffff99; /* 기본 노란색 */
    padding: 0 3px;
}

/* 인용문 스타일 */
.quote-text {
    font-style: italic;
    color: #555;
    border-left: 4px solid #f39c12; /* 주황색 세로선 */
    padding-left: 15px;
    margin-left: 20px;
    font-size: 1.15em;
    line-height: 1.5;
    text-align: center; /* 가운데 정렬 */
    background-color: #fffaf0; /* 아주 연한 주황색 배경 */
    border-radius: 0 5px 5px 0;
}

/* 그림자 텍스트 */
.shadow-text {
    color: #555;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 그림자 효과 */
    font-weight: bold;
}

/* 푸터 스타일링 */
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
    font-size: 0.9em;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}
.small-info {
    color: #bdc3c7;
    font-size: 0.8em;
    margin-top: 5px;
}

결과 확인

Live Server를 통해 blog-post.html 파일을 열어보세요.
다양한 색상, 폰트 스타일, 텍스트 효과가 적용되어 HTML 파일만 있을 때와는 확연히 다른, 훨씬 전문적이고 읽기 쉬운 웹 페이지가 된 것을 확인할 수 있을 것입니다.
Google Fonts에서 가져온 Noto Sans KR 폰트가 잘 적용되었는지, text-shadow나 text-indent 같은 효과들이 어떻게 나타나는지 자세히 살펴보세요.

이번 장에서는 웹 페이지의 시각적인 인상과 가독성을 결정하는 중요한 요소들인 색상, 폰트, 그리고 텍스트 스타일링에 대해 깊이 있게 다루었습니다. 각 속성의 역할을 구분하면 화면의 시각 구조를 더 안정적으로 조정할 수 있습니다.

아래 다이어그램은 색상, 폰트, 텍스트 속성이 가독성을 만드는 과정을 요약한 것입니다.

아래 다이어그램은 색상 속성을 역할별로 고르고 흔한 실수를 피하는 기준을 정리한 것입니다.

아래 다이어그램은 색상 스타일링을 색상 역할, 대비, 상태 표현, 화면 확인 순서로 정리합니다.

색상, 폰트, 텍스트 스타일링에서 다시 볼 기준과 확인 순서를 정리했습니다.

다음 학습으로 넘어가기 전, 색상, 폰트, 텍스트 스타일링에서 남은 개념 경계와 실습 확인 포인트를 점검합니다.

색상, 폰트, 텍스트 스타일링

목차