html태그에 height나 width의 값을 %로 부여하면, 브라우저 전체 크기를 기준으로 정해진다.

그러므로 html, body태그에 바로 100%를 부여하게 되면, 이는 실제 브라우저 기준으로 높이와 너비가 정해지게 되므로, 전체 화면을 차지하게 된다.

height

css를 작성하다 보면 해당 요소를 화면 가득차게 만들고 싶을 때가 있다

이때 매번 어떻게 구현을 할 줄 몰라서 height:100% 을 사용했는데 매번 먹히질 않았다

문제를 살펴보기 앞서, 먼저 height와 width값의 기본값을 알아야 한다.

height와 width속성의 default값

height와 width속성에 특정 단위로 값을 따로 설정하지 않는다면 두 속성의 값은 default값인 auto로 지정된다.

.pig {
  width: auto;
  height: auto;
}

auto값에 대한 것은 ❗(min,max) width , height , 그리고 auto 에서 보면 된다