Header, Footer 상단 하단 고정

1. 문제 정의

이전 포스팅을 통해 상하좌우에 있는 기본적인 vue 공백을 제거하는데 성공했지만, 여전히 문제가 남아있습니다.

본문의 내용이 짧을 경우 footer가 위로 올라온다는 문제가 있습니다.

이를 다음 코드를 통해 해결해보겠습니다.

2. 문제 해결

다음 코드를 App.vue style 영역에 추가해보겠습니다.

<style lang="scss">
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* viewport의 전체 높이를 차지 */

  > header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  > footer {
    margin-top: auto; /* footer를 #app의 맨 아래로 보냄 */
  }
}
</style>

3. 코드 설명

#app

• # 기호는 css에서 id 선택자를 나타냅니다. Vue.js 프로젝트의 기본 구조에서는 주로 최상위 컴포넌트를 나타냅니다.
• display : flex
  • Flexbox 모델을 사용하여 #app 내의 자식 요소들을 유연하게 배치합니다.
• flex-direction : column
  • Flexbox의 주 방향을 수직(column)으로 설정합니다. 기본값은 row로 수평 방향입니다.
• min-height: 100vh
  • #app 의 최소 높이를 뷰의 높이(vh)로 100% 설정합니다. 이렇게 함으로써 화면의 내용이 적더라도 #app 은 항상 전체 화면을 차지합니다.

> header

• >: 이 기호는 자식 선택자(child combinator)입니다. #app 바로 아래의 자식 요소 중 header 태그만 선택하게 됩니다. 손자나 그 이후의 후손은 선택하지 않습니다.
• position: sticky;: 스티키 포지셔닝을 적용합니다. 스크롤 시에도 특정 위치에 고정되도록 할 때 사용됩니다.
• top: 0;: 스크롤되는 영역의 최상단에서 0의 위치에 header를 고정합니다.
• z-index: 1000;: 다른 요소와 겹칠 경우 header가 가장 위에 오도록 z축 순서를 설정합니다.

> footer

• >: 마찬가지로 자식 선택자입니다. #app 바로 아래의 자식 요소 중 footer 태그만 선택하게 됩니다.
• margin-top: auto;: Flexbox에서 margin: auto는 가능한 모든 공간을 차지하게 됩니다. 여기서는 수직 방향에만 적용되어 footer가 #app의 맨 아래로 내려가게 됩니다.

footer가 하단에 고정되는 원리는 다음과 같습니다:

• #app은 화면의 전체 높이(100vh)를 최소로 가지게 됩니다.
• header는 #app의 맨 위에 위치합니다.
• footer 위 마진을(margin-top)이 auto로 설정되었기 때문에, 그 위의 모든 컨텐츠 및 공간 후에 남아있는 가능한 모든 여백을 차지하게 됩니다.