[CSS] 반응형 작업을 위한 폰트 단위 em / rem 사용

반응형 작업을 위한 폰트 단위 em / rem  사용

css에서 사용 하는 단위는 여러가지가 있다.

가장 많이 사용하고 있는 px를 비롯해  % / em / rem / vh / vw / vmin / vmax / ex / ch /  등이 있다.

 

요즘엔 사용하지 않는 것들도 있고 새롭게 떠오르는 단위도 있고..IE버전 지원 문제로 외면 받는 단위도 있다.

 

여기서도 IE지원 문제가 있다.

IE구버전에서 지원 되지 않는 단위들이 있기 때문에 공공기관 사이트를 작업하는 일을 하게 된다면 과감히 포기해야한다.

 

이 중에서 대표적인 세가지만 알아보겠습니다.

 

px

절대값으로 사용 되는 단위이다. 웹디자이너를 비롯한 디자이너들이 가장 많이 사용하고 디자인을 넘겨 받을때에도 px로 작업해서 넘겨주고 있어 정말 많이 사용 되는 단위이다.

고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않은것 같다

 

em

부모 태그의 영향을 받는 상대적인 길이. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어려울 수 있다.

반응형 웹사이트를 작업할때 많이 사용 된다.

 

rem

rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이를 말한다.

즉 html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산된다.

rem은 IE9 버전까지는 지원이 된다.

(댓글로 헷갈려 하시는 분이 계시네요..IE9 ~ IE11 버전까지 지원합니다._201223)

 

 

반응형 홈페이지를 만들때 px로 작업을 하면 브레이크 포인트 마다 일일이 찾아서 px값을 수정해야 하는 엄청난 수고를 하게 된다.

 

px는 절대값으로 사용 되는 단위이기 때문에 반응형 홈페이지를 작업할때는 불편하고 문제가 되게 때문에 em / rem 을 사용 하는 것이 좋은 것 같다

 

이 중에서 rem의 사용을 권장한다.

rem은 html에서 font-size를 정의 해 놓으면 그 사이즈를 기준으로 계산이 되기 때문에 이해 하기 쉬워 사용하기도 편합니다.

 

html에서 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다.

html의 기본 시스템 사이즈는 { font-size:16px;} 이다.

 

html { font-size:16px; } 에서 

16px은 1rem, 

17px은 1.063rem이 된다.

이렇게 되면 계산하기 어렵기 때문에 rem을 계산해주는 사이트를 이용하면 되는데..

 

더 쉬운 방법은 html { font-size:62.5%; }, 또는 html { font-size:10px; }로 하면 

10px은 1rem,

12px은 1.2rem,

14px은 1.4rem 이 되기 때문에 따로 계산할 필요가 없어 px을 사용 할때 처럼 사용 할 수 있어 편리하다.

 

rem이 반응형 홈페이지에 사용되는 이유는 

미디어쿼리로 css를 처리할때 브레이크 포인트에서 html의 폰트사이즈만 변경 해주면 하위 rem단위의 크기가 전부 변경 되기 때문에 편리하다.

 

 

이미 반응형 두개를 만들면서 엄청난 노가다를 해봤는데 진작 알았다면....어렵게 작업하지 않았을 텐데....너무 아쉽단 생각이 든다.

 

font-size 이외에도 margin / padding도 rem으로 작업하면 좋다고 한다.(210225 추가)

margin / padding는 rem으로 할 경우 의도치 않은 문제가 발생한다고 하네요.

크롬에서 폰트사이즈와 화면을 확대/축소 할 수 있는 설정이 있는데 이렇게 되면 단순히 폰트 크기만 변경 했을 뿐인데

margin / padding 값이 커져서 데스크탑에서 모바일화면으로 보게 되는 현상이 발생 할 수 있다고 하네요.

 

 

참고 사이트

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

 

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