PX, REM, EM 단위란?
웹 디자인에서 크기를 표현하는 단위는 절대 단위와 상대 단위로 나뉩니다. PX(픽셀)는 화면의 고정된 점 크기를 나타내는 절대 단위로, 다양한 화면 크기와 사용자 설정에 영향을 받지 않습니다. 반면 REM과 EM은 상대 단위로, 다른 요소의 폰트 크기를 기준으로 계산됩니다. 반응형 웹 개발에서는 REM과 EM이 더 유연하고 접근성 높은 레이아웃을 만드는 데 적합합니다.
REM과 EM의 차이
REM(Root EM)은 항상 루트 요소인 html 태그의 폰트 크기를 기준으로 계산됩니다. 브라우저 기본값은 16px이므로 1rem = 16px입니다. EM은 부모 요소의 폰트 크기를 기준으로 하기 때문에 중첩된 요소에서 복잡하게 작용할 수 있습니다. 이 때문에 대부분의 프로젝트에서는 일관성 유지가 쉬운 REM을 선호합니다.
반응형 웹에서 REM 사용 장점
사용자가 브라우저 기본 폰트 크기를 변경하면 REM 기반의 모든 요소가 비례적으로 함께 조정됩니다. 이는 시각 장애인이나 고령 사용자처럼 텍스트를 크게 보는 사용자를 위한 접근성을 크게 향상시킵니다. 또한 루트의 font-size 하나만 변경하면 전체 레이아웃의 크기를 일괄 조정할 수 있어 반응형 대응이 쉬워집니다.
자주 묻는 질문 (FAQ)
Q. 기본 폰트 크기를 10px로 설정하려면 어떻게 하나요?
A. CSS에서 html { font-size: 62.5%; } 로 설정하면 기본 폰트 크기가 10px이 되어 1rem = 10px로 계산이 쉬워집니다. 이 도구에서도 기본값 입력란을 10으로 변경하면 해당 기준으로 환산됩니다.
Q. REM과 EM 중 어떤 것을 사용하는 것이 좋나요?
A. 대부분의 경우 REM을 권장합니다. 중첩 구조에서도 예측 가능하게 동작하기 때문입니다. EM은 버튼의 패딩처럼 해당 컴포넌트의 폰트 크기에 비례하게 유지하고 싶을 때 유용합니다.
Q. 소수점 자릿수가 많아지면 어떻게 해야 하나요?
A. 일반적으로 소수점 3자리까지만 사용합니다. CSS는 소수점 이하 값도 정확히 렌더링하지만, 0.0625rem처럼 복잡한 값은 가독성을 위해 반올림해 사용하기도 합니다.