[CSS] vw, vh

반응형 웹을 만들다 보면, 화면 크기에 맞춰 요소 크기를 자동으로 조절하는 것이 중요해요
이때 많이 사용하는 단위가 %인데, %는 부모 요소의 크기에 따라 변하는 특징이 있어요

그럼 부모 요소의 영향을 받지 않고, 브라우저 크기에 따라 자동으로 변하는 단위는 없을까요?
바로 vw, vh 같은 뷰포트 단위입니다!

---

📌 뷰포트(Viewport)란?

뷰포트는 웹 브라우저에서 보여지는 화면 영역을 의미해요
즉, 우리가 보는 화면 크기를 기준으로 크기를 조절할 수 있도록 도와주는 단위가 vw, vh입니다

 

[ 단위 정리 ]

vw	뷰포트 너비(가로)의 1/100 (1vw = 브라우저 너비의 1%)
vh	뷰포트 높이(세로)의 1/100 (1vh = 브라우저 높이의 1%)
vmin	너비 또는 높이 중 작은 값의 1/100
vmax	너비 또는 높이 중 큰 값의 1/100

[ 예제: 브라우저 크기에 따른 값 변화 ]

브라우저 크기가 가로 1000px, 세로 500px이라고 가정해볼게요.

100vw	1000px × 100%	1000px
100vh	500px × 100%	500px
1vw	1000px × 1%	10px
1vh	500px × 1%	5px
1vmin	500px(작은 값) × 1%	5px
1vmax	1000px(큰 값) × 1%	10px

[ 실제 예제 코드 ]

.box {
  width: 50vw;  /* 브라우저 너비의 50% */
  height: 30vh; /* 브라우저 높이의 30% */
  background-color: skyblue;
}

👉 브라우저 크기에 따라 width와 height가 자동으로 조절돼요!

 

📌 언제 사용하면 좋을까요?

✔️ 전체 화면을 차지하는 배경 이미지
✔️ 반응형 레이아웃을 만들 때
✔️ 브라우저 크기에 따라 글씨 크기를 자동 조절할 때

---

📝 마무리

뷰포트 단위를 사용하면 반응형 웹을 만들 때 훨씬 편리해요!
특히 부모 요소 크기에 영향을 받지 않아서, 브라우저 크기만 고려하면 돼요!!
이제 vw, vh 단위를 활용해서 더 유연한 웹페이지를 만들수 있습니다