스타일 폰트 단위 rem em 의 차이, vw 언제 어떻게 사용하면 좋을까

rem, em의 차이 그리고 vw

요즘 애플 사이트를 클론 코딩 해보고 있는중입니다. 클론 코딩 중에 제가 잘 사용하지 않는 단위들을 많이 사용하게 되어서 간단하게 정리해봅니다. 저는 퍼블리싱 작업을 할 때 받아온 디자인에 간편하게 그리고 최대한 오차없이 맞추기 위해 고정 px을 많이 사용해왔습니다. 해서 em, rem과 같은 단위는 상대적 단위 혹은 계산을 한번 더 해야하는 단위로 생각되어 단 한번도 작업에 사용해본적이 없는데요. 이참에 좀 더 깊게 알아두면 좋을 것 같습니다. 

 

rem 과 em

개발자 도구를 켜서 스타일을 보면 1.2rem 과 같은 단위들을 한번쯤은 보셨을 것 같습니다.

이 rem 의 의미는 무엇일까요?

rem 이란, The root element's font-size 라는 의미로 여기에서의 root는 html을 뜻합니다. 

rem 의 기준은 html 의 폰트 사이즈 입니다. 

rem 을 정확히 알고 사용하려면 html의 font-size를 알아야 한다는 의미입니다. 

html {
    font-size: 14px;
}
 
.desc {
    font-size: 3rem;
    margin-right: 0.2em;
}

가령, 위처럼 html의 font-size가 14px 이라고 하고 div.desc 라는 요소에 font-size 를 3rem 이라고 가정해보겠습니다. 그럼 div.desc의 font-size 는 몇 px 일까요? 

html 의 font-size 14 (px) 에 3 (rem) 을 곱해주면 됩니다. 즉, 14*3 = 42 이 경우 3rem은 42px이 됩니다. 

 

그렇다면 em의 기준은 어디일까요? 

em 이란 my parent element's font-size 라는 의미로 root 가 아닌 parent가 기준이 되는데요, 여기서 parent 란 꼭 상위 요소(부모 요소)가 아니라 자기 자신에게 고정 font-size 가 있다면 자신의 font-size가 기준이 됩니다. 

그럼 위의 예시에서 div.desc 의 margin-right 의 0.2em 은 몇 px 일까요? 이 때 .desc 의 고정 font-size 3rem = 42px 이 기준이 됩니다. 

해서 desc의 font-size 42 (px) 에 0.2 (em) 을 곱해주면 됩니다. 즉, 42 * 0.2 = 8.4 이 경우 0.2em은 8.4 px 입니다. 

 

이렇게 rem 과 em 은 각각 html 의 font-size 와 parent (자기 자신 포함) 를 기준으로 고정 값을 주게 됩니다. 

 

마지막으로 vw를 살펴보겠습니다.

결론부터 말하면 vw는 반응형 font-size에 매우 유용합니다. 

vw는 viewport 가 기준이 되는데요, viewport란 display 상 표시 영역으로 저희가 ie나 크롬 브라우저를 켤 때 꽉 차게 보기, 작게 보기 등 조절할 수 있는데 보여지는 이 단위가 viewport 입니다. 

저는 viewport는 div 너비를 줄 때 많이 사용해보았지만 font-size에 적용해본적은 없는데, 애플 클론 코딩을 하면서 큰 텍스트의 경우 이렇게 반응형 처리 하면 간단하다는 것을 알았습니다. 

.section {
    font-size: 9vw;
}

위와 같은 예시에서의 9vw 는 기준이 viewport 이기 때문에 보여지는 display의 9%가 글자의 크기가 됩니다.