20230602 [px와 rem]

px 대신 rem을 사용해야 하는 이유?

픽셀을 사용하면 어떤 문제가 있을까?

픽셀은 절댓값을 사용하는 단위이다. 즉, 1px는 고정된 물리적 크기에 해당한다. 다시 말해 모든 것을 원하는 위치에 완벽하게 고정하는 것이다. 그러나 px를 사용하면 사용자의 글꼴 크기 설정을 무시해 버리는 것과 같이 심각한 접근성 문제가 발생할 수 있다.

사용자는 루트 글꼴 크기를 변경하는 대신 브라우저의 확대 / 축소 설정을 바꿀 수도 있다. 이렇게 하면 픽셀 문제가 발생하지 않으며 설정값에 따라 화면의 모든 것이 조정된다. 그러나 우리는 사용자가 브라우저에서 어떤 설정을 변경했는지 미리 알 수 없다. 여기에 rem을 사용하면 확대 / 축소 뿐만 아니라 루트 글꼴 크기 변경에도 유연하게 반응한다.

rem을 사용하면?

화면의 계층 구조 내에서 다른 요소와 어우러지도록 원하는 글꼴 크기를 지정하면서도 크기를 변경하고 싶은 사용자의 요구에 유연하게 반응할 수 있다.

em과 rem

공통점 : em과 rem은 둘 다 CSS의 font-size 속성값에 비례해서 결정되는 상대 단위이다.

차이점: 정확히 어디에 있는 font-size 속성값인지에 따라 차이가 발생한다.

• em의 경우 : 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 된다.
• rem의 경우 : 최상위 요소의 font-size 속성값이 기준이 된다. HTML에서 최상위 요소는 이다. 따라서 이때 rem의 경우 html 요소의 font-size 속성값이 기준이 된다.
  

em과 rem 둘 중 어떤 것을 쓸까?

많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있다. 왜냐하면 em의 경우 그것이 실제로 px로 변환될 때 영향을 주는 변수가 많아지기 때문에, em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지 보수가 힘들어지는 경향이 있기 때문이다.

많은 사람들이 CSS 기본 설정으로 62.5%를 쓰는 이유?

html {
  font-size: 62.5%;
}

62.5% ?

대부분의 브라우저들이 기본 폰트 크기로 16px를 사용한다. 위와 같이 html 블럭에 font-size를 62.5%로 지정하면 기본 폰트 크기가 10px로 바뀐다. 개발자들은 브라우저의 기본 폰트 크기를 10px로 바꾸고 작업하길 선호한다. 이처럼 선언해두면 px 단위를 쉽게 em, rem단위로 바꿀 수 있다.

여기까지만 세팅하면 페이지의 텍스트가 10px로 작아진다. 이때 본문 글꼴 크기를 1.6rem으로 설정하면 페이지에 표시되는 모든 텍스트의 유효 글꼴 크기가 16px로 축소되어 이 문제를 해결할 수 있다.

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}