CSS 뷰포트 단위란?
뷰포트(viewport)는 사용자가 웹 페이지를 실제로 보게 되는 브라우저 화면 영역을 의미합니다. CSS에서는 vh(viewport height)와 vw(viewport width) 단위를 사용해 화면 크기에 맞춰 반응하는 스타일을 손쉽게 만들 수 있습니다.
- 1vh = 뷰포트 전체 높이의 1%
- 1vw = 뷰포트 전체 너비의 1%
예를 들어 100vh는 화면 세로 전체, 50vw는 화면 가로 절반에 해당합니다.
뷰포트 높이(vh) 설정하기
요소의 크기를 화면 높이를 기준으로 지정하려면 vh 단위를 사용합니다.
h1 {
font-size: 4.0vh;
}위 코드에서 제목(<h1>)의 글자 크기는 화면 높이의 4%로 설정됩니다. 화면 세로 크기가 변하면 글자 크기도 자동으로 함께 조절됩니다.
뷰포트 너비(vw) 설정하기
화면 너비를 기준으로 크기를 지정할 때는 vw 단위를 사용합니다.
h1 {
font-size: 5.5vw;
}이 경우 제목의 글자 크기는 화면 너비의 5.5%가 되며, 창 크기에 따라 유동적으로 변합니다.
실무에서 유용한 활용 팁
- 풀스크린 섹션: 히어로 배너나 첫 화면을 꽉 채우려면
height: 100vh;를 활용하세요. - 모바일 대응: 모바일 브라우저에서는 주소창이 나타나거나 사라질 때 vh 값이 달라질 수 있습니다. 이럴 때는
dvh(동적 뷰포트 높이) 단위를 함께 고려하면 좋습니다. - 반응형 타이포그래피:
clamp()함수와 vw를 조합하면 최소·최대 크기를 지정하면서 화면에 맞게 유연하게 조절할 수 있습니다.
예:font-size: clamp(1rem, 5.5vw, 3rem);
정리
vh와 vw는 화면 크기에 비례해 요소 크기를 결정하는 강력한 CSS 단위입니다. 픽셀(px)이나 퍼센트(%)만 사용할 때보다 다양한 기기에서 일관된 화면 경험을 제공할 수 있으므로, 반응형 웹 디자인에서 적극적으로 활용해 보세요.