CSS - em과 rem

em, rem : CSS에서 상대적인 크기를 지정할 때 사용하는 단위

em 단위

• em은 부모 요소의 font-size를 기준으로 크기가 결정됩니다.
• 부모 요소의 font-size가 변경되면 em 값도 자동으로 조정됩니다.
• 요소 내부에서 중첩되면 크기가 배율로 증가할 수 있습니다.

예시를 통해 알아보겠습니다.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 16px * 1.5 = 24px */
}

✅ child의 font-size는 24px이 됩니다.
⚠️ 주의할 점 : em 단위를 중첩하면 크기가 점점 커질 수 있습니다.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 24px */
}

.grandchild {
  font-size: 1.5em; /* 24px * 1.5 = 36px */
}

✅grandchild의 font-size는 36px이 되어 예상보다 커질 수 있습니다.

---

rem 단위

• rem은 루트 요소(html)의 font-size를 기준으로 크기가 결정됩니다.
• 중첩 영향을 받지 않으며, 전체 프로젝트에서 일관된 크기 유지가 가능합니다.

예시를 통해 알아보겠습니다.

html {
  font-size: 16px;
}

.parent {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

.child {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

✅ container의 font-size는 24px이며, 부모 요소의 영향을 받지 않습니다.

📌 rem이 유용한 경우

• 전체적인 디자인 시스템에서 일관된 폰트 크기를 유지할 때
• 미디어 쿼리와 함께 사용하여 반응형 디자인을 쉽게 조정할 때

---

em vs rem 정리

단위	기준	중첩 영향	사용 추천
em	부모 요소의 font-size	O (배율 증가)	버튼, 아이콘 등 특정 요소에 적용
rem	html의 font-size	X (일관성 유지)	전체적인 폰트, 레이아웃 크기 조정

---

실전 예제 (버튼 스타일)

html {
  font-size: 16px;
}

button {
  font-size: 1rem; /* 16px */
  padding: 0.5em 1em; /* 상하 8px, 좌우 16px (버튼 폰트 크기의 상대값) */
}

✅ padding 값은 button의 font-size에 따라 유동적으로 변합니다.
✅ font-size: 1rem;을 사용하면 부모 요소와 상관없이 16px로 유지됩니다.

---

😗 언제 em, rem을 사용해야 할까?

• 폰트 크기 → rem 사용 (html 기준 유지)
• 여백, 패딩, 마진 → em 사용 (요소 내부 font-size 기준)
• 반응형 디자인 → rem 사용 (html의 font-size 조절)
  💡 rem을 기본으로 사용하고, 특정 요소 내에서 em을 활용하는 방식이 권장됩니다.