글꼴 크기나 화면 크기 등을 다룰 때, 단위는 매우 중요하다.
보통 기종이나 디바이스에 따라 유연하게 반응하는 웹페이지를 만들기 위해서는 상대단위를 사용하는 것이 좋다.
글꼴 크기를 정할 때
-절대단위: px
-상대단위: em, rem
절대 단위인 px을 사용할 때의 문제점
- 사용자 접근성 불리
: 눈이 잘 안보이는 사용자가 브라우저 폰트 크기를 크게 설정해도, 고정된 값인 px로 설정된 폰트는 작게 보이게 된다. - 작은 화면이면서 고해상도인 디바이스에서 불리
: 보통 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일 되어 뚜렷하지 않게 표현될 수 있다. - 의미 전달에 불리
: 개발자가 제목을 강조하기 위해 폰트 크기를 설정해도 픽셀을 사용하면, 사용자 환경에 따라 일반 텍스트보다 작게 보일 수 있다.
em 보다는 rem을 사용해야 하는 이유
em과 rem은 모두 유연하게 가변하는 상대적인 단위이다.
그러나 em 단위는 부모 요소의 폰트 크기를 상속 받기 때문에 각 요소의 상속을 고려하여 크기를 설정해야 하는 복잡함이 있다.
그러므로 보통의 경우 최상위 요소(root)의 상속 영향만 받는 rem 단위를 사용하는 것이 좋다.
최상위 요소인 html 요소의 폰트 크기는 따로 설정되지 않은 이상 사용자가 설정한 브라우저 설정값을 상속받게 된다.
따라서, rem 단위를 사용하면 사용자가 설정한 값에 따라 전체적인 레이아웃이 적절하게 조정된다.
Zoë Park