CSS 작업을 할 때 다양한 단위를 사용할 수 있다. 대표적으로 고정단위인 px이 있다. 하지만 px 대신 유동단위를 사용하면 더 유연하게 스타일을 적용할 수 있다.

vw / vh

• 1vw = viewport 너비의 1% (500px 너비 => 1vw = 5px)
• 1vh = viewport 높이의 1% (800px 높이 => 1vh = 8px)

❣️ 활용법

• 요소를 뷰포트 영역 전체를 차지하게 하거나, 그 일부분만 차지하기 하는데 유용하게 쓸 수 있다.
• 100vw = 뷰포트의 전체 너비 / 100vh = 뷰포트의 전체 높이

vmin / vmax

• vmin과 vmax도 viewport를 기준으로 하는 단위이다.
• vmin는 너비와 높이 중 더 작은 값을 적용하고, vmax는 더 큰 값을 적용한다.
• ex) 너비 600px, 높이 1200px => vmin = 6px / vmax = 12px

👀 활용법

• 언제든 화면에 보이는 요소를 쉽게 만들 수 있다.
• 요소 : 80vw x 80vw
  • 만약 viewport가 1000px x 500px라면 요소의 크기는 800px x 800px가 되므로 잘려서 보이게 된다.
• 요소 : 80vmin x 80vmin
  • viewport가 1000px x 500px라면 요소의 크기는 400px x 400px가 되어 화면에 요소 전체가 잘 보인다.

em / rem

• em = 부모의 폰트 크기에 비례하는 단위
  • 1em = 부모의 폰트 크기
  • 2em = 부모의 폰트 크기 * 2
• 1rem = 최상위 요소인 html의 폰트 크기에 비례하는 단위
  • 1em = html의 폰트 크기
  • 2em = html의 폰트 크기 * 2
• 대부분 브라우저에서 폰트 크기의 default 값은 16px이다.

👉 활용법

• html의 font size만 분기점마다 변경하여 요소들의 font size들을 쉽게 변경할 수 있다.
• 자식 요소에 em 단위를 이용하여 폰트 크기를 지정하면 부모 폰트 크기에 따라 자식 요소의 폰트 사이즈도 바뀐다.
• 만약 부모 요소의 폰트 사이즈를 rem 단위로 지정했다면 html 폰트 사이즈에 따라 부모 요소의 폰트 사이즈가 변경된다.
• 이제 분기점마다 html의 폰트 크기만 변경하면 하위 요소들의 폰트 크기를 따로 변경하지 않아도 된다.