10. Vue와 Firebase로 나만의 사이트 만들기 - footer 만들기

 

 

 

VF - 10강

 

 

 

---

• 이번 강에서는 간단하게 footer를 다뤄볼 것이다.
• footer는 바닥에 붙는 글을 말한다. 하지만 최근에는 스크롤에 방해되거나 하여 잘 쓰지 않는다. 그렇지만 회사나 상용에서는 회사 상호나 정보를 넣기 위해 사용한다.
• 크게 할 게 없으나 특이사항을 알고 넘어가자.
• 먼저 vuetity 사이트에서 footer의 Example을 하나 들고 와서 </v-app> 태그 위에 붙여 넣어 준다.

<v-footer app padless>
  <v-col
    class="text-center"
    cols="12"
  >
    {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
  </v-col>
</v-footer>

• 이렇게 붙여넣어주면 일단 끝은 났다.
• 하지만 이것이 중요한 게 아니라 이전 강에서 말했듯이 v-footer 안에 app propertys가 있어야 제 위치를 찾아갈 수 있다.
• 이제 <v-footer>태그에 몇 가지 설정을 해보기 위해서 아래와 같이 속성을 추가한다.

<v-footer app padless color="primary" dark>
  <v-col
    class="text-center"
    cols="12"
  >
    {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
  </v-col>
</v-footer>

• color="primary" 속성은 기본 컬러로, 진한 파란색으로 변경되며, dark 속성은 다크 모드에서 처럼 글자를 흰색으로 바꿔준다. 이것은 상단바 속성과 같다.

 

• 다음으로 컨텐츠의 길이를 늘리기 위하여 aboutView.vue 파일의 내용을 아래와 같이 수정해볼 것이다.

<!-- aboutView.vue -->
<template>
  <div class="about">
    <h1 v-for="i in 70" :key="i">This is an about page</h1>
  </div>
</template>

• for반복문을 사용하여 이렇게 수정하였고 화면 결과를 확인해보면 아래와 같다.

 

• 콘텐츠의 내용은 길어졌으나 아래의 footer가 스크롤에 관계없이 고정으로 되어있다.
• 이것을 변경하기 위하여 <v-footer> 태그에 속성을 아래와 같이 추가할 것이다.

<!-- App.vue -->
<v-footer app padless color="primary" dark absolute>
  <v-col
    class="text-center"
    cols="12"
  >
    {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
  </v-col>
</v-footer>

• 위와 같이 absolute 속성을 추가하면 스크롤을 맨 아래로 내렸을 때 footer가 보이게 된다.
• 결과 화면은 아래와 같다.

 

• 이 웹 페이지에서는 absolute를 사용하면 적당하다고 생각된다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597405504384
  • https://www.youtube.com/watch?v=oGtQ5IUeV8I 

10 footer 만들기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---