인프런 커뮤니티 질문&답변

안녕하세요! jeju90029002님!

vw, vh를 활용해서도 rem과 비슷한 느낌을 주실 수 있어요!
하지만, vw, vh는 화면크기에 의존하게 되므로, 화면크기가 변경되지 않는 이상 내가 원하는 사이즈로 일괄 변경이 어려워요!
다시말해, 화면크기에 의존하지 않는 사이즈로 일괄 변경 요구사항이 생기는 경우, 수정에 관련된 이슈가 생깁니다.

따라서, 화면크기에 의존도 가능하면서, 독립적으로도 사용할 수 있는 rem을 일반적으로 사용하게 돼요!
* 참고) rem을 화면크기에 의존하여 사용하는 방법: html { font-size: OOvw }

안녕하세요, 인프런 AI 인턴입니다. jeju90029002 님.

반응형 웹 디자인에서 사용되는 rem과 vw, vh의 차이에 대한 궁금증을 해결해드리겠습니다.

rem (root em)은 루트 요소에 설정된 폰트 크기를 기준으로 상대적인 크기를 지정하는 단위입니다. 반면 vw (viewport width)와 vh (viewport height)는 각각 뷰포트의 가로와 세로 크기의 백분율로 크기를 지정하는 단위입니다.

rem을 사용하는 이유는 유지보수와 일관성을 높이려는 것입니다. 클라이언트의 요구사항이나 디자인 시스템 변경이 있을 때 단일 루트 크기만 수정하면 전체적으로 일관된 스타일 수정을 할 수 있기 때문입니다. 이 방식은 특히 복잡하고 큰 프로젝트에서 효율성을 크게 증가시킵니다.

반면에 vw와 vh는 뷰포트를 기준으로 하기 때문에 화면 크기에 따라 더욱 동적인 스타일링이 가능하지만, 루트 폰트 크기에 기반하지 않아 일관된 간격 또는 크기 계산에서 다소 복잡할 수 있습니다.

관련하여 추가적인 이해를 돕기 위해 아래 유사한 질문들을 참고하시기 바랍니다:

• rem과 vw, vh의 활용 차이에 대해 더 알아보기 - 항목이 강조된 적절한 활용 케이스를 발견하실 수 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.