[HTML & CSS] 페이지 body 요소 기본 설정

 

 

  이번 글에서는 freeCodeCamp의 HTML vs Body: How to Set Width and Height for Full Page Size이란 칼럼의 설명을 정리하고, 해당 글에서 소개된 각 케이스를 직접 확인해보며 어떤 설정이 가장 좋을지 생각해 보려 한다.

 

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

 

 

  각 케이스를 비교하기 전에 위 코드와 같이 전체 요소의 margin, padding을 0으로 세팅하고 box-sizing 속성을 border-box로 설정하는 것을 추천한다. 이러한 기본 세팅은 각 요소에 대한 추가적인 조작을 줄여준다. 아래 그림은 box-sizing의 속성 값 border-box의 특징을 보여준다. 그림에서 확인할 수 있듯이 요소의 크기를 계산할 때 패딩 값까지 포함시켜준다.

 

content-box와 border-box 세팅 결과

 

---

case1

html {
	min-height : 100%
}

body {
	min-height : 100%
}

viewport

 

  html의 경우 viewport의 사이즈를 참조하는데 이 경우 min height의 경우만 설정했으므로 height가 설정되지 않았다. 따라서 body의 size가 참조할 부모 요소의 크기가 설정되지 않은 상태이고 따라서 위와 같은 결과를 보인다

 

---

case2

html {
	height : 100%
}

body {
	min-height : 100%
}

 

 

 case 2는 예전부터 사용되던 세팅값이다. html값 설정으로 body의 min-height 또한 설정되고 요소 추가에 따른 body요소의 height값 변화도 허락된다. html 요소의 height 값이 고정되어 있어 변하지 못하지만 body 요소가 html 요소를 넘어서 증가할 수 있으므로 문제가 되진 않는다.

 

 

---

case 3

html {
}

body {
	min-height : 100vh;
}

 

  case 3는 현재 주로 사용되는 보다 심플한 세팅이다. 이 경우 html요소는 설정되지 않았으므로 body요소의 값과 같게 설정된다. body의 내용물이 viewport의 높이보다 커지는 경우 수직 스크롤바가 생성되는데, 이때 스크롤바는 10px의 크기를 차지하며 이는 기존 body width에 추가된다. 따라서 스크롤바가 생성될 때 width 값이 100vw로 설정되어있으면 vw는 스크롤바의 크기를 고려하지 않기 때문에 100vw보다 커지게 되고 수평 스크롤바 또한 생성된다. 문제 상황의 예시는 아래 코드와 같다.

 

html {
}

body {
	min-height : 100vh;
    width: 100vw;
}

 

  이 경우 아래 코드와 같이 width 값을 100%로 설정하거나 생략하면 해결할 수 있다.

 

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

 

 

결론

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

html {
}

body {
	min-height : 100vh;
    width: 100%;
}

 

 

  페이지 초기 세팅으로 위와 같이 설정하자.  body요소의 width 같은 경우 설정하지 않아도 큰 문제는 되지 않지만 명시적으로 표시를 해주어 추후 헷갈릴 경우를 방지하자. 추가적으로, 컨텐츠의 크기를 제한하고 싶으면 width값을 70vw와 같이 설정하면된다.

 

참고자료

1. HTML vs Body: How to Set Width and Height for Full Page Size [Website], 2022.12.17, URL