CSS: 'vh'를 이용한 반응형 레이아웃

1. 'vh'를 이용한 반응형 레이아웃

• 100vh : 뷰포트(Viewport) 높이의 100%를 의미합니다.

  • 1vh = 뷰포트 높이의 1%

  • 100vh = 브라우저 창 전체 높이

• calc() : CSS에서 동적 계산을 할 수 있는 함수입니다.

  • calc(100vh - 100px) → 뷰포트 전체 높이에서 100px을 뺀 값

• 결과적으로, 화면 크기가 변해도 항상 "화면 전체 높이 - 100px" 만큼의 높이를 유지합니다.

2. 활용 예시

• 위 예시는 상단에 고정된 헤더(높이 100px)가 있을 때, 나머지 영역을 자동으로 채우는 레이아웃에 유용합니다.

.main-content {
  height: calc(100vh - 100px);
  overflow-y: auto; /* 내용이 넘칠 경우 스크롤 */
}

계산 방식

• 100vh = 화면 전체 높이

• - Xpx = 그 높이에서 X 픽셀만큼 빼는 것

• X가 작아지면 빼는 양이 줄어들어 → 최종 높이가 커짐

• X가 커지면 빼는 양이 많아져 → 최종 높이가 작아짐

• 화면 높이가 900px이라고 가정

  • 즉, 빼는 값이 작을수록 길어지고, 빼는 값이 클수록 짧아집니다.

3. 장점

• 반응형 레이아웃 구현 가능 (화면 크기 변화에 자동 대응)

• 고정된 헤더/푸터와 함께 사용 시, 남은 영역을 정확히 채움

• CSS만으로 계산 가능 → JS 없이도 동적 높이 설정 가능

4. 주의사항

1. 모바일 브라우저에서의 vh 문제

   • 모바일 환경에서는 주소창이 나타났다/사라졌다 할 때 vh 값이 변동될 수 있습니다.

   • iOS Safari 등에서는 100vh가 실제 보이는 영역보다 크게 계산되는 경우가 있어, 100dvh(Dynamic Viewport Height) 사용을 고려할 수 있습니다.

2. calc() 연산 시 공백 필수

   • calc(100vh-100px)처럼 공백 없이 쓰면 일부 브라우저에서 인식 오류 발생 가능

   • 올바른 문법: calc(100vh - 100px)

3. 스크롤바 고려

   • 스크롤바가 생기면 실제 표시 영역이 줄어들 수 있으므로, overflow 속성 조정 필요

5. 확장 활용 예시

• 헤더 + 푸터가 있는 레이아웃

.content {
  height: calc(100vh - 150px); /* 헤더 100px + 푸터 50px */
}

• 사이드바와 함께 사용

.main {
  width: calc(100vw - 250px); /* 전체 너비에서 사이드바 너비 제외 */
}

만약 모바일 환경까지 고려한 안정적인 레이아웃을 원한다면, height: calc(100dvh - 100px); 또는 JavaScript로 window.innerHeight 값을 가져와서 스타일에 반영하는 방법을 병행하는 것이 좋습니다.