rem과 px는 CSS에서 크기를 설정할 때 쓰이는 단위지만, 기준과 쓰임새가 다르다. 상황에 따라 적절히 선택하는 것이 중요하다.
rem은 Root EM의 약자로, 최상위 요소인 html의 font-size를 기준으로 하는 상대 단위다.
예를 들어 html { font-size: 16px }라면 1rem = 16px이 된다. 항상 root 기준이기 때문에 예측 가능하다.
em은 부모 요소의 font-size를 기준으로 한다. 같은 2em이라도 부모의 글자 크기에 따라 결과가 달라질 수 있다.
px는 디바이스의 픽셀을 기준으로 하는 절대 단위다. 상대적이지 않고 고정된 크기를 갖는다.
픽셀 단위로 정밀하게 맞춰야 하는 UI 요소에 적합하다.
예를 들어 border: 1px solid처럼 정확히 한 줄로 표현해야 하는 테두리, 아이콘이나 캔버스 같은 픽셀 기반 그래픽 요소, 그림자 등은 px 단위가 안정적이다.
반응형 레이아웃이나 접근성이 중요한 부분에서는 rem이 적합하다.
폰트 크기, 마진과 패딩, 레이아웃 간격 등을 rem으로 지정하면 사용자가 브라우저 기본 글자 크기를 바꿀 때 자동으로 비율이 조정된다.
보통 계산 편의를 위해 html { font-size: 62.5% }를 설정해 1rem = 10px로 맞추기도 하지만, 접근성을 고려한다면 브라우저 기본값인 16px을 유지하는 편이 더 바람직하다.
line-height는 단위 없는 숫자를 쓰는 것이 가장 유연하다. 예를 들어 line-height: 1.5라고 지정하면 글자 크기가 달라져도 비율에 맞게 줄 간격이 유지된다. 반대로 px이나 rem 단위를 쓰면 고정값이 되어서 유연성이 떨어진다.
미디어 쿼리는 주로 px 단위를 사용한다. 하지만 특정 상황에서 글자 크기 변화를 기준으로 반응형을 구성하려면 em 단위가 유용할 수 있다.
정리하자면, 텍스트 크기와 레이아웃 간격에는 rem을 쓰는 것이 좋고, 디테일이 중요한 테두리나 그림자 같은 요소에는 px가 적합하다. 줄 간격인 line-height는 단위 없는 배수를 쓰는 것이 권장된다. 미디어 쿼리는 일반적으로 px를 쓰지만, 필요하다면 em을 활용할 수도 있다.
즉, 텍스트와 레이아웃은 rem, 정밀한 디테일은 px, line-height는 단위 없는 숫자가 가장 일반적인 패턴이다.