[CSS] 반응형 폰트 단위 em/rem 사용법과 차이점

반응형 폰트 단위 em/rem

css에서 사용되는 단위는 여러 가지가 있습니다.

그중에 오늘은 폰트, 즉 글자의 크기를 결정하는 단위인 em, rem에 대해 알아보겠습니다.

일반적으로 폰트의 크기를 결정하는 단위로 픽셀(px)을 주로 사용합니다. 

하지만 픽셀은 절대적인 단위이기때문에 '반응형' 작업하기에는 부적합합니다.

왜냐하면 반응형 분기점 별로 사이즈를 달리해줘야 하기 때문에 수정해야 할 사항이 많기 때문입니다.

그래서 오늘은 반응형에서 유용하게 사용할 수 있는 em과 rem에 차이점과 사용방법에 대해 알아보겠습니다.

 

---

 

em과 rem은 '상대 단위'입니다.

'절대 단위'인 픽셀과 달리, em과 rem은 기준에 따라 유동적으로 변하는 특징을 가지고 있습니다. 

 

1. rem

rem은 웹에서 가장 최상위 요소인 'html' 크기에 비례하여 크기를 변경합니다.

일반적으로 기준이 되는 값인 html에 폰트사이즈를 지정해준 뒤, 필요한 요소에 사용합니다.

html {font-size:16px} <!-- 최상위요소인 html은 px -->
p {font-size:1.125rem} <!-- 이하 하위 요소는 rem -->
div {margin:2rem}

rem 계산법 

html {font-size:16px}, 자식요소 2rem 일 때

16(최상위요소) X 2(자식요소) = 32px

이러한 방식으로 최상위요소와 자식요소를 곱하여 사이즈를 구합니다.

 

rem 반응형

html {font-size:16px} <!-- 최상위요소인 html은 px -->
p {font-size:1.125rem} <!-- 이하 하위 요소는 rem -->
div {margin:2rem}


@media screen and (max-width : 510px){
html {font-size:13px} <!-- 반응형 일 때 -->
}

반응형에서 사용은 아주 간단합니다. 원하는 반응형 분기점에서 html의 폰트 사이즈를 줄여주면,

하위 요소에 모두 동일하게 적용됩니다.

 

2. em

em은 상위요소의 크기에 영향을 받아 크기가 조절됩니다.

rem은 html 크기였다면 em은 div나, p 등 여러 요소의 크기가 기준이 될 수 있습니다.

div {
 font-size:16px;
 padding:2em
}

div > p {font-size:1em}

div안에 있는 p는 div 값의 크기를 상속받아 16px을 갖게 됩니다.

 

 

결론

그래서 반응형 단위인 rem, em 중 뭐를 쓰면 좋을까? 

가급적 rem을 사용하는 것을 전문가들은 권고하고 있습니다. 왜냐하면 'em' 같은 경우에는 부모 요소, 최상위 요소에 영향을 받기 때문에 변수가 많습니다.

 

그렇기 때문에 반응형 웹사이트 제작 시에 'rem'을 사용하여 처리해주면 되겠습니다.

 

참고 사이트

rem 계산해 주는 사이트 : https://offroadcode.com/rem-calculator

REM Calculator | Umbraco Registered Partner - Offroadcode Limited

em, px 계산해주는 사이트 : http://pxtoem.com

PXtoEM.com: PX to EM conversion made simple.