CSS는 어렵지만 관대합니다. 이 관대함으로 우리는 CSS에 이런저런 스타일을 시도해볼 수 있습니다.

페이지는 여전히 로드됩니다. "충돌"은 없습니다.

페이지 너비와 높이와 관련하여 HTML 요소에 무엇을 설정해야 하는지 알고 있습니까? Body 요소는 어떻습니까?

두 요소 모두에 스타일을 그냥 냅다 적용하고 잘되기를 바라고 있나요?

그렇다면 당신 혼자만 그런 건 아닙니다.

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

맞습니다. 저는 과거에 두 요소에 어떤 속성을 적용해야 하는지 정확히 고려하지 않고 스타일을 적용했습니다.

다음과 같이 HTML과 body 요소 모두에 CSS 속성이 적용된 것을 흔하게 보았을 것입니다.

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

이게 중요한가요?

네, 그렇습니다.

위 스타일 정의는 문제를 만듭니다.

두 요소 모두에 최소 높이를 100%로 설정해도 예상한 대로 body 요소가 페이지를 채울 수 없습니다. 개발자 도구에서 계산된 스타일 값을 확인하면 body 요소의 높이가 0입니다.

한편, HTML 요소는 브라우저에서 페이지의 보이는 부분과 동일한 높이를 갖습니다.

크롬 개발자 도구의 다음 스크린샷을 보세요.

body 요소에는 상단의 막대로 표시된 기본 8px 여백이 있습니다. 높이 값은 0입니다.

왜 이런 일이 일어날까요?

백분율을 크기 값으로 사용하려면 body 요소가 해당 백분율을 기반으로 부모를 참조해야 합니다.

HTML 요소는 페이지의 보이는 부분과 동일한 높이 값을 갖는 뷰포트를 참조합니다. 하지만 우리는 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 요소가 높이 값을 수신할 때 body 요소에 할당된 최소 높이 값도 해당 값으로 제공됩니다.

이렇게 하면 콘텐츠가 보이는 페이지보다 커지면 body가 더 커질 수도 있습니다.

유일한 단점은 HTML 요소가 보이는 뷰포트의 높이 이상으로 커지지 않는다는 것입니다. 하지만 body 요소가 HTML 요소보다 커지는 것은 허용되었습니다.

최신 해결책은 간단해졌습니다.

body { min-height: 100vh; }

이 예제는 vh(뷰포트 높이) 단위를 사용하여 body 요소가 뷰포트의 전체 높이를 기반으로 최소 높이 값을 설정할 수 있도록 합니다.

앞서 논의한 배경색과 마찬가지로 HTML 요소에 높이 값을 설정하지 않으면 body 요소에 지정된 높이와 동일한 값을 가정합니다.

따라서 이 해결책은 이전 해결책에 있는 HTML 요소 오버플로를 방지하고 두 요소 모두 콘텐츠와 함께 커집니다!

vh 단위를 사용하면 과거에는 일부 모바일 브라우저 문제가 발생했지만, Chrome 및 Safari는 현재 표시 영역 단위와 일치하는 것으로 보입니다.

페이지 높이가 가로 스크롤바를 유발할 수 있음

잠시만요, 뭐라고요?

"페이지 너비"라고 말하지 않았나요?

아니요.

또 다른 일련의 이상한 이벤트에서 페이지 높이가 브라우저에서 가로 스크롤바를 활성화할 수 있습니다.

페이지 콘텐츠가 뷰포트 높이보다 커지면 세로 스크롤바가 활성화됩니다. 이에 따라 가로 스크롤바도 즉시 나타날 수 있습니다.

그럼 해결책은 뭔가요?

페이지 너비 설정으로 시작하는 것을 알면 잠을 더 잘 잘 수 있겠네요.

이 스크롤바 문제는 HTML이나 body 요소뿐만 아니라 모든 요소가 100vw(뷰포트 너비) 단위로 설정될 때 발생합니다.

뷰포트 단위는 세로 스크롤바가 차지하는 약 10픽셀을 고려하지 않습니다.

따라서 세로 스크롤바가 활성화되면 가로 스크롤바도 표시됩니다.

전체 너비로 페이지를 설정하는 방법

어쩌면 그냥 하지 않습니다.

HTML과 body 요소에 너비를 설정하지 않으면 기본적으로 전체 크기의 화면이 됩니다. auto 이외의 너비 값을 설정하는 경우 먼저 CSS 재설정을 활용하는 것이 좋습니다.

기억하세요, 기본적으로 body 요소에는 모든 면에 8px의 여백이 있습니다.

CSS 재설정은 이 여백을 제거합니다. 그렇지 않으면, 여백을 제거하기 전에 너비를 100%로 설정하면 body 요소가 영역을 벗어납니다. 제가 사용하는 CSS 재설정은 다음과 같습니다.

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

너비를 원하는 대로 설정하는 방법

항상 너비를 설정할 필요는 없지만 저는 보통 그렇게 합니다.

단순히 습관일 수도 있습니다.

body 요소에서 너비를 100%로 설정하면 전체 페이지 너비가 됩니다. 이것은 본질적으로 너비 값을 설정하지 않고 기본값을 허용하는 것과 같습니다.

body 요소를 더 작은 컨테이너로 사용하고 HTML 요소가 페이지를 채우도록 하려면 body에 최대 너비값을 설정할 수 있습니다.

다음은 예입니다.

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

결론

HTML 요소에 높이 값이 제공되지 않은 상태에서 body 요소의 높이 및/또는 최소 높이를 100%로 설정하면 높이가 발생하지 않습니다(콘텐츠를 추가하기 전).

하지만 HTML 요소에 너비 값이 제공되지 않은 상태에서 body 요소의 너비를 100%로 설정하면 전체 페이지 너비가 됩니다.

이것은 직관적이지 않고 혼란스러울 수 있습니다.

반응형으로 전체 페이지 높이를 설정하려면 body 요소 최소 높이 값을 100vh로 설정하세요.

페이지 너비를 설정하는 경우 100vw 이상 100%를 선택하여 예기치 않은 가로 스크롤바를 방지하십시오.

전체 화면 크기이면서 콘텐츠와 함께 커지는 HTML 페이지의 CSS 높이 및 너비 설정 방법을 보여주는 YouTube 채널의 자습서를 남겨 드리겠습니다.

CSS 너비와 높이를 설정하는데 더 선호하는 다른 방법이 있으신가요?

방법을 알려주세요!