[CSS] px보다 rem을 사용해야 하는 이유

px은 CSS에서 가장 기본적인 단위이다. px를 사용하여 크기를 설정하면 그 크기는 절댓값이 되어버린다.

하지만 웹 페이지 사이즈의 변동이 많아 크기가 고정되어 버리면 접근성에 안 좋아질 수 있다.

 

보통 웹 브라우저의 기본 폰트 사이즈는 16px로 설정되어 있으며 일부 웹 브라우저는 기본 폰트 사이즈를 확대하는 기능을 제공한다.

기본 폰트 사이즈를 확대 하더라도 px로 설정되어 있는 폰트 사이즈는 변함이 없다.

(ctrl + 휠 키를 사용한 화면 확대는 화면 전체를 확대하는 것이라 가능하다.)

 

rem을 사용하게 된다면 좋은 점

• 웹 브라우저 마다 다른 기본 폰트 사이즈에 대응할 수 있다.
• 저시력자 접근성에 대응할 수 있다.

 

rem을 사용하게 된다면 html의 폰트 사이즈를 기준으로 폰트 사이즈를 계산하게 된다.

기본 폰트 사이즈가 10px이라면 1.6rem = 16px이 되는 것이다.

 

보통 개발하기 쉽게 기본 폰트 사이즈를 10px로 설정하지만 10px보단 62.5%를 사용하라고 한다.

이유는 나도 잘 모르겠다.

 

  html {
    font-size: 62.5%;
  }

 

위와 같이 설정하고 폰트사이즈는 rem 단위를 사용해보도록 하자