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

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

많이들 사용하는 px에서부터 % / em / rem / vh / vw / vmin / vmax / ex / ch / 등이 있다.

호환성 문제도있고 요즘엔 쓰이지 않는 단위도 있으므로 대표적으로 많이 사용되는 3가지에대해 알아보자.

절대값으로 사용 되는 단위이다. 많이 사용되지만 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않다.

부모 태그의 영향을 받는 상대적인 길이다. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어렵다. 반응형 웹사이트에 사용된다. 하지만 권장되지 않는다.

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

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

반응형 웹사이트에 가장 바람직한 단위이다.

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

반응형 홈페이지를 만들때 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으로 작업하면 좋다.

참고 사이트

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

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

프로그래밍 공부 노트