[css] height: 100% 의미

아무것도 보이지 않는다. 그 이유는 div 안에 아무것도 없으면 배경을 깔 공간 자체가 없었기 때문

<div class='cover'></div>

.cover { 
  background-image: url(..)
}

 

 

hello world 문자 크기 만큼 배경이 보인다.

width는 지정이 안되어 있으므로 auto 값이 기본으로 되어있음 (height도 마찬가지)

<div class='cover'>hello world</div>

.cover { 
  background-image: url(..)
}

 

 

width: auto

요소의 부모 크기 기준으로 가득찬다. body의 width 만큼 cover width가 결정됨. 그래서 한줄 전체가 보임

 

height: auto

요소의 자식 기준으로 자동 조절된다.

 

꽉 차는걸 보고싶다고 height: 100% 을 설정해본다면,

안된다.

<div class='cover'>wow</div>

.cover { 
  background-image: url(..)
  height: 100%;
}

 

 

%로 단위를 설정하면 부모의 height를 받겠다는 의미

현 샘플 코드는 body가 부모이기에 body의 height를 따른다.

 

body의 height가 페이지 전체라고 생각하겠지만, 확인해보면 그렇지 않다.

이유는 body의 height도 기본값은 auto이므로 auto의 성질인 자식 기준으로 자동 조절되니 cover 높이 따라 결정된다. cover height 부모기준으로, body는 cover 기준으로.. 서로 기준을 삼고 있기에 순환참조처럼 되어버렸다.

 

그래서 전체가 감싸지지 않는다.

가능하게 하려면, html 까지 height: 100%으로 하면 되지만, 그닥 좋은 방법은 아니다.

<div class='cover'>wow</div>

.cover { 
  background-image: url(..)
  height: 100%;
}

body {
  margin: 0;
  border: 10px solid blue;
}

 

vh를 활용하는 방법이 괜찮아 보인다.

<div class='cover'>wow</div>

.cover { 
  background-image: url(..)
  height: 100vh;
}

 

 

https://www.youtube.com/watch?v=zBHxp3xKsF0