[CSS] - rem

rem은 Root EM의 약자로, 최상위 요소(html 태그)의 글꼴 크기를 기준(1배)으로 삼는 상대적인 길이 단위입니다.

---

1. 기본 동작 원리

웹 브라우저의 기본 글꼴 크기(html의 기본 font-size)는 보통 16px입니다.

• $1\text{rem} = 16\text{px}$ (기본값 기준)
• $1.5\text{rem} = 16\text{px} \times 1.5 = 24\text{px}$
• $2\text{rem} = 16\text{px} \times 2 = 32\text{px}$
• $0.5\text{rem} = 16\text{px} \times 0.5 = 8\text{px}$

/* html 태그의 기본값이 16px일 때 */
h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1rem; /* 16px */
  margin-bottom: 1.5rem; /* 24px */
}

---

2. em과의 결정적인 차이

• em (Element / 부모 기준):
  부모 요소의 font-size를 기준으로 배수가 계산됩니다. 부모-자식 태그가 깊게 중첩될수록 글자 크기가 곱절로 불어나는 문제가 생기기 쉽습니다.
• rem (Root 기준):
  부모가 누구든 상관없이 오직 최상위 태그(html)의 크기만 바라봅니다. 중첩에 영향을 받지 않아 전체적인 크기 계산이 일정하고 예측하기 쉽습니다.

---

3. 실무와 반응형에서 rem을 쓰는 이유

1. 반응형 웹 구현 용이
   미디어 쿼리(@media)로 html 태그의 font-size만 한 번 바꿔주면, 사이트 전체의 rem 단위 폰트, 여백(padding/margin)이 비율에 맞춰 일괄 확대/축소됩니다.

html {
  font-size: 16px;
}

/* 모바일 화면에서 전체 비율을 살짝 줄이고 싶을 때 */
@media (max-width: 768px) {
  html {
    font-size: 14px; /* 이제 모든 1rem은 자동으로 14px로 계산됨 */
  }
}

2. 웹 접근성 지원
   저시력자나 고령자 사용자가 브라우저 설정에서 '글자 크기 크게(예: 20px)'를 선택했을 때, 고정 단위인 px은 커지지 않지만 rem은 브라우저 기준에 맞춰 자연스럽게 커집니다.

---

4. 자주 쓰이는 실무 테크닉 (10px 기준 맞추기)

16의 배수(16, 32, 48...)는 암산하기 번거롭기 때문에, 최상위 요소를 10px 비율로 맞춰 쓰는 방식을 많이 사용합니다.

html {
  font-size: 62.5%; /* 브라우저 기본 16px의 62.5% = 10px */
}

body {
  font-size: 1.6rem; /* 기준 본문 크기: 16px */
}

h1 {
  font-size: 2.4rem; /* 24px (암산하기 매우 쉬워짐) */
}