px, em, rem의 차이점 완벽 정리! 웹 개발에서 꼭 알아야 할 길이 단위

1. px, em, rem이란?

웹 개발에서 글꼴 크기, 패딩, 마진 등의 길이 단위를 지정할 때 다양한 단위를 사용할 수 있습니다. 그중에서도 px, em, rem은 가장 많이 사용되는 단위입니다.

단위	설명
px	고정된 픽셀 단위 (절대 단위)
em	부모 요소의 폰트 크기를 기준으로 하는 상대 단위
rem	최상위 html 요소의 폰트 크기를 기준으로 하는 상대 단위

각 단위마다 장단점이 다르므로, 상황에 맞게 적절히 사용하는 것이 중요합니다.

---

2. px(픽셀)이란?

px(pixel)은 고정된 크기 단위로, 화면의 물리적 픽셀과 1:1로 매핑됩니다. 크기가 변하지 않기 때문에 디자인할 때 정확한 크기 조정이 가능합니다.

✅ px의 특징

• 절대적인 크기이므로 환경(해상도, 디바이스 설정)과 관계없이 고정된 크기 유지
• 브라우저 설정에 영향을 받지 않음
• 반응형 웹에서는 가변 크기 단위(em, rem)보다 유연성이 떨어짐

📌 px 예제

h1 {
  font-size: 24px;
}

📌 h1 요소의 글꼴 크기는 항상 24px로 설정됩니다.

---

3. em이란?

em은 부모 요소의 글꼴 크기를 기준으로 크기가 결정되는 상대 단위입니다.

✅ em의 특징

• 부모 요소의 font-size에 따라 크기가 변함
• 중첩 시 예상치 못한 크기 변경이 발생할 수 있음
• 반응형 웹 디자인에서 유연하게 크기를 조절할 때 유용

📌 em 예제

body {
  font-size: 16px;
}

h1 {
  font-size: 2em; /* 16px × 2 = 32px */
}

p {
  font-size: 1.5em; /* 16px × 1.5 = 24px */
}

📌 h1은 32px, p는 24px 크기로 설정됩니다.

🚨 주의할 점: em은 부모 요소의 크기를 상속하므로, 중첩 시 크기가 예기치 않게 커질 수 있습니다.

div {
  font-size: 1.5em; /* 16px × 1.5 = 24px */
}

span {
  font-size: 1.2em; /* 24px × 1.2 = 28.8px */
}

📌 span 요소의 크기는 div를 기준으로 계산되어 28.8px이 됩니다.

---

4. rem이란?

rem(root em)은 html 요소의 font-size를 기준으로 크기를 조정하는 상대 단위입니다.

✅ rem의 특징

• 최상위 html 요소의 크기를 기준으로 계산됨
• 중첩 구조에서도 크기가 변하지 않음 → 유지보수 용이
• 반응형 웹 디자인에서 많이 사용됨

📌 rem 예제

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 16px × 2 = 32px */
}

p {
  font-size: 1.5rem; /* 16px × 1.5 = 24px */
}

📌 h1은 32px, p는 24px로 설정됩니다.

🚀 장점: rem을 사용하면 전체적인 폰트 크기를 쉽게 조절할 수 있습니다. 예를 들어, html의 font-size를 변경하면 모든 rem 단위의 요소 크기가 자동으로 조정됩니다.

html {
  font-size: 20px; /* 기본 16px에서 증가 */
}

📌 이 설정을 적용하면 2rem은 40px로 조정됩니다.

---

5. px, em, rem 비교 정리

단위	기준	특징	사용 예시
px	절대 크기	고정된 크기	정확한 디자인이 필요한 경우
em	부모 요소	중첩 시 크기 변경 가능	버튼, 입력 필드 등의 상대적 크기 조정
rem	html 요소	일관된 크기 유지	반응형 웹, 전역 스타일 조정

✅ 언제 어떤 단위를 사용해야 할까?

• 고정 크기가 필요한 경우 → px
• 부모 요소 기준으로 상대 크기를 조정할 때 → em
• 전역적인 크기 조정을 쉽게 하고 싶다면 → rem

---

6. 결론

📌 px, em, rem 각각의 특징을 이해하고, 웹사이트의 유연성과 유지보수성을 고려하여 적절한 단위를 선택하는 것이 중요합니다. 특히 반응형 웹 디자인에서는 rem을 활용하는 것이 가장 효과적입니다! 🚀