웹 개발에서 CSS 단위를 사용할 때 px, rem, em은 가장 자주 등장하는 길이 단위입니다. 모두 크기를 지정할 때 쓰이지만 기준이 서로 다르기 때문에 결과도 달라질 수 있습니다.
px란 무엇인가
px는 픽셀 기준의 고정 단위입니다. 직관적이고 사용하기 쉬워서 정확한 크기를 지정할 때 많이 사용됩니다. 예를 들어 테두리 두께, 아이콘 크기, 작은 UI 요소에 적합합니다.
em이란 무엇인가
em은 부모 요소의 글자 크기를 기준으로 계산되는 상대 단위입니다. 부모 크기에 따라 값이 달라지므로 중첩 구조에서는 예상보다 크게 또는 작게 보일 수 있습니다.
rem이란 무엇인가
rem은 루트 요소인 html의 글자 크기를 기준으로 계산되는 상대 단위입니다. 전체 사이트 기준이 일정하므로 반응형 디자인과 접근성을 고려할 때 많이 사용됩니다.
언제 어떤 단위를 쓰면 좋을까
px는 고정된 크기가 필요한 요소에 적합합니다. rem은 전체적인 폰트 크기, 여백, 레이아웃 간격처럼 일관성이 중요한 경우에 유리합니다. em은 버튼 내부 텍스트나 특정 컴포넌트처럼 부모 기준으로 함께 커지거나 작아져야 하는 경우에 쓸 수 있습니다.
실무에서 많이 쓰는 방식
최근에는 전체적인 텍스트와 spacing은 rem으로 관리하고, 아주 작은 선이나 보더 같은 요소는 px로 처리하는 방식이 많이 쓰입니다.
왜 헷갈릴까
처음 CSS를 접할 때는 숫자만 다를 뿐 비슷해 보이지만, 실제로는 기준이 다르기 때문에 결과 차이가 큽니다. 특히 em은 부모 요소 영향을 받기 때문에 의도치 않게 크기가 누적될 수 있습니다.
마무리
px, rem, em은 각각 장단점이 있습니다. 고정 크기가 필요한지, 부모 기준이 필요한지, 전체 사이트 기준이 필요한지를 생각하면 어떤 단위를 써야 할지 훨씬 쉽게 판단할 수 있습니다. EveryUtil 단위 변환기를 활용하면 px와 rem 같은 값 비교도 간편하게 할 수 있습니다.