px 대신 rem을 사용해야 하는 이유
대부분의 브라우저에서 사용자는 기본 브라우저 글꼴 크기를 기본값으로 설정할 수 있습니다(일반적으로 16px). 따라서 사용자가 기본값을 20px로 설정하면 모든 글꼴 크기가 그에 따라 확장되어야 합니다. 그러나 웹 사이트에서 글꼴 크기를 픽셀 단위로 설정한 경우, 브라우저를 통한 사용자 설정값이 적용되지 않습니다. (예: 30px로 설정된 머리글은 무슨짓을 해도 항상 30px이 됩니다.)
물론 글꼴 크기를 픽셀 단위로 설정한다하더라도. 사용자는 브라우저창의 크기조절 (ctrl + 휠, 혹은 +,- 키)를 사용하여 화면 전체 요소들을 확대 / 축소할 수 있긴 합니다. 하지만 브라우저의 기본기능인 기본글꼴크기조절 기능은 사용할 수가 없죠.
rem이란 ?
rem 은 오직 html 태그의 글자 크기만 참조한다. 다른 모든 태그의 글자 크기는 신경쓰지 않는다.
rem 을 사용할 때는 글자 크기를 참조하다보니 계산하기 쉽게 참조 대상의 글자 크기를 10 픽셀로 맞춰놓고 진행하는 경우가 많다. html 태그의 경우, 브라우저 기본 설정 기준에서 기본 16 픽셀을 갖고 시작하는데 여기에 62.5% 를 곱해주면 10 픽셀로 맞춰놓고 시작할 수 있다.
1.6rem * 10px = 16px
html {
font-size: 62.5%;
}이러면 html 은 10 픽셀로 맞춰지게되고 하위 태그에서 rem 을 사용하는 경우 10 배수로 계산하면 되니 훨씬 편하다.
그럼 모든 px를 rem으로 변환하면 되나?
여러 브라우저에서 브라우저 줌을 사용할 경우, REM 단위나 픽셀 개념이나. 두가지 모두 미디어 쿼리에 문제가 생깁니다. 정해진 해상도는 같은데 배율이 엉망이 되기 때문이죠. 그렇기 때문에 EM 단위가 현재로서는 우리에게 가장 좋은 대안입니다. REM 단위는 웹 브라우저의 확대기능 사용시 픽셀보다 더 많은 문제가 생기기 때문에, EM보다 더 좋다고 말하기는 어려운거죠.
rem과 em의 차이는 무엇인가?
em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 됩니다. 반면에 rem에서 r은 root, 즉 최상위 요소 font-size 속성값 의미합니다. HTML에서 최상위 요소는 <html> 입니다. 따라서 rem 경우, html 요소의 font-size 속성값이 기준이 됩니다.
PIXEL, REM , EM 단위 비교
1) PIXEL 단위는 브라우저의 기본폰트크기 설정이 적용되지 않는다. 그러나 브라우저 확대시 별 문제가 없다.
2) REM 단위는 브라우저의 기본 폰트크기 설정은 적용된다. 그러나 브라우저 확대시에는 픽셀보다 문제가 많이 생긴다.
3) EM 단위는 상대크기 개념을 사용해서 사용하기가 어렵다. 그러나 PIXEL이나 REM 단위에 비해 브라우저 확대시에도 문제가 적다.
미디어쿼리를 사용하게되면 이 문제는 좀 더 까다로워집니다. EM과 픽셀의 경우 미디어쿼리 상에서 개별 단위가 가진 소수점 표기단위의 차이로 인해 문제가 생기죠. 예를 들어 동일한 CSS 코드 줄에서 최소, 최대 (min, max) 단위의 미디어쿼리를 사용하고, 사용자가 화면 확대, 혹은 기본 폰트크기를 수정하는 경우. 문제가 발생하게됩니다. (0.000 단위의 크기변환중 미세단위를 브라우저가 인식하지 못해서 결과값이 이상하게 나올 가능성이 있다는 얘기)
px이 제일 나을수도 있다.
사용자가 글자크기변경을 사용하지 않는다는 전제 하에
가장 우리가 생각한 결과물이 그대로 나오는 것은 px일 수도 있겠다..
참고자료
WATCHA 개발 지식 — px | em | rem
웹디자인에 px 단위를 쓰면 안되는 이유 (번역본)
CSS 상대 단위 - em과 rem
