[Html] rem, em, px, vw, vh 단위의 차이

• rem(root em), em: 가변 단위. 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀 값으로 변환됨.
• 1em 또는 1rem으로 지정했다면, 브라우저에 의해 16px부터 160px 까지 아니면 기타 다양한 값으로 변환
• 디자인이 유연해짐.

---

• rem → px 변환
• 페이지의 최상위요소(root) 의 폰트 크기가 기준이 되어 변환됨
• 예를 들어, 최상위 요소의 폰트 크기가 10px 이면 10rem은 10*10px = 100px이 됨
• 사용자가 폰트 크기 늘리더라도, 레이아웃은 그대로 보전되고, 텍스트 또한 작은 텍스트에만 어울리는 아주 빽빽한 공간 안에서 찌그러지는 불상사가 생기지 않는다.

---

• em → px 변환
• 스타일을 지정한 요소의 폰트 크기를 곱한 값
• 예를 들어, 어느 한 div의 폰트 크기가 20px이라면, 10em은 200px이 됨.
• 모든 요소가 자동으로 상위 요소로부터 폰트 크기를 상속 받으므로 복잡한 상황이 생길 수 있음.
• 상위 요소의 폰트 크기로 pt, vw같이 상속에 영향 받지 않는 단위를 써서 일일이 지정해줌으로써 해결
• 디자인 요소가 지닌 특별한 상황에 따라 거기에 어울리는 변동성이 요구될 때 사용하면 좋음.

---

• px: 절댓값. 1px은 정확히 1px로 표현됨.
• vw(vertical width): 뷰포트의 너비값 기준 → 1vw: 너비값의 1/100 단위
• vh(vertical height): 뷰포트의 높이값 기준 → 1vh : 높이값의 1/100 단위

  

출처: webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

종합 안내: Rem 그리고 Em, 언제 써야 할까