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

앞 글에서는 CSS의 문법과 선택자를 익혔습니다. 이 글에서는 페이지의 첫인상과 읽기 편한 정도를 좌우하는 색상, 글꼴, 텍스트 스타일을 다룹니다. 글자색과 배경색을 지정하는 여러 방법, 글꼴의 종류와 크기, 굵기, 줄 간격, 정렬과 그림자 같은 속성을 살펴본 뒤, 이것들을 조합해 블로그 글 한 편을 꾸며 봅니다.

위 그림은 글을 읽기 쉽게 만드는 여섯 가지 조건이 같은 본문에 함께 기여한다는 것을 보여 줍니다. 크기는 제목과 본문을 구분하고, 굵기는 강조할 단서를 드러내며, 행간은 다음 줄을 쉽게 찾게 하고, 본문 폭은 한 줄의 길이를 정합니다. 색 대비는 글자를 배경과 비교해 읽을 수 있게 하고, 대체 글꼴은 웹 폰트를 불러오지 못해도 글을 읽을 수 있게 합니다.

화살표는 여섯 조건을 차례로 거치는 처리 순서가 아니라, 모두 같은 본문을 읽는 데 관여한다는 관계입니다. 그림 아래의 설명처럼 여섯 가지를 함께 조정하고, 밝은 화면과 어두운 화면, 인쇄, 확대한 화면에서 실제 내용으로 확인합니다. 모든 문장을 굵게 쓰면 오히려 무엇이 중요한지 구분되지 않는다는 점도 기억해 둡니다.

색상

색은 페이지의 분위기를 정하고, 시선을 이끌고, 정보를 분류하는 데 쓰입니다. 색을 지정하는 주요 속성은 글자색의 color, 배경색의 background-color, 테두리 색의 border-color입니다.

색을 적는 방법

가장 쉬운 방법은 미리 정해진 색 이름을 쓰는 것입니다. red, blue, tomato, lightgray처럼 140여 개의 이름이 있고, transparent는 투명을 뜻합니다. 직관적이지만 고를 수 있는 색이 한정됩니다.

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

HEX 값은 #RRGGBB 형식의 16진수로 빨강(red), 초록(green), 파랑(blue)의 세기를 적습니다. 각 두 자리는 00부터 FF까지, 십진수로 0부터 255까지의 세기입니다. #FF0000은 빨강, #0000FF는 파랑이고, #FFF처럼 세 자리로 줄여 쓰면 각 자리를 두 번 반복한 #FFFFFF(흰색)가 됩니다. 간결하고 색을 세밀하게 고를 수 있어 가장 널리 씁니다.

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

rgb()는 같은 세 채널을 0부터 255까지의 십진수로 적습니다. rgb(255, 0, 0)은 빨강, rgb(0, 128, 0)은 초록입니다. rgba()처럼 네 번째 값으로 불투명도(alpha)를 더하면 0은 완전히 투명하고 1은 완전히 불투명하며, rgba(0, 0, 0, 0.5)는 반투명한 검정입니다. 요즘의 CSS는 rgb(0 0 0 / 50%)처럼 쉼표 없이 쓰고 / 뒤에 불투명도를 적는 표기도 지원하며, 이 표기에서는 rgb()만으로 불투명도까지 적을 수 있습니다.

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

hsl()은 색상(hue), 채도(saturation), 밝기(lightness)로 색을 적습니다. 색상은 색상환의 각도로 0도와 360도가 빨강, 120도가 초록, 240도가 파랑이고, 채도는 0%가 회색, 100%가 가장 선명한 색이며, 밝기는 0%가 검정, 50%가 그 색 자체, 100%가 흰색입니다. hsl(0, 100%, 50%)는 빨강이고, hsla()나 / 표기로 불투명도를 더할 수 있습니다. 같은 색상에서 밝기만 조금씩 바꿔 버튼의 평소 색과 마우스를 올렸을 때의 색을 만들기 쉽습니다.

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

표기법은 상황에 맞게 고르면 됩니다. HEX는 짧고 널리 쓰이며, rgb()는 투명도를 함께 다루기 쉽고, hsl()은 색의 밝기와 선명도를 직관적으로 조절하기 좋습니다. 어떤 표기를 쓰든 같은 색이면 화면에 보이는 결과는 같습니다.

글꼴

글꼴(font)은 글을 읽기 쉬운 정도와 페이지의 전체 인상에 큰 영향을 줍니다. 이 절에서는 어떤 글꼴을 쓸지 정하는 font-family, 크기를 정하는 font-size, 굵기와 기울임을 정하는 font-weight와 font-style, 줄 간격을 정하는 line-height를 차례로 보고, 이들을 한 줄로 묶는 font 단축 속성으로 마무리합니다. 글꼴 속성은 부모에서 자식으로 상속되므로, 보통 body에 기본값을 한 번 정해 두고 제목이나 강조처럼 달라야 할 곳만 따로 바꿉니다.

글꼴 종류: font-family

font-family는 글자에 쓸 글꼴을 정합니다. 쉼표로 여러 글꼴을 나열하면, 브라우저는 앞에서부터 사용자의 기기에 있는 글꼴을 찾아 씁니다. 그래서 마지막에는 항상 일반 글꼴 계열(generic family)을 적어, 앞의 글꼴이 모두 없어도 비슷한 모양의 글꼴이 쓰이게 합니다. 일반 글꼴 계열에는 획 끝에 작은 장식이 있는 명조 계열의 serif, 장식이 없는 고딕 계열의 sans-serif, 모든 글자의 너비가 같은 monospace, 필기체의 cursive, 장식용의 fantasy가 있습니다. 이름에 공백이 있는 글꼴은 따옴표로 감쌉니다.

body {
    font-family: 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;
}
h1 {
    font-family: Georgia, serif;
}

사용자의 기기에 없는 글꼴은 @font-face로 웹 폰트를 불러와 쓸 수 있으며, 뒤의 실습에서 Google Fonts로 이 방법을 써 봅니다.

글자 크기: font-size

font-size는 글자의 크기를 정하며, 다음 단위를 씁니다.

• px: CSS의 고정 크기 단위입니다. 사용자가 브라우저 설정에서 기본 글자 크기를 키워도 따라 커지지 않습니다.
• em: font-size에 쓰면 부모에게서 물려받은 글자 크기의 배수입니다. padding이나 margin 같은 다른 속성에 쓰면 그 요소 자신의 글자 크기의 배수입니다.
• rem: 루트 요소인 <html>의 글자 크기의 배수입니다. 브라우저의 기본값에서는 1rem이 16px입니다.
• %: 부모의 글자 크기에 대한 백분율입니다.
• vw, vh, vmin, vmax: 뷰포트(브라우저 창)의 너비나 높이에 대한 백분율입니다. 1vw는 창 너비의 1%입니다.
• 키워드: 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% */

이 코드에서 h2의 2em은 부모 글자 크기의 두 배이고, .article-title의 3rem은 루트 글자 크기의 세 배인 48px, .responsive-text의 3vw는 창 너비가 1000px일 때 30px입니다. 글자 크기에는 px보다 rem이나 em을 쓰는 편이 좋습니다. 사용자가 브라우저의 기본 글자 크기를 키우면 페이지의 글자도 함께 커져, 시력이 약한 사용자도 읽을 수 있기 때문입니다.

굵기와 기울임: font-weight, font-style

font-weight는 글자의 굵기를 정합니다. 키워드로 normal(400), bold(700), 부모보다 굵게 하는 bolder, 가늘게 하는 lighter를 쓰거나, 1부터 1000 사이의 숫자로 적습니다. 100, 400, 700, 900 같은 숫자는 흔히 쓰는 굵기 이름에 대응하지만, 실제로 쓸 수 있는 굵기는 글꼴 파일이 가진 굵기에 달려 있습니다. 글꼴에 없는 굵기를 지정하면 정해진 순서로 대신할 굵기를 찾습니다. 400보다 가는 값은 더 가는 굵기를, 500보다 굵은 값은 더 굵은 굵기를 먼저 찾으므로, 늘 가장 가까운 굵기가 골라지는 것은 아닙니다. 굵기를 연속으로 바꿀 수 있는 가변 글꼴(variable font)도 있습니다. 자세한 규칙은 MDN의 font-weight 설명을 참고하세요.

strong { font-weight: bold; }
.thin-text { font-weight: 300; }

strong은 브라우저가 기본으로 굵게 보여 주는 요소이므로, 첫 규칙은 그 굵기를 bold로 분명히 정해 둔 것입니다. .thin-text의 300은 글꼴에 그 굵기가 없으면 더 가는 굵기를 먼저 찾고, 그것도 없으면 400 같은 더 굵은 쪽으로 그려지므로, 쓰는 글꼴에 따라 보통 굵기와 차이가 없어 보일 수 있습니다.

font-style은 기울임을 정하며, 값은 normal, 글꼴의 기울임체를 쓰는 italic, 정자체를 비스듬히 기울이는 oblique입니다.

em { font-style: italic; }

em도 브라우저가 기본으로 기울여 보여 주는 요소이므로, 이 규칙은 기본 모양을 그대로 적은 것입니다. 한글 글꼴은 대개 기울임체를 따로 갖고 있지 않아서, italic을 주면 브라우저가 정자체를 비스듬히 기울여 대신 보여 줍니다.

줄 간격: line-height

line-height는 한 줄의 높이, 즉 줄 간격을 정합니다. 단위 없는 숫자를 쓰면 글자 크기의 배수가 되어, 16px 글자에 1.5를 주면 줄 높이가 24px입니다. 본문은 보통 1.5 이상으로 두면 읽기 편합니다.

p { line-height: 1.8; } /* 텍스트 가독성 향상을 위해 1.5 이상 권장 */

24px 같은 길이나 150% 같은 백분율도 쓸 수 있지만, 상속될 때 단위 없는 숫자와 결과가 다릅니다. 단위 없는 1.5는 배수 자체가 자식에게 전해져, 자식이 자기 글자 크기로 다시 계산합니다. 반면 150%는 부모의 글자 크기로 계산한 길이가 전해집니다. 부모의 글자가 16px이고 자식의 글자가 32px이며 자식에게 따로 줄 간격을 주지 않았다면, 부모의 1.5는 자식에서 32 × 1.5 = 48px이 되지만, 부모의 150%는 16 × 1.5 = 24px이 그대로 전해져 큰 글자의 줄이 겹칩니다. 그래서 줄 간격에는 단위 없는 숫자를 권합니다. 자세한 이유는 MDN의 line-height 설명에 나와 있습니다.

한 줄로 쓰기: font

font 단축 속성은 여러 글꼴 속성을 한 줄에 적습니다. font-style, font-variant, font-weight는 서로 순서를 바꿔 써도 되지만 font-size보다 앞에 와야 하고, line-height는 font-size 바로 뒤에 /로 붙이며, 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가 있습니다. 한글 본문에 justify를 쓰면 단어 사이가 고르지 않게 벌어질 수 있으므로 화면에서 확인합니다.

h1 { text-align: center; }
.article-body { text-align: justify; }

text-decoration은 글에 선을 긋거나 지웁니다. none은 선 없음, underline은 밑줄, overline은 윗줄, line-through는 취소선입니다. 링크의 기본 밑줄을 없앨 때 text-decoration: none을 많이 쓰지만, 밑줄이 없으면 링크와 일반 글을 색으로만 구분하게 되므로 색의 차이를 충분히 두거나 마우스를 올렸을 때 밑줄을 다시 보여 줍니다.

a { text-decoration: none; }
.strike { text-decoration: line-through; }

text-transform은 영문의 대소문자를 바꿉니다. uppercase는 모두 대문자, lowercase는 모두 소문자, capitalize는 단어마다 첫 글자만 대문자로 보여 주며, HTML의 원래 글자는 바뀌지 않습니다.

h2 { text-transform: uppercase; }

그래서 HTML에 About Me라고 적었다면 화면에는 ABOUT ME로 보이지만, 문서 속 글자는 그대로이므로 자바스크립트의 textContent로 읽으면 원래 글자가 나옵니다. 한글에는 대소문자가 없으므로 이 속성의 영향을 받지 않습니다.

letter-spacing은 글자 사이의 간격(자간)을, word-spacing은 단어 사이의 간격을 px나 em 같은 길이로 정합니다. 값이 양수면 기본 간격보다 넓어지고, 음수면 좁아집니다.

h1 { letter-spacing: 2px; } /* 글자 간격 넓힘 */

p { word-spacing: 5px; } /* 단어 간격 넓힘 */

letter-spacing은 한글 한 글자 한 글자 사이에도 적용되지만, word-spacing은 공백 문자로 나뉜 단어 사이에만 적용됩니다.

text-indent는 문단의 첫 줄을 들여 씁니다. 둘째 줄부터는 들여 쓰지 않으며, 음수 값을 주면 첫 줄이 오히려 왼쪽으로 나와 내어쓰기가 됩니다.

.indent-para { text-indent: 30px; }

white-space는 공백과 줄 바꿈을 처리하는 방식입니다. 기본값인 normal은 연속된 공백을 하나로 줄이고 필요하면 줄을 바꾸며, nowrap은 줄을 바꾸지 않습니다. pre는 <pre> 요소처럼 공백과 줄 바꿈을 그대로 유지하고, pre-wrap은 공백을 유지하면서 필요하면 줄을 바꾸며, pre-line은 공백은 줄이되 줄 바꿈은 유지합니다. 다음 코드는 긴 제목을 한 줄로 보여 주고, 넘치는 부분을 잘라 말줄임표(…)로 표시합니다. 이렇게 하려면 overflow: hidden과 text-overflow: ellipsis가 함께 있어야 합니다.

.no-wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 한 줄로 표시하고 넘치면 ... */

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; /* 네온 효과 */
}

첫 번째 규칙은 흰 글자의 오른쪽 아래로 2px 떨어진 검은 그림자를 4px 흐리게 깔아, 밝은 배경 위에서도 글자가 보이게 합니다. 두 번째 규칙은 흐림 정도가 다른 파란 그림자 세 개를 겹쳐 빛이 번지는 네온 효과를 만듭니다. 그림자를 너무 강하게 주면 오히려 글자가 흐려 보이므로, 읽기에 도움이 되는 정도로만 씁니다.

실습: 블로그 글 꾸미기

배운 속성을 조합해 블로그 글 한 편을 꾸며 봅니다. 다음 구조로 파일을 준비합니다.

blog-post.html에는 다음 코드를 씁니다. <head>의 두 번째 <link>는 Google Fonts에서 Noto Sans KR 웹 폰트의 300, 400, 700 굵기를 불러옵니다.

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

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

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

HTML의 요소에는 main-title, post-meta, important-text, quote-text, shadow-text처럼 역할을 나타내는 클래스가 붙어 있습니다. css/blog.css에는 다음 CSS를 씁니다. body에서 글꼴, 색, 줄 간격의 기본값을 한 번 정하고, 이 클래스들을 선택자로 골라 제목, 작성 정보, 강조 문단처럼 달라야 할 부분만 바꾸는 구조입니다.

/* 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: #586366; /* 흰 배경과 대비가 충분한 회색 메타 정보 */
    margin-bottom: 25px;
    text-align: right; /* 오른쪽 정렬 */
}

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

/* 중요 텍스트 스타일 */
.blog-post .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;
}

/* 인용문 스타일 */
.blog-post .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을 엽니다. 제목의 크기, 본문의 줄 간격, 빨간 테두리가 있는 강조 문단이 각각 어느 선택자에서 왔는지 CSS와 비교해 보세요. 효과가 많다고 읽기 좋은 것은 아니므로, 작성자와 날짜 같은 보조 정보도 배경과 충분히 대비되는지, 좁은 화면에서 줄이 자연스럽게 바뀌는지도 확인합니다.

Google Fonts는 외부 서버에 보내는 요청입니다. 네트워크가 막혀 웹 폰트를 받지 못해도 font-family의 마지막 sans-serif 덕분에 글자는 기기의 고딕 계열 글꼴로 보입니다. 개발자 도구의 Elements 패널에서 요소를 고르고 Computed 영역 아래의 Rendered Fonts를 보면 실제로 그려진 글꼴을, Network 패널에서는 글꼴 파일의 요청 결과를 확인할 수 있습니다.

보조 정보의 색은 대비를 계산해 정했습니다. 흔히 쓰는 회색 #7f8c8d는 흰 배경과의 대비가 약 3.48:1이라, 일반 크기 글자에 필요한 4.5:1에 못 미칩니다. 이 실습은 대신 #586366을 써서 대비를 약 6.2:1로 높였습니다. 대비 기준은 WCAG의 최소 대비 설명에 나와 있으며, 글자색 하나만이 아니라 실제 배경색과 함께 평가합니다.

더 깊이: 대비 4.5:1은 어떻게 계산할까

WCAG의 대비는 두 색의 상대 휘도(relative luminance)로 계산합니다. 먼저 RGB의 각 채널을 0과 1 사이 값으로 바꾸고, 화면의 감마 보정을 되돌리는 변환을 거쳐 실제 빛의 세기에 가까운 값으로 만듭니다. 그다음 0.2126 × R + 0.7152 × G + 0.0722 × B로 휘도를 구합니다. 세 채널의 가중치가 크게 다르므로, 같은 255라도 순수한 초록 #00ff00의 휘도는 0.7152이고 순수한 파랑 #0000ff는 0.0722에 그칩니다. 숫자로는 똑같이 꽉 찬 색이어도 밝기는 열 배 가까이 차이가 나는 셈입니다.

대비는 밝은 쪽 휘도를 L1, 어두운 쪽을 L2라 할 때 (L1 + 0.05) / (L2 + 0.05)입니다. 흰색의 휘도는 1, 검은색은 0이므로 둘이 만드는 최대 대비가 1.05 / 0.05, 곧 21:1이고, 같은 색끼리는 1:1입니다. 본문의 #7f8c8d와 흰색도 이 식에 넣으면 약 3.48:1이 나옵니다.

4.5:1이라는 기준은 시력이 약 20/40 정도로 떨어진 사람이 겪는 대비 감도의 손실을 보완하는 값으로 정해졌습니다. 크게 쓴 글자, 즉 18포인트 이상이거나 14포인트 이상의 굵은 글자는 3:1 이상이면 됩니다. 이 계산은 색의 밝기 차이만 보므로, 색상이 서로 달라도 밝기가 비슷한 두 색은 대비가 낮게 나옵니다. 그래서 WCAG는 대비 기준과 따로, 색만으로 정보를 구분하지 말라는 기준도 둡니다.

정리

• 색은 이름, HEX, rgb(), hsl()로 적으며, 불투명도는 rgba()나 / 뒤의 값으로 더합니다.
• font-family는 앞에서부터 있는 글꼴을 쓰므로 마지막에 일반 글꼴 계열을 적습니다.
• 글자 크기에는 사용자 설정을 따르는 rem이나 em을 쓰며, font-size의 em은 부모의 글자 크기를 기준으로 합니다.
• 줄 간격은 단위 없는 숫자로 적어야 자식이 자기 글자 크기로 다시 계산합니다.
• 정렬, 장식, 대소문자, 간격, 들여쓰기, 공백 처리, 그림자로 글의 모양을 다듬되, 읽기에 도움이 되는 만큼만 씁니다.
• 글자색은 실제 배경과의 대비를 계산해 정하며, 일반 크기 글자는 4.5:1 이상이어야 합니다.

연습 문제

1. 강조 문단의 글자 크기

.blog-post .important-text의 font-size를 1.4em으로 바꿨습니다. body에서 물려받은 글자 크기가 16px일 때 강조 문단의 글자 크기는 얼마일까요? 같은 문단에 맞는 .blog-post p의 1.1em은 어떻게 될까요?

2. 백분율 줄 간격

.blog-post에 line-height: 150%를 주고, 그 안의 .post-title에는 줄 간격을 따로 주지 않았다고 해 봅니다. .blog-post의 글자 크기는 16px이고 .post-title은 2.2em입니다. 제목의 줄 높이는 얼마가 될까요? 150% 대신 1.5를 주면 어떻게 될까요?

3. 링크의 밑줄을 지웠을 때

본문 링크에 text-decoration: none을 주고 글자색을 본문과 비슷한 진회색으로 정했습니다. 어떤 문제가 생길까요? 어떻게 고치면 좋을까요?

다음 글 박스 모델과 요소 배치에서는 모든 요소를 둘러싼 내용, 안쪽 여백, 테두리, 바깥 여백의 상자 구조와, 요소를 원하는 위치에 놓는 방법을 다룹니다.