rem vs vw

css로 상대 단위를 이용해 계산을 할 때 어떤 단위를 사용하는 것이 좋을까요?
우선 rem과 vw의 의미가 무엇인지 알아보겠습니다.

rem

• 상대 단위
• 최상위 요소의 폰트 크기를 기준으로 1rem이 정해짐
• 최상위 요소의 폰트 크기가 달라지면 rem의 크기도 자연스럽게 바뀜
• 최상위 요소의 폰트 크기가 16px이면 1rem도 16px임

vw

• 상대 단위
• 뷰 포트의 너비 즉, 브라우저 화면의 너비를 의미함
• 브라우저의 너비에 따라 값이 변하는 단위(뷰 포트 너비의 %)
• 뷰 포트의 너비가 1900px이면 100vw도 1900px임

위의 특징을 보면 두 단위의 차이는 어떤 것을 기준으로 하느냐일 뿐이고, 상대 단위기 때문에 그 기준의 값이 변한다면 같이 변한다는 것을 알 수 있죠.

단, rem의 경우 루트 요소 즉, html태그의 폰트 사이즈에 영향을 받는데, 이를 이용하기 위해서는 미디어 쿼리를 이용할 수 밖에 없습니다. 이유는 html 폰트 사이즈를 변화시키기 위해서는 개발자가 직접 값을 지정해줘야 하기 때문이죠.

하지만, vw의 경우 뷰포트의 너비에 영향을 받으므로 따로 미디어 쿼리를 사용할 필요는 없습니다. 뷰포트는 개발자가 정할 수 있는 값이 아니니까요. 그렇기 때문에 정밀한 값을 넣어주기 어려울 수 있습니다. 웹 페이지를 보는 이용자의 뷰포트의 크기를 알 수 없기 때문이죠. 하지만 미디어 쿼리 없이도 뷰 포트에 따라 크기 값이 바뀌기 때문에 반응형 디자인을 만들 수 있죠.

이것들을 잘 고려하면 반응형 디자인을 만드는데 도움이 될 것입니다.