여느 2010년대 스택오버플로우를 보면 rem/em 사용할 때 아래 같이 안내하는 걸 볼 수 있습니다.
// " 글꼴 크기를 10픽셀로 전역 재설정 " 하려면 아래처럼 하세요~
html {
font-size: .625em;
}이렇게 하면 브라우저의 기본 글꼴 크기인 16픽셀을 10픽셀로 축소합니다. 이 방법은 우리의 계산을 간단히 해줍니다.
어떻게?
디자이너가 글꼴을 14픽셀로 만들라고 하면 머릿속으로 10으로 나누고 1.4 rem을 입력하면 상대 단위를 계속 사용하면서 쉽게 계산할 수 있습니다. (참 쉽죠?)
처음에는 이 방법이 편리할 수 있지만 이 방법에는 두 가지 문제가 있습니다.
1. 중복된 스타일을 많이 작성해야 합니다.
10픽셀은 대부분의 텍스트에 비해 너무 작기 때문에 페이지 전체에 걸쳐 덮어써야 합니다.
p 태그을 1.4rem로, aside 태그 을 1.4rem로, a 태그를 1.4rem로 설정하는 등의 작업을 수행하게 됩니다.
이렇게 하면 오류가 발생할 수 있는 곳이 더 많아지고 코드가 변경되어야 할 때 접점이 더 많아지며 스타일시트의 크기가 커집니다.
2. rem/em 을 쓰면서도 픽셀 단위로 생각하는 개발자
두 번째 문제는 이렇게 할 때 여전히 픽셀 단위로 생각한다는 것입니다.
코드에 1.4rem을 입력해도 머릿속에서는 여전히 "14픽셀"로 생각하고 있는 것입니다.
반응형 웹에서는 "상대적인" 값에 익숙해져야 합니다.
1.2rem이 몇 픽셀로 평가되는지는 중요하지 않으며, 상속된 글꼴 크기보다 조금 더 크다는 것만 알면 됩니다.
그리고 화면에서 원하는 대로 보이지 않으면 변경하면 됩니다.
이 작업에는 약간의 시행착오가 필요하지만 픽셀로 작업한다고 해서 시행착오가 없을까요? 마찬가지입니다.
UX Engineer