본문 바로가기
language/css

🧱 뷰포트 단위(vw, vh)와 max-width 사용 전략

by 죄니안죄니 2025. 5. 12.

🧱 뷰포트 단위(vw, vh)와 max-width 사용 전략

반응형 웹에서 유연한 크기 조절을 위해 사용하는 핵심 단위가 vw, vh입니다. 하지만 무조건 뷰포트 단위만 사용하면 오히려 가독성 저하나 요소 깨짐이 발생할 수 있으므로, max-width와의 조합이 매우 중요합니다.


1️⃣ vw, vh 단위란?

  • vw: viewport width – 브라우저 너비의 1%
  • vh: viewport height – 브라우저 높이의 1%

.hero {
  width: 100vw;  /* 전체 너비 */
  height: 100vh; /* 전체 높이 */
}

👉 전체 화면을 차지하는 섹션, 배경 이미지 등에 자주 사용됩니다.


2️⃣ 뷰포트 단위의 장점

  • 브라우저 크기에 따라 실시간으로 반응
  • 반응형에서 픽셀 단위보다 유연함
  • 고정된 크기가 없는 요소의 크기 제어 가능

3️⃣ 뷰포트 단위의 한계

  • 글자가 너무 작거나 커질 수 있음 → 가독성 저하
  • iOS 모바일에서 주소창 문제100vh 사용 시 레이아웃이 밀릴 수 있음

.text {
  font-size: 5vw; /* ❌ 작은 화면에서 너무 작아질 수 있음 */
}

해결책: clamp()max-width 조합 사용


4️⃣ max-width를 활용한 안정적인 조합


.container {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
}

👉 화면이 클 땐 max-width로 제한, 작을 땐 vw로 유연하게 대응


5️⃣ clamp() 함수로 텍스트 유동 조절


.title {
  font-size: clamp(1rem, 2.5vw, 2rem);
}
  • 최소값: 1rem
  • 중간값: 2.5vw
  • 최대값: 2rem

👉 화면 크기에 따라 글자 크기가 부드럽게 반응하지만, 너무 작거나 커지지 않음


6️⃣ 실전 패턴 요약

  • 전체 영역 배경: width: 100vw; height: 100vh;
  • 중앙 정렬 + 최대폭 제한: width: 90vw; max-width: 1200px;
  • 텍스트 유동 크기: clamp()로 조절

📌 요약 정리

  • vw/vh는 뷰포트 기준의 유연한 단위
  • 가독성과 레이아웃 보호를 위해 max-width 또는 clamp()와 함께 사용
  • 특히 텍스트에는 단독 사용보다 조합 전략이 중요

📌 다음 글 예고

다음 글: “모바일 퍼스트 디자인 전략 – 어떤 순서로 설계할까?”에서는 모바일 퍼스트 접근법의 이점과 실제 설계 순서를 소개합니다.

댓글