CSS 고급 기초

CSS 뷰포트 단위 (vw, vh 등)

CSS 뷰포트 단위 (vw, vh 등) — 고급

뷰포트 단위 (vw, vh 등)

1. 도입 (왜 배워야 하는가)

웹 개발에서 다양한 화면 크기와 해상도에 대응하는 것은 필수입니다. 뷰포트 단위(vw, vh, vmin, vmax)는 화면 크기에 비례하여 요소의 크기를 설정하는데 매우 유용한 도구입니다. 이를 통해 반응형 웹 디자인을 구현할 수 있으며, 다양한 장치에서 일관된 사용자 경험을 제공할 수 있습니다. 만약 이러한 단위를 이해하지 못한다면, 모바일 기기와 데스크톱에서 다른 레이아웃을 수동으로 조정해야 하며, 이는 시간과 노력의 낭비로 이어질 수 있습니다.

2. 핵심 개념 설명

뷰포트 단위는 브라우저의 뷰포트(사용자가 현재 보고 있는 웹 페이지의 가시 영역)를 기준으로 설정되는 크기 단위입니다.

단위	설명
vw	뷰포트 너비의 1%
vh	뷰포트 높이의 1%
vmin	vw와 vh 중 작은 값
vmax	vw와 vh 중 큰 값

예를 들어, vw를 사용하는 것은 마치 자동차의 속도계가 현재 속도를 기준으로 표시되는 것처럼, 브라우저의 너비를 기준으로 요소의 크기를 자동으로 조정하는 것입니다. 이는 다양한 화면 크기에서 일관된 디자인을 유지하는 데 도움이 됩니다.

3. 기본 코드 예제

아래는 뷰포트 단위를 사용하여 텍스트 크기를 설정하는 간단한 코드입니다.

body {
    font-size: 2vw; / 뷰포트 너비의 2%에 해당하는 폰트 크기 /
    background-color: #f0f0f0; / 배경색 설정 /
    text-align: center; / 텍스트를 중앙 정렬 /
}

h1 {
    font-size: 10vh; / 뷰포트 높이의 10%에 해당하는 폰트 크기 /
    color: #333; / 텍스트 색상 설정 /
}

실행 결과:

화면의 너비에 따라 텍스트 크기가 조정됩니다.

코드 동작 설명:

body의 font-size를 2vw로 설정하여, 뷰포트 너비의 2% 크기로 폰트가 조정됩니다.
background-color로 부드러운 회색 배경을 설정합니다.
text-align: center로 텍스트를 화면 중앙에 배치합니다.
h1의 font-size를 10vh로 설정하여, 뷰포트 높이의 10% 크기로 제목이 조정됩니다.
color 속성으로 제목의 텍스트 색상을 어두운 회색으로 설정합니다.

4. 실전 활용 예제

쇼핑몰의 배너 이미지

- 쇼핑몰에서 배너 이미지를 화면에 꽉 차게 만들고 싶을 때, vw를 활용하여 배너의 너비를 설정할 수 있습니다.

   .banner {
       width: 100vw; / 뷰포트 너비의 100% /
       height: 50vh; / 뷰포트 높이의 50% /
       background-image: url('banner.jpg'); / 배너 이미지 설정 /
       background-size: cover; / 이미지가 요소를 가득 채우도록 설정 /
   }

모바일 네비게이션 바

- 모바일 화면에서는 네비게이션 바의 높이를 vh로 설정하여, 화면 크기에 따라 동적으로 조정할 수 있습니다.

   .navbar {
       height: 10vh; / 뷰포트 높이의 10% /
       background-color: #333; / 배경 색상 설정 /
       color: white; / 텍스트 색상 설정 /
   }

5. 흔한 실수와 주의사항

vw와 vh의 혼동

- 실수: vw를 사용해야 하는데 vh를 사용하여 레이아웃이 엉망이 되는 경우. - 올바른 코드:

     .element {
         width: 50vw; / 뷰포트 너비의 50% /
     }

단위 오타

- 실수: vh 대신 vhh와 같이 잘못 입력하는 경우. - 올바른 코드:

     .element {
         height: 20vh; / 뷰포트 높이의 20% /
     }

6. 정리

뷰포트 단위(vw, vh)는 반응형 디자인에 필수적입니다.
다양한 화면 크기에 적응할 수 있는 유연한 UI를 제공합니다.
뷰포트 단위의 올바른 사용은 사용자 경험을 향상시킵니다.
다음에 학습할 주제로는 CSS Grid와 Flexbox를 추천합니다. 이 두 가지는 레이아웃을 구성하는 데 매우 유용합니다.

학습