CSS에서 `height: 100%`가 작동하지 않는 이유와 올바른 해결 방법

핵심 기술

height: 100% CSS 속성이 예상대로 작동하지 않는 흔한 레이아웃 버그의 근본적인 원인을 분석하고, html 및 body 요소의 높이 설정과 vh 또는 min-height: 100% 사용을 통해 이를 해결하는 방법을 제시합니다.

기술적 세부사항

• 문제 발생 원인: height: 100%는 부모 요소 높이의 100%를 차지하지만, html과 body에 명시적인 높이 설정이 없으면 자식 요소의 높이 계산 기준이 없어 제대로 작동하지 않습니다.
• 해결 방법 1: html과 body에 height: 100%;를 설정하여 명확한 높이 기준을 제공합니다.
• 해결 방법 2: body > div:first-child에 min-height: 100vh; (또는 height: 100vh;)를 사용합니다.
  • 100vh: 뷰포트 높이에 고정되어 히어로 섹션 등에 유용합니다.
  • min-height: 100%: 부모 높이에 상대적이며 내용이 많을 때 유용합니다 (단, html, body 설정 필요).
• 프레임워크 환경에서의 고려사항: Vue, React 등 컴포넌트 기반 프레임워크에서는 스타일이 스코프될 수 있어 html, body 선택자에 대한 전역 스타일 설정이 중요합니다.
• :root 사용: :root 셀렉터는 html 요소를 선택하며, html, body 설정보다 우선순위가 높거나 리셋 스타일에 덜 영향을 받아 전역 스타일 적용 시 유용할 수 있습니다.

개발 임팩트

• 웹 페이지의 첫 화면(hero section)이나 특정 섹션이 뷰포트 전체를 채우도록 하는 레이아웃 구현을 정확하고 효율적으로 할 수 있습니다.
• CSS 박스 모델, 상속, 스코프에 대한 깊이 있는 이해를 돕고, 흔히 발생하는 레이아웃 문제를 사전에 방지하거나 빠르게 해결하는 능력을 향상시킵니다.

커뮤니티 반응

• 이러한 레이아웃 버그는 개발자 커뮤니티에서 자주 논의되는 주제이며, 많은 개발자가 height: 100%의 동작 방식에 대한 혼란을 겪습니다. 올바른 해결책을 제시하는 이 글은 유용한 정보를 제공합니다.