[CSS] 레이아웃 height 100%로 동작하게 하는 법

Copyright © 1994–2020 W3C®

[CSS] 레이아웃 height 100%로 동작하게 하는 법

(글쓴날 : 2020.03.01)

 

---

* 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다.

* CSS3를 기준으로 작성되었습니다.

---

 

 

CSS height에 % 값 적용 방법

---

1) 부모 태그의 높이를 100%로 지정하기

아래의 화면처럼, 만약 height를 100%로 지정했을 때 원하는 데로 동작하지 않으신다면, 저도 그랬듯이 아마 대부분의 경우가 부모 태그의 height가 지정하지 않은 경우일 겁니다.

 

height에 100% 적용이 안되는 모습

---

height에 100% 적용이 된 모습

따라서, 위의 화면처럼 height를 %로 지정하고 싶으시다면 html, body와 같은 부모 태그의 height를 전부 지정해 주셔야 합니다.

(ex)

html,
body {
  height: 100%;
}
 
적용할 레이아웃 선택자 {
  height: 100%;
  background-color: blueviolet;
}

 

단, 적용할 레이아웃에 html, body뿐만이 아닌 다른 상위 요소들이 존재할 경우 해당 요소들까지 전부 height 지정을 해주셔야 합니다

예를 들어, 프론트엔드단에서 React 라이브러리를 사용하신다면 상위 요소가 html -> body -> root인 구조이므로 root 레이아웃까지 height 지정을 해주셔야 합니다.

(ex)

html,
body {
  height: 100%;
}
 
#root {
  height: 100%;
}
 
적용할 레이아웃 선택자 {
  height: 100%;
  background-color: blueviolet;
}

---

2) 뷰포트(Viewport) 단위 사용하기

부모 태그의 height를 일일이 지정하기 귀찮으시다면, 다른 방법도 존재합니다.

바로, 반응형 사이트를 만들 때 주로 쓰이는 뷰포트(Viewport) 단위를 사용하는 방법입니다.

 

height에 100vh 적용한 모습

위의 화면처럼 브라우저의 높이에 비례한 크기 단위인 vh를 사용하여 100vh로 지정하시면, 해당 화면 높이의 100%만큼의 길이로 레이아웃을 만드실 수 있습니다.

(ex)

적용할 레이아웃 선택자 {
  height: 100vh;
  background-color: blueviolet;
}

---

 

 

---

 

 

이렇게 CSS에서 레이아웃의 height를 100%로 동작하게 하는 법을 정리해봤습니다.

역시 이론으로만 공부하는 것과 실전에서 적용해보는 것은 큰 차이가 있다는 것을 뼈저리게 느꼈습니다.

앞으로는 간단하다고 눈으로 이론만 이해하고 넘어가는 게 아니라 손으로 직접 코딩을 해봐야겠습니다.

읽어주셔서 감사합니다!