이번 포스트에서는 height 100% 속성과 100vh 라는 속성에 대해서 살펴보자. main content로 화면을 꽉 채우고 싶어요! 화면을 구성하면서 main content 영역으로 화면을 꽉 채우고 싶은 경우가 많다. 위 과정을 처리할 때 height와 min-height 속성을 사용하는데 %단위를 사용하는 경우와 vh를 사용하는 경우에 대해 살펴보자. 다음과 같은 간단한 html을 이용해서 확인해보자. 여기는 header 여기는 main 여기는 footer height: 100%는 요소의 부모의 높이를 100%로 채움 먼저 height는 요소를 감싸고 있는 부모의 높이를 100% 채운다는 이야기이다. .main { background-color: brown; /* 100%에서 header와 f..
[CSS]height 100% vs 100vh
이번 포스트에서는 height 100% 속성과 100vh 라는 속성에 대해서 살펴보자. main content로 화면을 꽉 채우고 싶어요! 화면을 구성하면서 main content 영역으로 화면을 꽉 채우고 싶은 경우가 많다. 위 과정을 처리할 때 height와 min-height 속성을 사용하는데 %단위를 사용하는 경우와 vh를 사용하는 경우에 대해 살펴보자. 다음과 같은 간단한 html을 이용해서 확인해보자. 여기는 header 여기는 main 여기는 footer height: 100%는 요소의 부모의 높이를 100%로 채움 먼저 height는 요소를 감싸고 있는 부모의 높이를 100% 채운다는 이야기이다. .main { background-color: brown; /* 100%에서 header와 f..
2022.09.05