[CSS] px, em, rem 차이와 rem이 유연한 페이지에 유리한 이유

GPT가 만들어준 이미지...

절대 단위와 상대 단위

처음 프론트엔드 개발을 시작하면 무조건 px이라는 단위를 사용하게 된다. 이는 원래 일상에서도 많이 쓰는 단위이기에 익숙하기도 하고, ‘절대 단위’이기 때문에 원하는 길이를 정확히 지정할 수 있기 때문이다. 여기서 ‘절대 단위’란 말 그대로 어떤 상황에서도 변하지 않는 상수같은 절대적인 길이를 유지하는 단위이다.
 
그렇다면 ‘상대 단위’란 무엇일까? 절대 단위와 다르게 항상 같은 길이를 유지하는게 아니라 상대적으로 변하는 단위이다. 이러한 ‘상대 단위’에 해당하는 것이 em, rem이다. 상대적으로 변하기 위해서는 그 기준이 필요할텐데, em과 rem의 기준은 무엇이며 둘의 차이점이 무엇인지 정리해보려한다.
 
 

em과 rem

em과 rem이 어떤 기준에 따라 상대적으로 결정된다면, 결국 em과 rem의 기준이 되는 길이는 절대적인 길이어야 할 것이다. 따라서 그 값은 ‘절대 단위’인 px단위가 된다.
 
그리고 그러한 em의 기준은 부모의 font-size의 px사이즈이다. 예를 들어서 body의 font-size를 설정하지 않는다면 그 길이는 브라우저의 기본 font-size인 16px이 될 것이고, body의 자식이 1em의 font-size를 가지고 있다면 그 자식의 길이도 16px이 된다. 이때 ‘1em = 16px’이 되는 것이다. 하지만 만약 자식이 1em이 아니라 2em을 가지고 있다면 어떨까?
그렇다면 자식의 길이는 32px이 된다. 그리고 그러한 자식의 자식은 이제 32px을 1em 길이로 갖게 된다. 이는 상대적이긴 하지만 계산이 매우 복잡하다. 이러한 em의 불편한 점을 해소시켜주는 것이 rem이라고 할 수 있다.
 
rem의 기준은 부모가 아니라 body의 font-size이다. 따라서 만약 body의 font-size가 10px이라면 이제 1rem은 10px이 되고, 이는 고정되어 모든 곳에서 적용된다. 1.5rem은 15px이 되는 것이다.
 
 

rem을 유연하게 사용하기

여기서 왜 rem이 유연하고 유연하게 쓰기 위해서는 어떻게 해야하는지 알 수 있다.
 
내가 최근 프로젝트를 하면서 실수로 body에 font-size를 지정한 일이 있었다. 그렇게 되니 rem은 body의 font-size 크기에 고정되면서 상대단위를 쓰는 의미를 잃었다. 뒤늦게 발견하고 body에서 font-size를 제거했지만, 이 일로 더욱더 rem의 유연성과 중요성을 깨닫고 이를 기록하고자 블로그를 작성하게 되었다.
 
약간 장황한 말이라고 생각이 들 수 있지만 이 말은 즉, body에 font-size에 따라 그 사이즈가 결정되는 rem이기 때문에 이를 고정하면 상대 단위의 이점을 활용할 수 없고, 이를 고정하지 않아야 이용자가 설정한 브라우저의 font-size에 따라 사용자가 원하는 크기로 유동적인 페이지를 구현할 수 있다는 의미이다. 이것이 바로 rem을 유연하게 만드는 핵심 포인트라고 할 수 있다. 물론 하나의 기준 길이를 만들어 원하는 사이즈 조절을 한번에 처리하는 것도 가능할 것이다.