[CSS] 반응형 웹페이지의 높이 설정

오늘 사이드 프로젝트를 반응형으로 업데이트하는 작업을 진행하다가

웹페이지의 높이 설정 문제에 부딪혔다. 

 

콘텐츠가 있는 부분까지만 높이가 설정되다 보니 스타일이 이상하게 적용되는 문제가 있었다.

이 부분 어찌어찌 해결했던 경험이 있는데, 

이번에 기왕이면 자세히 알아보려고 구글링을 하다가 좋은 글이 있어 번역해 옮겨보려 한다. 

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

CSS는 어렵고 복잡하지만 동시에 유연하다. 그렇기 때문에 어지저찌 하다보면 스타일이 적용되기도 한다. 

페이지는 여전히 로딩되며, 에러 또한 나타나지 않는다. 

페이지의 높이나 너비에 있어서 HTML 엘리먼트를 어떻게 설정해야 하는지 혹시 알고 있는가? body 엘리먼트는?

 

혹시나 두 엘리먼트에 스타일을 몽땅 집어넣고 제대로 작동하기만을 바라진 않는가?

만약에 그렇다면, 당신 혼자만의 이야기가 아니다. 

이러한 질문에 대한 답변은 썩 직관적이진 않다. 

 

과거에 필자도 어떤 엘리먼트에 어떤 특성을 정확하게 적용해야 하는지 고려하지 않고 스타일을 적용했다. 🤦‍♂️

아래와 같이 HTML, body 두 엘리먼트에 CSS 특성을 종종 적용하기도 한다:

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

이게 문제가 될까?

답은 '그렇다' 이다.

 

위의 스타일 적용은 한 가지 문제점이 있다:

 

두 엘리먼트에 min-height의 100% 적용은 body 엘리먼트가 예상했던 대로 화면을 꽉 채우지 않는다는 점이다. 개발자 도구를 통해서 계산된 스타일 값을 확인해 보면 높이가 0으로 설정되어 있는 것을 확인할 수 있다. 

 

반면, HTML 엘리먼트는 브라우저에서 볼 수 있는 부분의 높이값과 동일함을 알 수 있다. 

 

아래 개발자 도구 스크릿 샷을 보라:

 

body 엘리먼트는 기본 설정값 8px의 마진을 상단 바에 가지고 있고 높이는 0이다.

왜 이런 문제가 발생하는 것일까?

퍼센트를 사용하면 부모로부터 참고할 수 있는 설정값을 필요로 하게 된다. 

 

HTML 엘리먼트는 볼 수 있는 화면 크기 뷰포트 높이값을 가진 뷰포트를 참고하게 된다. 하지만 min-height을 HTML 엘리먼트에 적용했을 뿐 높이값을 설정하진 않았다.

 

따라서, body 엘리먼트는 100%의 값이 무엇인지 참고할 만한 부모 엘리먼트의 값이 없게 된다. 

 

그리고 이런 문제는 드러나지 않을 수 있다.

만약에 충분한 body 콘텐츠가 있는 상태에서 스타일을 적용했다면 위와 같은 문제를 발견하지 못할 수 있다. 

 

그리고 이런 문제를 더욱 발견하기 어렵데 만드는 요소는, 배경색을 둘 다 같이 적용시키거나 하나에만 적용했을 때이다. 이렇게 되면 body 엘리먼트가 뷰포트만큼의 높이를 가지고 있다고 착각하게 만든다. 

 

하지만 그렇지 않다. 여전히 높이는 0이다. 

 

위의 이미지는 아래 CSS 코드로 만든 화면이다. 

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

 

역상속?

신기하게도, HTML 엘리먼트는 자신의 배경색이 따로 정해지지 않았다면 body 엘리먼트의 색이 자신의 배경색이라고 가정해 버린다. 

 

그렇다면 반응형 페이지를 위한 이상적인 높이 설정은 어떻게 할까?

수년간, 이상적인 설정은 아래와 같았다:

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

이는 HTML 엘리먼트가 부모 뷰포트 값을 참조하도록 하고 뷰포트의 값과 100% 동일한 값을 가지도록 한다. 

HTML 엘리먼트는 높이값을 받게 되고 min-height 값은 body 엘리먼트에 HTML 엘리먼트와 동일한 초기값을 주게 된다. 

 

이는 body가 만약 내부 콘텐츠가 볼 수 있는 페이지를 초과해 커짐에 따라 같이 커지도록 해준다. 

 

한 가지 단점은 HTML 엘리먼트가 볼 수 있는 뷰포트를 넘어서서는 높이가 커지지 않는다는 것이다. 하지만 body 엘리먼트가 HTML 엘리먼트보다 초과해 커지는 것은 수용 가능하다고 여겨져 왔다.

최근의 방식은 더 간단해졌다.

body { min-height: 100vh; }

해당 예제는 vh(viewport height)를 사용해 body의 최소 높이를 뷰포트의 최대 높이를 기준으로 하도록 했다. 

 

이전에 배경색과 관련해서 언급했듯이, HTML 엘리먼트의 높이를 설정하지 않는다면, body 엘리먼트에 설정된 값을 자신의 값으로 인식한다. 

 

따라서, 이 방법은 HTML엘리먼트 오버플로우 문제를 피하고, 두 개의 모든 엘리먼트가 콘텐츠가 늘어남에 따라 같이 높이가 증가하도록 할 수 있다. 

과거에는 vh 사용이 모바일 브라우저에서 문제를 발생시켰지만 크롬과 사파리에 있어서 뷰포트는 안정적으로 작동된다. 

 

페이지 높이가 수평 스크롤바를 만들 수 있다. 

잠깐, 뭐라고?

 

페이지 너비가 아니라?

 

한 가지 더 특이한 현상은, 페이지의 높이가 브라우저의 수평 스크롤바를 작동시킬 수 있다는 것이다. 

 

만약에 페이지 콘텐츠가 뷰포트의 높이를 초과해 늘어나게 되면, 수직 스크롤바가 동작된다. 이는 수평 스크롤 또한 동작하도록 할 수 있다.

 

그러면 어떻게 고쳐야 하나?

이 현상이 페이지 너비 세팅으로부터 기인한다는 사실을 안다면 꿀잠을 잘 수 있을 것이다.

 

이 문제는 HTML 혹은 body 뿐만 아니라 어떤 종류의 엘리먼트든 100vw(viewport width)로 설정되어 있으면 이렇게 된다. 

 

뷰포트는 수직 스크롤바가 차지하는 대략 10픽셀의 값을 계산하지 않는다. 

 

따라서, 수직 스크롤바가 작동될 때 수평 스크롤바도 가지게 되는 것이다. 

 

그러면 페이지의 총너비는 어떻게 해야 하나?

음... 하지 않아도 된다. 

 

HTML 그리고 body 엘리먼트의 너비를 따로 설정하지 않으면 자동적으로 스크린의 풀 사이즈로 설정된다. 만약에 너비를 auto가 아닌 다른 값으로 설정함다면, CSS 초기화를 고려해 보라. 

 

명심하자, 기본값으로 body 엘리먼트는 모든 면에 8px의 마진을 가진다. 

 

CSS 초기화는 이를 없앤다. 그렇지 않으면, 마진을 없애지 않고 너비 100%를 적용한다면 body 엘리먼트의 오버플로우 문제가 발생한다. 아래는 필자가 사용하는 초기화 코드이다. 

 

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

 

 

만약 너비를 설정해야 하는 경우라면?

너비를 설정해야 할 경우는 거의 없지만, 필자는 선호에 따라 보통 설정을 한다. 

 

약간의 버릇 같은 거다. 

 

만약에 width를 body 엘리먼트에 100%로 설정하면 최대 페이지 너비를 갖게 된다. 이는 너비를 설정하지 않고 기본값을 가지는 것과 동일하다.

 

만약에 body 엘리먼트를 작은 컨데이터로 사용하고 HTML 엘리먼트로 페이지를 채우고 싶다면, max-width 값을 body에 설정할 수 있다.

 

아래는 예문이다:

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

 

 

결론

HTML에 설정된 높이값이 없다면, body 엘리먼트에 height 혹은 min-height을 100%로 설정하는 것은 높이값을 가지지 않는다. 

 

하지만, 너비 값을 HTML에 부여하지 않고 body 엘리먼트를 100%로 설정하면 최대 너비값을 가진다. 

 

이는 일관적이지 않고 혼란스럽다. 

 

반응형 페이지의 높이를 위해선, body 엘리먼트의 min-height값을 100vh로 맞춰라.

 

만약에 페이지 너비를 맞춘다면 100vw가 아닌 100%로 설정해 수평 스크롤바 생성을 피해라.

 

 

 

 

 

 

출처:https://www.freecodecamp.org/news/html-page-width-height/

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