[CSS] 화면 가득 높이 설정 방법

CSS-로고

---

 

 

CSS 높이 속성의 원리 (height property)

CSS를 배워서 작업을 하다 보면 누구나 한 번쯤은 다음과 같은 상황을 겪기 마련입니다. 배경 사진이나 배경 색상을 화면에 꽉 차도록 설정하고 싶은데 혹은, footer가 화면 중앙으로 말려 올라오는 상황을 방지하고 싶어서, 해당 div의 height 속성 값을 100%로 설정하는 일 말입니다. 하지만 결과물을 보곤 금세 당황하며 고개를 갸웃거리게 될 것입니다. 그리곤 선택자(selector)를 잘못 설정했나? 스스로를 의심하며 id 선택자(#)와 class 선택자(.)를 재확인해볼 것입니다. 그래도 이상한 것을 발견하지 못하곤 결국 구글링을 시작할 것입니다.

 

 

이 모든 과정은 height의 속성을 제대로 이해하지 못하고 있기 때문에 발생한 것입니다. height의 속성 값은 언제나 부모의 속성 값을 기준으로 삼고 있습니다. 때문에 해당 div만 height를 100%로 설정한다고 해서 전체가 변화하지 않았던 것입니다. 보다 빠른 이해를 돕고자 id가 hello인 div를 만들고, CSS로 높이 설정을- 해당 div만 100%로 설정한 경우, 부모 태그인 body와 html까지 높이를 100%로 설정한 경우, 그리고 마지막으로 번거로운 작업을 덜 수 있도록 도와주는 속성 값 viewheight를 사용하는 경우로 각각 나누어보았습니다.

 

 

 

 

먼저 대부분이 헤매게 되는 해당 div의 height만 100%로 설정해준 경우입니다. 여기서 속성 값 #ffd54f는 노란색으로 예시의 배경색입니다. 

해당 div의 높이만 100%로 설정한 경우

 

 

---

이번엔 id가 hello인 div의 부모 태그인 body, 그리고 body의 부모 태그인 html까지 모두 높이를 100%로 설정해주었을 때의 모습입니다. 이렇게 해야 비로소 우리가 맨 처음 머릿속으로 상상했던 모습이 구현되는 것을 확인할 수 있습니다.

해당 div는 물론 그 부모 태그인 body와 html까지 높이를 100%로 설정한 경우

 

 

---

마지막으로, 위의 번거로움을 한 번에 해결할 수 있는 viewheight 속성 값을 사용한 경우입니다. viewheight는 말 그대로 눈에 보이는 높이를 지칭하기 때문에 해당 div 태그의 높이만 100vh로 설정해주면, 자연스럽게 화면 높이 전체를 사용하게 되는 것입니다. 만약 footer 태그가 화면 중앙으로 말려 올라오는 문제를 해결하고 싶으시다면, body태그의 min-height를 100vh로 설정하는 것이 하나의 문제 해결 방법이 될 수 있습니다.

viewheight를 이용해 해당 div의 높이만 100vh로 설정한 경우

 

 

---

이상으로 CSS를 활용해 화면 높이 전체를 사용하는 방법에 대해 알아보았습니다. 처음에는 여러 가지 경우의 수들이 복잡하게 느껴지실 수 있지만, 그럴 때일수록 모든 문제의 핵심인 height의 속성만 제대로 기억하고 계시면 됩니다. 바로 height는 부모 height의 속성 값을 기준으로 정해진다는 점입니다.