바닥글을 페이지 하단에 붙이는 방법

웹 페이지의 높이에 관계없이 웹 사이트footer를 페이지 하단에 고정시키는 가장 쉬운 방법은 CSSflexbox를 사용하는 것입니다.

이것은 우리의 예제HTML 웹 페이지의 코드입니다.

<header>
    <h1>HEADER TITLE</h1>
    <h2>Subtitle</h2>
</header>

<div class="content">
   <h1>Content Title</h1>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
        incidunt explicabo error, maxime reiciendis consectetur sapiente velit
        perspiciatis, quibusdam enim facere praesentium vitae alias dignissimos
        debitis impedit sequi, assumenda ipsa.
   </p>
</div>

<footer>
      <h3>Created By Shafi</h3>
      <p>&copy; 2020</p>
</footer>

스타일시트를 이 페이지와 연결하고 이 CSS 스니펫을 사용하여 기본 스타일을 제거했습니다.

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

현재 웹페이지는 다음과 같습니다.


footer 요소를 페이지 하단으로 가져오기 위해 body 요소를 플렉스 컨테이너로 사용할 것입니다. 따라서 body의 모든 자식은 개별 플렉스 항목으로 바뀝니다.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

여기서 display: flex를 사용하여 body 요소를 플렉스 컨테이너로 바꿨습니다.

The flex-direction property specifies the direction of the flexible items.
We set flex-directions property as column. Thus all the children of body will flow from top to bottom.

그리고 페이지에 min-height 속성을 설정하여 콘텐츠 길이에 관계없이 본문 높이가 최소한 화면 크기와 같도록 합니다.

글쎄요, CSS는 우리 웹페이지에 많은 일을 하지 않았습니다. 그렇죠?

걱정하지 마세요! 바닥글을 화면 하단에 설정하려면 코드 한 줄만 더 있으면 됩니다.

.content {
  flex: 1;
}

The flex property is a shorthand property for:

• flex-grow
• flex-shrink
• flex-basis

The flex property sets the flexible length on flexible items.

이것은 우리content div에게 사용 가능한 모든 사용되지 않은 공간을 차지하도록 지시합니다.

이제 우리 웹페이지는 이렇게 생겼습니다!



건배 🎉

이제 content div 내부의 모든 콘텐츠를 중앙에 배치하려면 다음과 같이 플렉스 컨테이너로 전환하면 됩니다.

.content {
  flex: 1;
  /* CENTER EVERYTHING VERTICALLY */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

이제 최종 결과는 다음과 같습니다.