🌱 기초 프론트엔드
CSS 단위 px, rem, em이란?
쉽게 이해하기
px은 절대적인 센티미터 자처럼 고정된 크기고, em은 부모의 크기에 따라 변하는 상대적인 크기, rem은 최상위 기준에 맞춰지는 크기예요. 마치 "이만큼"이라고 손가락으로 재는 것과 "아빠 키의 절반"이라고 말하는 것의 차이죠.
핵심 정리
CSS에서 크기를 지정할 때 사용하는 px, rem, em 단위의 차이를 알아봅니다.
자세히 알아보기
웹에서 글자 크기나 여백을 정할 때 px, rem, em 같은 단위를 사용해요. px(픽셀)은 절대 단위로 화면의 점 하나를 의미하고, 16px이라고 쓰면 항상 16픽셀 크기예요. 반면 em과 rem은 상대 단위인데, em은 부모 요소의 폰트 크기를 기준으로 계산되고, rem은 HTML 최상위 요소의 폰트 크기를 기준으로 해요.
실무에서는 반응형 디자인을 위해 rem을 많이 써요. 사용자가 브라우저 설정에서 글자 크기를 키우면 rem 단위로 작성한 요소들이 자동으로 비율에 맞게 커지거든요. 반면 px은 고정 크기라 접근성 측면에서 불리할 수 있어요.
em은 중첩된 요소에서 사용하면 계산이 복잡해질 수 있어요. 부모가 1.5em, 자식이 1.2em이면 실제로는 1.5 × 1.2 = 1.8배가 되거든요. 그래서 최근에는 rem을 더 선호하는 편이에요.
예를 들어 기본 폰트가 16px이면, 1rem = 16px, 2rem = 32px이 되는 식이에요. 모바일과 데스크톱에서 일관된 비율을 유지하고 싶을 때 rem을 쓰면 편리해요.