icon
3장 : CSS 기초와 레이아웃

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

지난 장에서 우리는 CSS의 기본 문법과 원하는 HTML 요소를 정확히 선택하는 다양한 선택자들에 대해 학습했습니다. 이제 CSS의 강력한 힘을 발휘하여 웹 페이지를 시각적으로 매력적이고, 사용자 친화적으로 꾸미는 구체적인 방법들을 알아볼 차례입니다.

이 장에서는 웹 페이지의 첫인상을 결정짓는 중요한 요소들인 색상(Color), 글꼴(Font), 그리고 텍스트(Text)의 다양한 스타일링 기법에 대해 깊이 있게 다룰 것입니다. 배경색, 글자색을 지정하는 방법부터 폰트의 종류, 크기, 굵기, 줄 간격, 텍스트 정렬, 그림자 효과 등 웹 콘텐츠의 가독성과 미적 요소를 한층 높이는 데 필요한 CSS 속성들을 상세히 살펴보겠습니다.

색상 스타일링: 웹 페이지에 생동감 불어넣기

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

주요 색상 관련 속성

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

색상 값 표기법

  1. 색상 이름 (Keyword Names)

    • 미리 정의된 색상 이름 (약 140여 개)을 사용합니다. 직관적이지만 색상의 선택이 제한적입니다.
    • 예: red, blue, green, white, black, transparent (투명)
    h1 { color: tomato; }
body { background-color: lightgray; }

  2. 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; } /* 아주 연한 회색 */

  3. 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% 불투명 검정 */

  4. 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 속성들을 활용하여 간단한 블로그 게시물 페이지를 꾸며봅시다.

  1. 프로젝트 폴더 구조

    web-dev-practice/
├── blog-post.html
└── css/
    └── blog.css

  2. 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>

  3. 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;
}

  4. 결과 확인

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

이번 장에서는 웹 페이지의 시각적인 인상과 가독성을 결정하는 중요한 요소들인 색상, 폰트, 그리고 텍스트 스타일링에 대해 깊이 있게 다루었습니다. 다양한 색상 표기법, 폰트 관련 속성(font-family, font-size, line-height 등), 그리고 텍스트 효과(text-align, text-decoration, text-shadow 등)를 통해 여러분의 웹 페이지를 더욱 풍부하고 매력적으로 만들 수 있는 기반을 다졌습니다.

CSS 기본 문법과 선택자

Previous Page

박스 모델과 요소 배치

Next Page