CSS를 작성할 때 가장 자주 사용하는 기본 단위가 바로 px, rem, em입니다.
폰트 크기, 여백, 버튼 크기, 반응형 레이아웃 등 거의 모든 스타일링에서 이 단위를 사용하게 됩니다.
하지만 처음 CSS를 배우면 “px만 쓰면 되는 거 아닌가?”, “rem이 반응형에 좋다던데 왜 그런 거지?”, “em은 언제 쓰는 게 맞을까?” 같은 고민이 생깁니다.
이번 글에서는 CSS 단위 px, rem, em의 차이, 각각의 계산 방식, 장단점, 그리고 실무에서 어떤 상황에 써야 하는지까지 예제와 함께 쉽게 정리해보겠습니다.
CSS 단위가 중요한 이유
단위 선택은 단순히 숫자 표현 문제가 아니라 다음에 직접적인 영향을 줍니다.
- 반응형 웹 구현
- 접근성
- 유지보수성
- 사용자 브라우저 설정 반영
특히 폰트와 여백 시스템을 설계할 때 단위 기준이 매우 중요합니다.
px란 무엇인가?
px(pixel)는 절대 단위입니다. 브라우저에서 고정된 픽셀 크기로 표시됩니다.
font-size: 16px;
margin: 20px;
16px는 언제나 같은 크기로 보이기 때문에 가장 직관적입니다.
px 장점
- 계산이 쉬움
- 디자인 시안과 맞추기 편함
- 초보자가 이해하기 쉬움
px 단점
- 사용자 글자 크기 설정 반영 어려움
- 반응형 유연성 낮음
rem이란 무엇인가?
rem은 root em의 줄임말로, HTML(root) 요소의 font-size를 기준으로 계산됩니다.
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
위 코드에서 2rem = 32px 입니다.
rem 계산 공식
- 1rem = html font-size
- 2rem = html font-size × 2
rem 장점
- 전체 비율 관리 쉬움
- 반응형에 유리
- 접근성 좋음
em이란 무엇인가?
em은 현재 요소의 부모 font-size 기준으로 계산됩니다.
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em;
}
이 경우 child는 30px이 됩니다.
em 특징
부모 요소 기준으로 계속 누적될 수 있습니다.
그래서 중첩 구조에서는 예상보다 커지는 문제가 생길 수 있습니다.
px, rem, em 차이 한눈에 보기
px
- 절대값
- 고정 크기
rem
- html 기준
- 전체 비율 관리
em
- 부모 기준
- 지역적 비율 조정
실무에서는 어떤 단위를 많이 쓸까?
폰트 크기
rem 추천
font-size: 1rem;
버튼 padding
em 또는 rem
padding: 0.8em 1.2em;
border / icon
px 추천
border: 1px solid #ddd;
실무 추천 사용 기준
실무에서는 보통 아래 기준으로 많이 사용합니다.
- font-size = rem
- spacing = rem
- local component scaling = em
- border = px
이 방식이 가장 유지보수에 좋습니다.
왜 rem이 반응형에 유리할까?
html font-size만 바꾸면 전체 UI 크기를 쉽게 조정할 수 있습니다.
html {
font-size: 62.5%;
}
이렇게 하면 1rem = 10px처럼 계산이 쉬워집니다.
em 사용 시 주의할 점
em은 부모 기준 누적이 되므로 중첩 구조에서 예상보다 크게 커질 수 있습니다.
.parent {
font-size: 2em;
}
.child {
font-size: 2em;
}
이 경우 child는 부모의 2배가 되어 과도하게 커질 수 있습니다.
접근성과 SEO 관점
rem은 사용자의 브라우저 기본 폰트 설정을 반영하기 때문에 접근성 측면에서 매우 좋습니다.
가독성 향상은 사용자 체류 시간에도 긍정적인 영향을 줄 수 있습니다.
실무 추천 결론
요즘 실무에서는 아래 방식이 가장 많이 사용됩니다.
font-size: rem;
padding: rem;
border: px;
button scale: em;
마무리
px, rem, em은 각각 장단점이 분명한 CSS 핵심 단위입니다.
정리하면 다음과 같습니다.
- px = 고정 크기
- rem = 전체 비율 관리
- em = 부모 기준 지역 확장
- 실무는 rem 중심 + px 보조가 가장 안정적
단위를 제대로 이해하면 CSS 설계가 훨씬 깔끔해지고 반응형 대응도 쉬워집니다.