[CSS 기초] px, %, em, rem 차이 완전 정리! 언제 어떤 단위를 써야 할까?

 

[css] px, %, em, rem

 

🤔 단위? 그냥 px만 쓰면 안 돼요?

처음 CSS를 배울 때는 대부분 px(픽셀)만 사용하죠.
하지만 실제 웹사이트에서는 다양한 크기와 해상도에 대응하기 위해 %, em, rem 등의 단위를 함께 써야 해요.

단위마다 특성이 다르고, 어디에 어떤 단위를 쓰냐에 따라 반응형/가독성/유지보수성까지 영향을 줍니다.

---

✅ 단위별 의미 요약

단위	의미	기준	반응형 적합도	특징
px	고정된 픽셀 값	고정 크기	❌ 낮음	가장 직관적이지만 반응형에 불리함
%	비율	부모 요소 기준	✅ 좋음	유동 레이아웃에 자주 사용
em	배수 단위	부모 요소의 font-size 기준	⚠️ 중간	계단식으로 값이 커질 수 있음
rem	루트 배수 단위	html의 font-size 기준	✅ 안정적	전역에서 일관된 스타일 유지 가능

 

---

🧪 실전 예시

/* px: 고정된 크기 */
h1 {
  font-size: 32px;
}

/* %: 부모 기준 */
.container {
  width: 80%;
}

/* em: 부모 폰트 기준 */
button {
  font-size: 1.2em; /* 부모가 16px이면 19.2px */
}

/* rem: html 기준 */
p {
  font-size: 1.2rem; /* html이 16px이면 19.2px */
}

 

---

💡 어떤 상황에 어떤 단위를 쓰면 좋을까?

상황	추천 단위	이유
글자 크기 전역 통일	rem	html 기준으로 일관된 디자인 가능
내부 요소 크기 조정	em	부모 기준으로 유연한 배율 조정
반응형 레이아웃	%	부모 요소 기준 비율 계산
픽셀 정확도가 중요할 때	px	고정된 정확한 크기 조정 가능

 

---

🚫 헷갈리는 팁 정리

• em은 중첩될수록 값이 커지므로 조심!
• rem은 항상 html 태그의 font-size를 기준으로 계산
• 반응형 웹에서는 px보다 rem, %를 적극 활용하는 것이 좋아요!