🧱 뷰포트 단위(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()
와 함께 사용 - 특히 텍스트에는 단독 사용보다 조합 전략이 중요
📌 다음 글 예고
다음 글: “모바일 퍼스트 디자인 전략 – 어떤 순서로 설계할까?”에서는 모바일 퍼스트 접근법의 이점과 실제 설계 순서를 소개합니다.
'language > css' 카테고리의 다른 글
🎨 텍스트 스타일링 속성 총정리 – font, line-height, text-align, white-space (0) | 2025.05.15 |
---|---|
🧱 모바일 퍼스트 디자인 전략 – 어떤 순서로 설계할까? (1) | 2025.05.12 |
🧱 반응형 웹의 핵심 – media query 기본 사용법과 패턴 (0) | 2025.05.12 |
🧱 CSS float의 역사와 사용법 (그리고 지금 왜 잘 안 쓰는지) (1) | 2025.05.12 |
🧱 Grid Layout 완전 정복 – 1차원 vs 2차원, 실전 예제 (0) | 2025.05.12 |
댓글