[CSS] 상대적인 단위, rem
상대적인 단위 rem에 대해 알아봅시다
한 레이아웃으로 모바일까지 잘 보이게 만드는 일명 반응형 웹을 많은 클라이언트가 선호 하게 되면서 어떻게 하면 효과적으로 코드를 사용할 수 있을까 고민을 해왔습니다.
그러면서 절대적인 단위, 상대적인 단위를 알게 되었고 그때그때 구분해서 사용하게 되었습니다.
절대적인 단위라 하면 웹에서 가장 자주 쓰이는게 px 이고 저 또한 자주 사용합니다.
상대적인 단위의 경우에는 em, rem, vh, vw, vmin, vmax, % 등이 있는데 저는 이중에서 rem 을 이야기 해볼까 합니다.
rem
사실 전에는 em도 종종 사용했습니다.
em과 rem는 일단 요소의 폰트 사이즈에 대한 상대적인 값이라는 점에서 동일합니다.
하지만 em은 바로 상위 요소, rem 은 root요소 (html)의 폰트 사이즈라는 점에 대해 차이가 있습니다.
제가 rem을 사용하는 이유는 root요소에 선언한 값으로 전체적인 사이즈를 비율에 맞게 조정이 가능했기 때문입니다.
특히 모바일의 경우에는 디자이너로부터 작업물을 어떤 사이즈로 넘겨 받아야할지 애매한 경우가 있는데, 이럴경우에 rem을 사용했더니 사이즈 관계없이 비율에 맞게 작업이 가능했습니다. 그때 저의 계산법은 아래와 같습니다.
시안 사이즈: 720px * 1280px
콘텐츠 사이즈: 20px * 40px
width: 20/720 * 400/15(viewport 400일때 html의 font-size) = 0.74rem
height: 40/720 * 400/15(viewport 400일때 html의 font-size) = 1.48rem
위와 같은 결과를 스타일시트에 적용시킵니다.
정확하게 떨어지는 경우가 거의 없기에 보통 소수점 셋째자리에서 자릅니다.
최대한 같은 값을 돌출할 수 있도록 하기 위함이고 너무 소수점자리를 길게하면 브라우저가 계산하는데 그만큼 시간을 소요하기 때문입니다.
콘텐츠 사이즈를 시안 사이즈로 나눈이유는 720에 20의 비율을 알기 위해서 이고, 400을 곱한 이유는 보통 500이나 400에서 미디어 쿼리를 사용하기 때문입니다
미디어쿼리로 브레이크를 더 넓은 사이즈부터 잡고 싶으시면 그렇게 하셔도 됩니다.
계산법이 생각보다 쉽고, html에 font-size만 선언해주면 font, padding, margin, width, height 관계없이 동일하게 사용할 수 있어서 편리하다고 느꼈습니다. 모든 속성에 rem을 사용하는 것은 아니고, 넓이의 폭을 계산할때는 %를 많이 사용하고 px도 주로 사용합니다.
하지만 모든 편리한 속성이 그러하듯 rem 속성도 지원하지 않는 브라우저가 있기에 상황에 맞춰 잘 사용해야합니다.
크롬을 제외한 Firefox(2-3.5), Opera(10-11.5), Safari(3.1-4) 브라우저의 오래된 버전에는 지원하지 않습니다.
IE의 경우에는 8이하로는 지원하지 않고, 9나 11의 경우에도 ‘font 속성을 줄여쓰는 경우 ex) font: normal 13px/150% Arial’나 ‘가상 요소를 사용했을 때’에는 지원하지 않습니다.
iOS Safari의 경우에는 4버전 부터 지원하지만 5.0-5.1버전에서는 미디어쿼리와 함께 사용했을때에는 지원하지 않습니다.
위의 주의사항만 잘 인지 하고 사용하신다면 좋을 것 같습니다.
- 잘못된 부분이나 수정이 필요한 부분의 피드백은 언제든 환영입니다.
댓글남기기