글자 크기는 rem

rem은 뿌리 요소 html의 글자 크기를 1로 삼는 단위입니다. 글자 크기를 px로 적으면 사용자가 브라우저의 글자 크기 설정을 키워도 그대로이고, rem으로 적으면 그 설정을 따라 함께 커집니다.

글자를 크게 봐야 하는 사람은 브라우저 글자 크기를 키워 두고 모든 사이트를 봅니다. 지금까지 레시피 노트의 글자 크기는 모두 px로 적었습니다 — 그런 사람에게는 한 글자도 커지지 않는 사이트입니다. 이 레슨은 px과 rem이 설정에 어떻게 다르게 움직이는지와, px 값을 rem으로 옮기는 셈을 봅니다.

이 단원을 마치면 레시피 노트의 글자 크기를 rem으로 옮기고, 흩어진 색을 이름 붙인 변수 여섯으로 모아 강조색을 한 줄로 바꿀 수 있습니다. 이 단원(단위와 변수)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

그림 준비 중

1px은 그대로, rem은 설정을 따른다

크롬의 글자 크기 설정은 크롬 메뉴(⋮) → 설정 → 디자인 → 글꼴 크기에 있습니다. 처음에는 '중간(권장)'으로 되어 있고, '아주 작게'부터 '아주 크게'까지 다섯 단계를 고릅니다(크롬 기준). 설정 화면 위 검색 칸에 '글꼴 크기'를 쳐도 나옵니다.

같은 문장을 한 줄은 px로, 한 줄은 rem으로 적습니다. 설정이 처음 그대로일 때는 두 줄 모두 16px입니다. 아래 잰 값은 글꼴 크기를 '크게'로 바꾼 브라우저에서 잰 값입니다 — 결과 화면은 지금 이 브라우저의 설정대로 그려집니다.

<p class="px-line">px 줄</p>
<p class="rem-line">rem 줄</p>

.px-line {
  font-size: 16px;
}

.rem-line {
  font-size: 1rem;
}

rem 줄만 커졌습니다. font-size: 16px이라고 적으면 브라우저는 사용자가 무엇을 골랐든 16px로 그립니다 — 사용자가 고른 크기보다 우리가 적은 숫자가 이긴 셈입니다.

21rem은 뿌리 요소의 글자 크기

뿌리 요소(root element)는 문서의 가장 바깥 요소 html입니다. html의 글자 크기를 CSS로 정하지 않으면 브라우저 글자 크기 설정의 값이 들어가고, 그 값이 곧 1rem입니다.

2rem은 1rem의 두 배라, 중간에서는 32px이고 크게에서는 40px입니다. 이 과목은 10단원까지 글자 크기를 px로 적었는데, 이 단원부터 rem으로 적습니다.

px 값을 rem으로 옮길 때는 16으로 나눕니다. 처음 설정에서 1rem이 16px이라, 옮긴 뒤에도 처음 설정에서는 크기가 조금도 달라지지 않습니다. 달라지는 것은 사용자가 설정을 바꿨을 때뿐입니다.

소수가 길어 보여도 셈은 정확합니다. 1.375rem은 처음 설정에서 꼭 22px입니다.

3화면 확대는 둘 다 키운다

Ctrl + +(macOS는 Command + +)로 하는 화면 확대는 다른 일입니다. 확대는 페이지 전체를 크게 그려 px로 적은 글자까지 함께 커집니다. 그래서 확대로는 px과 rem의 차이가 보이지 않습니다. 원래 크기로는 Ctrl + 0(macOS는 Command + 0)으로 돌아옵니다.

확대는 어떤 단위로 적어도 되지만, 글꼴 크기 설정은 px로 적은 글자에 닿지 않습니다. 설정을 키워 두고 쓰는 사람에게도 글이 커지게, 글자 크기는 rem으로 적습니다.

예제

레시피 노트의 글자 크기를 rem으로 옮기기

레시피 노트의 px 글자 크기 넷을 2절의 표대로 16으로 나눠 옮깁니다.

<h1>김치볶음밥</h1>
<h2>재료</h2>
<p>밥 2공기, 잘 익은 김치 1컵</p>
<footer>
  내가 만든 요리를 기록하는 곳
</footer>

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.375rem;
}

footer {
  font-size: 0.875rem;
}

• 처음 설정에서는 px로 적었을 때와 크기가 같습니다(32 · 22 · 14px).
• 글자 배율은 그 요소 글자 크기를 html 글자 크기로 나눈 값이라 rem 값과 같습니다(0.875는 소수 둘째 자리까지 0.88). 설정을 바꾸면 px 크기는 달라져도 이 배율은 그대로입니다 — 제목은 늘 본문의 두 배입니다.

자주 틀리는 곳

틀린 생각: rem은 화면 폭을 따라 커진다.

<h1>김치볶음밥</h1>

h1 {
  font-size: 2rem;
}

창 폭 1280px에서도 휴대전화에서 보는 결과 화면과 같은 32px입니다(설정이 처음 그대로일 때). rem의 기준은 화면 폭이 아니라 뿌리 요소의 글자 크기입니다.

맞는 규칙: rem은 글자 크기 설정만 따릅니다. 화면 폭을 따르는 단위는 vw입니다 — 다음 레슨 단위마다 기준에서 봅니다.

틀린 생각: 글자를 rem으로 적었으면 여백 · 선 굵기까지 모두 rem이어야 한다.

글자 크기 설정을 따라야 하는 것은 글자입니다. 카드 테두리 1px은 칸을 나누는 표시라 글자를 따라 굵어질 까닭이 없습니다. 여백은 글자와 함께 넓어지길 바라면 rem으로, 아니면 px로 적습니다 — 17단원에서 만들 할 일 화면은 여백을 px로 적습니다.

맞는 규칙: 글자 크기는 rem으로 적고, 나머지는 그 크기가 무엇을 따라 변해야 하는지로 단위를 고릅니다.

틀린 생각: 16으로 나누기가 번거로우니 html의 글자 크기를 10px로 바꿔 둔다.

<h1>김치볶음밥</h1>

html {
  font-size: 10px;
}

h1 {
  font-size: 3.2rem;
}

3.2rem이 32px이 되어 셈은 쉬워집니다. 그런데 html에 적은 10px은 우리 CSS라, 사용자가 글꼴 크기를 '크게'로 바꿔도 1rem은 10px 그대로입니다. 1절의 px 줄과 같은 문제로 돌아갑니다.

맞는 규칙: html의 글자 크기는 적지 않고 16으로 나눈 rem 값을 씁니다.

확인 문제

1. 예제의 h2를 아래처럼 바꿉니다. 글꼴 크기를 '크게'로 둔 브라우저에서 h2의 글자 크기는 몇 px일까요? 숫자만 쓰세요.

<h2>재료</h2>

h2 {
  font-size: 1.25rem;
}

2. 바닥글의 font-size: 12px;을 rem으로 옮깁니다. 처음 설정에서 크기가 그대로이게 ____ 자리를 채우세요.

footer {
  font-size: ____;
}

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

footer {
  font-size: 0.75rem;
}

3. 보드게임 동아리 모집 공지입니다. 글꼴 크기를 '크게'로 바꿨더니 제목은 커졌는데 안내 문장은 그대로입니다. 처음 설정에서는 크기가 지금과 같게 두고 고칠 선언 한 줄을 쓰세요.

<h1>보드게임 동아리 모집</h1>
<p>금요일 저녁 6시, 3층 휴게실</p>

h1 {
  font-size: 1.75rem;
}

p {
  font-size: 18px;
}

<h1>보드게임 동아리 모집</h1>
<p>금요일 저녁 6시, 3층 휴게실</p>

h1 {
  font-size: 1.75rem;
}

p {
  font-size: 1.125rem;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 예제를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). 크롬 설정에서 글꼴 크기를 '크게'로 바꾸고 새로고침해 rem 줄만 커지는지 봅니다. 그다음 .rem-line의 1rem을 16px로 바꾸면 무엇이 달라질지 먼저 적고, 저장한 뒤 새로고침합니다. 다 보면 글꼴 크기를 '중간(권장)'으로 되돌립니다.