[면접질문] px, em, rem, vw, vh 단위 간 차이에 대해 설명해주세요.

px: 절대적 단위

픽셀(px)은 절대적 단위입니다. 어떤 환경에서도 변하지 않는 고정된 단위입니다.

em, rem, vw, vh : 상대적 단위

반면, em과 rem, 그리고 vw, vh는 모두 상대적 단위입니다.

em과 rem

em 단위는 현재 요소의 폰트 크기를 기준으로 상대적으로 크기를 정합니다.

예를 들어, 부모 요소의 폰트 크기가 16px이고 자식 요소의 크기를 2em으로 지정하면, 자식 요소의 크기는 32px이 됩니다.

자기 자신 또는 부모 요소 기준이므로 깊게 중첩되거나 폰트 크기를 상속받는 구조에서 더 유연하게 동작합니다.

다음과 같은 상황에 사용하면 좋습니다:

• 컴포넌트 내부에서 상대적인 크기 조절이 필요할 때(디자인 비율 유지가 중요한 경우)

• 내부 요소가 부모의 폰트 크기를 따라가도록 할 때

• 중첩된 컨텍스트에 따라 동적으로 크기를 조절하고 싶을 때

rem 단위는 ‘root em’의 줄임말로, 문서의 루트 요소(html)의 폰트 크기를 기준으로 합니다.

다음과 같은 상황에 사용하면 좋습니다:

• 전체 사이트의 일관된 폰트 크기 관리

• 여백이나 버튼 크기 등을 텍스트 크기에 맞춰 비례적으로 조절하고 싶을 때

• 다양한 디바이스에서 기본 텍스트 비율 유지하고 싶을 때

  • vw 사용 시 화면이 작아질 때 지나치게 작아져서 가독성을 해치는 경우가 발생.

(주로 텍스트 중심 요소에 사용)

여담: em은 타이포그래피 용어에서 유래된 단어로, 원래는 문자의 'M' 크기(영문 대문자 M의 너비)를 기준으로 하는 단위였습니다. 즉, em은 "M-width"의 줄임말로 보는 것이 일반적입니다. 현대 웹에서는 이 개념이 확장되어, em은 단순히 현재 요소 또는 부모 요소의 폰트 크기를 기준으로 하는 상대 단위로 사용됩니다.

vw, vh (뷰포트 단위)

vw와 vh에서 v는 viewport(뷰포트), w는 width(너비), h는 height(높이)를 의미합니다.

vw와 vh는 각각 뷰포트 너비와 높이의 1%를 의미합니다.

여기서 뷰포트란 브라우저 창에서 실제로 보이는 영역을 말합니다. 즉, 브라우저 창의 크기가 변하면 vw, vh로 지정한 요소의 크기도 함께 변하게 됩니다.

다음과 같은 상황에 사용하면 좋습니다:

• 반응형 웹을 구현할 때. 특히 전체 레이아웃 비율이나 배너, 타이틀 등 큰 UI 영역을 다룰 때 화면 크기에 따라 유동적으로 크기를 조절하기 위해 사용합니다.