기타/미분류

Css 폰트 크기 (pt px em % 변환표)

em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다. 만약에 1em 혹은 1rem 값을 지정했다면, 브라우저에 의해 16px부터 160px 까지, 아니면 기타 다양한 값으로 변환될 수 있다. 반면에 px 값은 브라우저에선 절대값으로 인식해서, 말 그대로 1px은 항상 정확히 1px로 표시된다.

EM

em 단위를 쓰면 변환되는 픽셀값은 스타일을 지정한 요소의 폰트 크기를 곱한 값이 된다. 예를 들어, 어느 한 div의 폰트 크기가 18px이라면, 10em은 180px과 같다. 즉, 계산은 10 x 18 = 180이 된다.

REM

rem 단위를 쓰면, 변환된 픽셀 크기는 페이지 최상위(root) 요소, 그러니까 html 요소의 폰트 크기가 기준이 된다. 이 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 바로 마지막 변환된 값임.

예를 들어, 최상위 요소의 폰트 크기가 16px이면, 10rem은 160px가 된다

HTML의 폰트 크기가 지정되지 않았다면 브라우저에서 설정된 기본 폰트 크기를 상속받게 된다. 만약에 사용자가 브라우저의 폰트 크기를 18px로 키웠다면, 최상위 요소의 폰트 크기는 18px이 된다. 이제 10rem은 180px로 변환된다.

rem 단위가 제공하는 가장 커다란 장점은 단지 요소의 상속 특성에 상관없이 일관된 크기를 돌려주는 것뿐만이 아니다. 오히려, 과거 px 단위를 썼던 곳에 대신 rem 단위를 사용함으로써 사용자가 설정한 폰트 크기에 따라 사이트에 배치된 모든 구성 요소가 적절하게 반응하는 길을 제공한다는 점이 가장 큰 이유임.

이런 이유로 rem 단위를 사용하면, 사용자가 브라우저의 기본 폰트 크기를 어떤 값으로 설정했든 간에, 이에 따른 가변 텍스트 크기에 맞춰서 사이트 레이아웃이 적절히 표시될 수 있게 된다.