글자 꾸미기

글자를 꾸미는 CSS 속성은 이름이 font-나 text-로 시작하는 것이 많습니다. 글꼴 font-family, 크기 font-size, 굵기 font-weight, 줄 높이 line-height, 정렬 text-align, 글자에 긋는 선 text-decoration입니다.

이 가운데 셋은 브라우저가 값을 정하는 길이 남다릅니다. 글꼴은 목록을 앞에서부터 찾고, 단위 없는 줄 높이는 글자 크기마다 다시 셈하고, body에 준 글자 값은 안쪽 요소가 물려받습니다(inherit). 이 셋을 알면 기기마다 글꼴이 달라도, 큰 제목이 두 줄로 꺾여도 글이 깨지지 않게 쓸 수 있습니다.

body {  font-family:    system-ui,    sans-serif;}

1글꼴 목록 font-family

CSS를 쓰지 않은 페이지는 브라우저의 기본 글꼴로 그려지고, 기본 글꼴은 기기와 설정마다 다릅니다. font-family는 그릴 글꼴을 정하는데, 기기마다 가진 글꼴이 달라 이름을 여럿 적습니다. 이것을 대체 목록(fallback list)이라고 부릅니다.

body {
  font-family:
    system-ui,
    sans-serif;
}

이 과목은 목록이 32칸을 넘으면 콜론 뒤와 쉼표 뒤마다 줄을 바꿉니다. 나눠도 같은 선언입니다.

브라우저는 목록을 앞에서부터 보고 이 기기에 있는 글꼴로 그리며, 앞 글꼴에 없는 글자는 다음 글꼴에서 찾습니다. 그래서 결과 화면도 보고 있는 기기의 글꼴로 그려집니다.

목록을 적는 약속이 둘 있습니다.

• 이름에 빈칸이 든 글꼴은 한 이름이라는 표시로 큰따옴표로 감쌉니다("Noto Sans KR").
• system-ui · sans-serif는 글꼴 하나의 이름이 아니라 종류를 가리키는 말(종류 이름)이라 따옴표 없이 씁니다. 목록 맨 끝에는 종류 이름을 둡니다 — 앞 글꼴이 다 없어도 비슷한 모양이 나옵니다.

2크기 · 굵기 · 정렬 · 밑줄

<h1>김치볶음밥</h1>
<p>내가 만든 요리를 기록하는 곳</p>

h1 {
  font-size: 28px;
  font-weight: normal;
}

p {
  text-align: center;
}

• font-size의 처음 크기는 16px입니다(브라우저 글자 크기 설정이 처음 그대로일 때). 이 단원은 px만 씁니다.
• 굵기는 계산된 값인 숫자로 보입니다(normal은 400, bold는 700).
• text-align: center는 요소가 아니라 요소 안의 글자를 줄 가운데에 놓습니다.
• text-decoration은 링크 밑줄(underline)과 끝낸 할 일의 취소선(line-through)에 씁니다.

3줄 높이 line-height는 단위 없는 수로

line-height는 한 줄이 차지하는 높이, 곧 줄 높이입니다. 이 과목은 1.6처럼 단위 없는 수로 씁니다. 단위 없는 수는 '그 요소 글자 크기의 몇 배'라는 뜻이라, 글자 크기마다 다시 셈합니다.

<h1>김치와 찬밥으로 만드는 볶음밥</h1>
<p>찬밥과 김치만 있으면 됩니다.</p>

body {
  line-height: 1.6;
}

16px 문단은 16 × 1.6 = 25.6px, 32px 제목은 32 × 1.6 = 51.2px입니다. body에 한 번 적은 1.6을 요소마다 제 글자 크기에 다시 곱했습니다.

같은 자리에 25.6px처럼 길이를 적으면 그 길이가 그대로 내려갑니다.

<h1>김치와 찬밥으로 만드는 볶음밥</h1>
<p>찬밥과 김치만 있으면 됩니다.</p>

body {
  line-height: 25.6px;
}

32px 제목에도 줄 높이가 25.6px이라 글자보다 작아, 두 줄로 꺾인 제목은 위아래 줄이 맞닿거나 겹칩니다. 길이는 셈을 마친 값이 내려가기 때문입니다.

4body에 준 글자 값은 안쪽이 물려받는다

3절의 body 규칙 하나를 제목과 문단이 모두 따랐습니다. 글꼴 · 글자색 · 줄 높이 같은 글자 속성은 부모에 준 값을 안쪽 요소가 물려받습니다. 페이지에 보이는 요소는 모두 body 안에 있으니, 제 값이 없는 요소는 body의 값을 씁니다.

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

body {
  color: #6e6e73;
  font-family:
    system-ui,
    sans-serif;
}

h1과 p에는 규칙이 없는데 둘 다 회색이고 같은 글꼴 목록을 씁니다. 다만 h1의 크기와 굵기처럼 기본 스타일이 제 값을 준 속성은 물려받지 않고 제 값을 씁니다. 무엇을 물려받는지는 9단원 물려받기에서 자세히 봅니다.

예제

레시피 노트의 글자 규칙

글꼴 · 글자색 · 줄 높이는 body에 한 번 적고, 제목 크기만 따로 정합니다.

<h1>김치볶음밥</h1>
<p>잘 익은 김치와 찬밥이면 됩니다.</p>
<h2>재료</h2>

body {
  color: #1d1d1f;
  font-family:
    system-ui,
    sans-serif;
  line-height: 1.6;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

• h1에 32px을 적어 두면 제목 크기를 어디서 정하는지 파일에서 바로 보입니다.
• h2는 기본 24px에서 22px이 되고, 줄 높이도 22 × 1.6 = 35.2px로 다시 셈합니다.

자주 틀리는 곳

틀린 생각: 글꼴 이름을 조금 틀리게 적으면 오류가 나서 글이 안 보인다.

<p>김치볶음밥 Kimchi</p>

p {
  font-family: "Noto Sans KRR";
}

없는 이름(KR 뒤에 R가 하나 더)이라도 오류는 나지 않습니다. 브라우저는 그 글꼴을 찾지 못하면 목록의 다음 글꼴로 넘어가고, 목록이 끝나면 기기마다 다른 기본 글꼴로 그려 바란 모양과 멀어질 수 있습니다.

맞는 규칙: 글꼴 목록 끝에는 종류 이름(sans-serif)을 둡니다. 앞 이름이 틀리거나 없어도 비슷한 글꼴로 그려집니다.

틀린 생각: body에 글자색 · 글꼴을 주면 단추와 링크도 그 값을 따른다.

<p>후기를 남겨 주세요.</p>
<button>후기 남기기</button>

body {
  color: #6e6e73;
  font-family:
    system-ui,
    sans-serif;
}

문단은 회색이 되었지만 단추 글자는 검정 그대로입니다(크롬 기준). 단추는 글자색과 글꼴을, 링크는 글자색을 기본 스타일이 따로 주어 물려받지 않습니다.

맞는 규칙: 제 값이 있는 요소는 물려받지 않습니다. 단추 · 링크의 글자는 그 요소를 고르는 규칙으로 따로 정합니다.

틀린 생각: 링크 밑줄은 꾸밈이라 text-decoration: none⁠으로 지워도 된다.

<p>김치볶음밥을 만들어 봅니다.</p>
<a href="#steps">조리 순서 보기</a>

a {
  color: #1d1d1f;
  text-decoration: none;
}

링크가 밑줄도 색도 없이 보통 글자와 똑같아, 누를 수 있는 곳인지 알 수 없습니다.

맞는 규칙: 글 속 링크의 밑줄은 링크라는 표시라 남겨 둡니다. 색을 바꾸더라도 밑줄은 지우지 않습니다.

확인 문제

1. 예제의 h2 규칙에서 글자 크기를 22px에서 30px로 바꾸면 h2의 줄 높이는 얼마가 될까요?

• ① 25.6px
• ② 35.2px
• ③ 48px

<h2>재료</h2>

body {
  line-height: 1.6;
}

h2 {
  font-size: 30px;
}

2. 바닥글 문장을 줄 가운데에 놓는 선언을 ____ 자리에 쓰세요.

<p>내가 만든 요리를 기록하는 곳</p>

p {
  ____
}

<p>내가 만든 요리를 기록하는 곳</p>

p {
  text-align: center;
}

3. 플로우 카페 메뉴판입니다. body의 글자색을 회색 #6e6e73으로 정했습니다. 아래 세 요소 가운데 회색으로 그려지는 것을 모두 고르세요. 기호를 다 쓰세요.

<h2>플로우 카페</h2>
<p>커피 4000 · 라테 4500</p>
<a href="menu.html">전체 메뉴</a>

body {
  color: #6e6e73;
}

• ㉠ h2 플로우 카페
• ㉡ p 커피 4000 · 라테 4500
• ㉢ a 전체 메뉴

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 HTML과 CSS를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). 제목 글을 길게 늘려 두 줄로 꺾이게 합니다. body의 line-height: 1.6을 25.6px로 바꾸면 제목 두 줄이 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.