오늘 읽은 링크 출처: yeoninim.tistory
반응형 작업을 위한 폰트 단위 em / rem 사용
css에서 사용하는 단위는 여러가지가 있다.
가장 많이 사용하고 있는 px를 비롯해 %/em/rem/vh/vmin/vmax/ex/ch/ 등이 있다.
여기서 IE지원문제가 있는데 IE구버전에서 지원되지 안흔ㄴ 단위들이 있기 때문에 공공기관 사이트를 작업하는 일을 하게 된다면 과감히 포기해야한다.
PX은 절대값으로 사용되는 단위이다.
고정된 값이기 때문에 사용하기 편하지만, 반응형 웹사이트를 만들때는 적절하지 않은것 같다.
em
부모 태그의 영향을 받는 상대적인 길이. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어려울 수 있다.
반응형 웹사이트를 작업할때 많이 사용된다.
rem
rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이를 말한다.
즉 html요소에 font-size를 고정값으로 지정해두면 그 비율에 따라 크기가 계산된다.
rem은 IE9버전까지 지원이 된다.
반응형 홈페이지를 만들때 px로 작업을 하면 브레이크 포인트마다 일일이 찾아서 px값을 수정해야 하는 엄청난 수고를 하게된다.
반응형 만들때 주로 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단위의 크기가 전부 변경되기 때문에 편리하다.
