<title>🏔️ 히어로 높이 비율 가이드

뷰포트 높이 (px)

히어로 높이 비율 (뷰포트의 %)

히어로 안 콘텐츠 블록 높이 (px, 없으면 비워 두기)

히어로 높이 (소수 2자리)

적용한 식-

첫 화면에 보이는 다음 섹션-

히어로를 끝까지 보려면 스크롤-

히어로 안 상하 여백 합 (소수 2자리)-

위아래 균등 배분 시 한쪽 여백-

붙여 쓰는 CSS

히어로 비율을 px으로 바꿔 확인하는 방법

히어로 높이를 80vh로 잡을지 100vh로 잡을지 고민하는 이유는 대개 하나입니다. 다음 섹션이 첫 화면에 걸쳐 보이게 할지 말지입니다. 뷰포트 높이와 비율을 넣으면 히어로가 실제 몇 px인지, 그 아래 다음 섹션이 몇 px 보이는지, 비율을 100% 넘게 잡았다면 히어로 자체를 보려고 얼마나 스크롤해야 하는지 나옵니다. 히어로 안 콘텐츠 블록 높이를 넣으면 남는 상하 여백과 균등 배분 시 한쪽 여백도 함께 계산합니다.

계산은 히어로 = 뷰포트 높이 × 비율 ÷ 100이고 적용한 식을 결과 줄에 출력합니다. 다음 섹션 노출량은 뷰포트 − 히어로를 0 미만으로 내려가지 않게 자른 값, 히어로 초과분은 히어로 − 뷰포트입니다. 히어로와 뷰포트가 같은지는 소수 1자리로 맞춘 뒤 비교하므로 표시된 숫자와 안내 문구가 어긋나지 않습니다. 2026년 10월 기준 CSS 문법으로 vh 기반 코드를 함께 만들어 줍니다.

이 도구는 권장 비율을 제시하지 않습니다. 히어로를 몇 vh로 하라는 공인 기준은 없고, 서비스 성격과 첫 화면에 담을 정보량에 따라 달라집니다. 모바일에서 주소창이 숨으며 vh가 변하는 동작, 이미지 비율에 따른 잘림, 스크롤 유도 애니메이션은 다루지 않습니다.

자주 묻는 질문

히어로는 몇 vh가 적당할까?

공인 기준이 없어 이 도구도 권장값을 제시하지 않습니다. 비율을 바꿔 가며 다음 섹션 노출량을 보고 첫 화면에 무엇까지 담을지 직접 정하는 편이 낫습니다.

vh를 쓰면 모바일에서 값이 흔들릴까?

주소창이 숨거나 나타나면서 뷰포트 높이가 바뀌어 100vh가 화면보다 크게 잡히는 경우가 있습니다. 이 도구는 입력한 고정 높이로만 계산합니다.

상하 여백이 '콘텐츠가 더 큼'으로 나오면 어떻게 할까?

콘텐츠 블록이 히어로 높이보다 커서 여백이 남지 않는 상태입니다. 비율을 올리거나 블록 높이를 줄여야 하며 이 도구는 모자란 px만 알려 줍니다.

🏔️히어로 섹션 높이 비율 가이드

관련된 도구

접힘선 위 핵심 콘텐츠 배치 가이드

화이트스페이스 비율 계산기

히어로 비율을 px으로 바꿔 확인하는 방법

자주 묻는 질문

관련된 도구

접힘선 위 핵심 콘텐츠 배치 가이드

화이트스페이스 비율 계산기

히어로 비율을 px으로 바꿔 확인하는 방법

자주 묻는 질문

같은 카테고리 도구