HTML vs Body: How to Set Width and Height for Full Page Size 번역

출처 : https://www.freecodecamp.org/news/html-page-width-height/#:~:text=With%20no%20height%20value%20provided,results%20in%20full%20page%20width

HTML vs Body: How to Set Width and Height for Full Page Size

 

css는 어렵지만 관대하다.

관대함덕분에 우리는 우리의 css 스타일을 유연성 있게 쓸 수 있다.

우리의 페이지가 로딩되고 있을때, crash가 없다

width와 height가 생기게 되면 html 엘리먼트는 무엇을 셋팅하는지 아는가?

body 엘리먼트는 어떤가?

html, body 둘다 넣고 알아서 잘 되길 바라는가?

여태 그렇게 하고 있었다면 너만 그러고 있는건 아닐거다

이 질문에 대한 답은 직관적이지 않다.

필자는 어떤 프로퍼티를 어떤 엘리먼트에 적용시켜야하는지에 대한 정확한 이해 없이 이 두가지 엘리먼트를 사용했었다.

html, body 엘리먼트를 다음과 같이 둘다 적용하는건 흔한 경우는 아니다.

html, body {
     min-height: 100%;
}

 

문제가 있는걸까?

 

그렇다 이렇게 쓰면 안된다.

위의 스타일은 문제를 야기한다.

min-height:1000%를 html, body 둘다에 적용을 하는 것은 body element가 우리가 예상하는 것처럼 페이지를 전체를 채우지 못한다. 

개발자도구로 computed style을 봐보면 body element는 height가 0일것이다

 

한편 html element는 브라우저내의 페이지에서 보이는 부분의 height를 가지게 된다

body element는 위쪽에 bar에 표시된 default 8px margine을 가진다. height는 0이다

 

왜 이런 일이 일어날까?

사이즈를 주기 위한 % 는 요소가 해당 백분율을 기준으로 하는 상위 항목을 참조해야 합니다.

html element는 보이는 뷰포트 높이랑 같은 뷰포트 높이를 참조한다.

그러나, 우리는 딱 min-height만 html에 설정을 했다. height 요소는 값을 넣지 않고..

 

그래서 body element는 참조하는 부모 height를 가지지 않는다. 100%가 무엇이랑 일치하는지 결정할때!!

 

문제는 숨겨져있다

만약 페이지의 body에 충분한 컨텐츠를 넣었다면 이런 문제가 있다는것조차 인식하지 못할 수 있다.

그리고 알아채기 더 어렵게 만드는 요소는, 만약 html, body 둘에 background-color을 주거나 둘 중 하나에만 줘도

뷰포트는 그 색으로 전체를 채운다.

이것은 body 요소가 뷰포트만큼 크다는 인상을 준다

하지만  아니다. 여전히 0이다

html, body {
    min-height: 100%;
}
body { background-color: dodgerblue; }

Reverse-inheritance

이상하게, html 요소는 만약 따로 background-color를 지정해주지 않으면 body 요소의 background-color를 가져다 쓴다.

 

그렇다면 전체 반응형 페이지를 위한 이상적인 height 는 뭘까?

html {
    height: 100%;
}
body {
    min-height: 100%;
}

 

이렇게 코드를 짜면 html의 경우 부모의 뷰포트를 참조하고 뷰포트값의 100%를 height로 가지게 된다

html에 height값을 줌으로써, body에 할당된 min-height 값은  html에 맞는 초기 height를 준다.

 

이것은 컨텐츠가 보이는 페이지보다 더 커질때 body가 그에 맞게 커질 수 있도록 해준다.

 

딱 하나의 문제점은 html이 보이는 뷰포트의 크기보다 더 커질 수 없다는 것이다. 하지만, body가 html 보다 커지는 건

가능하게 해준다

 

더 좋은 방법은 간단하다.

body { min-height: 100vh; }

 vh(viewport height) 단위를 쓰면 body가 최소한 뷰포트의 최대 높이를 기반으로 하는 height값을 가질수 있게 해준다.

 

이전에 토론한 background-color같이 만약 우리가 html에 어떤 height값을 주지 않았을 때, html height에 이미 값을 준 body의 height를 셋팅해줄것이다.

 

그러므로 이 해결책은 html이 이전 해결책에서 overflow를 피하고, 두 요소 전부 컨텐츠에 맞게 커지게 할것이다!

 

과거에 vh 단위는 모바일 브라우저에서 몇몇 문제가 있었으나, 크롬와 사파리 뷰포트가 일치할때 나타난다

URL bar resizing - Chrome Developers

 

페이지 높이는 가로 스크롤 막대를 만든다

 

page width가 아니라?

 

아니다.

 

이 이벤트중 또 이상한것은 page height가 브라우저내에서 horizontal scrollbar를 활성화한다.

 

페이지 컨텐츠가 뷰포트 높이보다 커지게 되면 세로 스크롤바가 생긴다.

이건 가로 스크롤 막대도 바로 만들어낸다.

 

어떻게 고칠까?

 

width 설정으로 시작하는것이다!

이 문제는 html, body 뿐만 아니라 다른 요소가 100vw 단위로 설정을 할 때 생긴다

뷰포트 유닛은 수직 스크롤 막대가 차지하는 약 10px를 고려하지 않는다.

 - take up : 계속하다 / 시작하다 / 차지하다 

- approximate : 대략 / 비슷하다 / 근사치 내다

- account for : 설명하다 

 

그래서 수직 스크롤바가 생길때 가로 스크롤바도 생기는 것이다(10px 고려를 안해서)

 

어떻게 전체 너비를 채울까?

 

화면의 전체 사이즈에서 html이나 body 요소에 width를 주지 않는 것이 디폴트다

만약 자동으로 값 주지않고 너비 값을 설정했다면 css 없애기(css reset)를 사용하는것부터 해봐라

body 태그는 디폴트로 모든 면에 8px를 가지고 있다는 것을 반드시 기억해라

 

css reset으로 그것을 없애라.

마진을 없애기 전에 width 값을 100%로 설정하는 것은 body 태그의 overflow 문제를 일으킨다

주로 쓰는 css reset임

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

어떻게 내맘대로 너비를 설정할까?

항상 너비를 설정할 필요는 없지만 나는 그냥 한다

습관화 시키는 것을 쉽다

 

만약 body 태그에 100% 너비를 지정해줬다면 전체 사이즈 너비가 될 것이다.

이것은 사실상 너비 값을 설정하지 않고 기본값을 쓰는 것과 같다

 

만약 body 요소를 더 작은 컨테이너로 사용하고 html 요소가 페이지를 꽉 채우게 하려면 body에 max-width 값을 주면 된다

html { background-color: #000; } 
body {
    min-height: 100vh;
    max-width: 400px;
    background-color: papayawhip; 
    margin: 0 auto;
}

결론

 

html 요소에 height 값을 따로 주지 않으면 body의 height, min-height를 100%으로 설정해도 height가 없다

그러나 html 요소에 width값을 따로 주지 않는 경우엔 body에 width:100%를 주더라도 전체 페이지의 너비가 된다

 

이것은 직관적이지 않고 혼란스럽다

 

반응형 전체 사이즈 높이를 위해선 body에 min-height : 100vh로 해줘야한다

만약 width를 설정할 때 가로 스크롤 막대가 생기지 않도록100vw를 100% 초과하도록 설정을 해라