CSS 길이 단위: px, em, rem 차이점

• 웹 개발에서 CSS의 길이 단위는 레이아웃과 폰트 크기를 설정하는 데 매우 중요
• 특히 px, em, rem은 가장 많이 사용되는 단위이며, 각각의 특징과 적절한 사용법을 이해하는 것이 필수적

답변 확인

1. px(픽셀) - 고정 크기

✅ 특징

• 물리적인 픽셀 단위를 기준으로 한 절대적인 크기.
• 요소의 크기가 고정되므로, 디바이스 해상도나 브라우저 설정에 영향을 받지 않음.
• 정확한 크기 지정이 가능하지만, 사용자의 접근성 설정(예: 텍트스 확대 기능)에 대응하지 못함

✅ 언제 사용?

• 고정 크기가 필요한 요소 (예: 아이콘, 테두리, 특정한 UI 요소).

.box {
  width: 200px;
  height: 100px;
  font-size: 16px; /* 항상 16px */
}

2.em (부모 요소 기능 상대 단위)

✅ 특징

• 해당 요소의 부모 요소의 font-size를 기준으로 크기가 결정됨
• 1em = 부모의 font-size 값
• 비율적으로 크기를 설정할 수 있어 반응형 디자인에 유용함
• 하지만, 중첩되면 값이 예상보다 커질 수 있음(em 값이 누적됨)

✅ 언제 사용?

• 컨텍스트(부모 요소)에 따라 상대적인 크기 조절이 필요할 때
• 버튼 안의 텍스트 크기와 패딩을 비례적으로 조정하고 싶을 때

.parent {
  font-size: 20px;
}
 
.child {
  font-size: 1.5em; /* 1.5 * 부모의 20px = 30px */
  padding: 2em; /* 2 * 부모의 20px = 40px */
}

✔️ 주의점: em을 중첩해서 사용하면 크기가 예상보다 커질 수 있음

3.rem (루트 요소 기준 상대 단위)

✅ 특징

• 루트 요소 (html)의 font-size를 기준으로 크기가 결정됨
• 1rem = html 의 font-size
• 부모 요소의 영향을 받지 않고, 일관된 크기 설정이 가능함
• 접근성 측면에서 사용자의 브라우저 설정(글자 크기 확대)에 잘 대응함

✅ 언제 사용?

• 전역적으로 일관된 크기를 설정할 때
• 반응형 웹에서 전체적인 폰트 크기 조절이 필요할 때

html {
  font-size: 16px;
}
 
.container {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
  padding: 2rem; /* 2 * 16px = 32px */
}

✔️ rem을 사용하면 글자 크기를 한 번에 조정할 수 있어 반응형 디자인에서 유용함

📌 4. px, em, rem 비교 정리

5. 언제 rem 대신 em을 사용해야 할까?

rem과 em은 모두 상대 단위지만, 상황에 따라 더 적절한 선택이 필요

rem을 사용하는 경우

• 전역적으로 일관된 크기를 유지하고 싶을 때.
• 웹사이트 전체의 기본 글자 크기를 쉽게 조정하고 싶을 때.

em을 사용하는 경우

• 부모 요소를 기준으로 크기가 자동 조정되어야 할 때.
• 버튼 내부의 텍스트와 패딩을 비례적으로 조정할 때 -> em을 사용하면 텍스트 크기가 변하면 패딩도 함께 조정됨

button {
  font-size: 1.2em;
  padding: 0.5em 1em; /* 글자 크기에 맞춰 자동 조정 */
}

➡️ 만약 rem을 사용했다면, 버튼의 폰트 크기와 패딩이 서로 독립적으로 조정되므로 비율이 깨질 수 있음

결론

• ✅ 고정된 크기가 필요할 때 → px
• ✅ 부모 요소를 기준으로 크기를 조정하고 싶을 때 → em
• ✅ 전역적으로 일관된 크기를 적용하고 싶을 때 → rem 📌 실무에서는 px보다는 rem과 em을 조합하여 반응형 웹을 만들 때 많이 사용

참고 자료

• [DaleSeo] CSS 상대 단위 - em과 rem
• [드림코딩] 프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM) | Responsive CSS Units