💡 CSS 100vh vs 100% 제대로 이해하고 쓰기

CSS에서 높이를 설정할 때 가장 자주 쓰는 단위인 100vh와 100%.
비슷해 보이지만 둘은 동작 방식이 완전히 다릅니다.

이번 글에서는 100vh와 100%의 차이,
예제 코드, 실제 동작 방식,
그리고 자주 하는 실수와 해결법까지 모두 정리해볼게요!

---

✅ 1. 100vh란?

vh는 Viewport Height의 약자로, 브라우저 화면 높이 기준입니다.

• 100vh = 브라우저 화면 전체 높이
• 50vh = 브라우저 화면의 절반 높이

.section {
  height: 100vh;
}

📌 위 코드는 .section 요소를 브라우저 화면 전체 높이만큼 채웁니다.

---

✅ 2. 100%란?

100%는 부모 요소의 높이를 기준으로 동작합니다.

.parent {
  height: 500px;
}

.child {
  height: 100%;
}

📌 이 경우 .child는 정확히 500px 높이가 됩니다.

❗ 주의: 부모 요소에 height가 없으면, 100%는 아무 효과가 없습니다.

---

🔍 비교 요약

속성	기준	특징
100vh	브라우저 창	항상 정확하게 적용됨
100%	부모 요소	부모가 height를 가져야 적용 가능

---

🧪 실전 예제 비교

예제 HTML

<div class="wrapper">
  <div class="box"></div>
</div>

① height: 100vh

.box {
  height: 100vh;
  background: skyblue;
}

🟢 결과: .box는 브라우저 높이만큼 정확하게 채워짐

---

② height: 100% (부모 높이 없음)

.wrapper {
  background: lightgray;
}

.box {
  height: 100%;
  background: red;
}

🔴 결과: .wrapper가 height가 없기 때문에, .box는 높이가 0 → 보이지 않음

---

③ height: 100% (부모 높이 있음)

.wrapper {
  height: 400px;
}

.box {
  height: 100%;
  background: red;
}

🟢 결과: .box는 400px 높이로 정확히 적용됨

---

💡 추가 팁: 위치와 높이는 다르다!

.box {
  height: 100vh;
  margin-top: 40px;
}

📌 이 코드는 높이 100vh인 박스를 위에서 40px 아래에 위치시킵니다.

즉, 실제 위치는 40px ~ 840px이 되죠.
vh는 크기일 뿐, 시작 위치를 의미하지는 않습니다.

---

❌ 자주 하는 실수

/* ❌ 잘못된 예시 */
height: 100vh - 1rem;

• 이렇게는 CSS가 인식하지 못해 무시됩니다.

✅ 올바른 방법은 calc() 사용!

/* ✅ 제대로 된 예시 */
height: calc(100vh - 1rem);

---

🎯 언제 뭘 써야 할까?

상황	추천 속성
화면 전체를 채우고 싶을 때	100vh
부모 요소와 같은 높이로 맞추고 싶을 때	100% (단, 부모가 height를 가질 때만)
뷰포트에서 특정 영역만 제외하고 싶을 때	calc(100vh - xxx)

---

✅ 마무리 요약

속성	기준	특징
100vh	브라우저 화면 전체	항상 일정한 높이 보장
100%	부모 요소의 높이	부모가 height를 설정해야 의미 있음