글을 진행하면서 느끼신 분들도 있을 것 같습니다. 현재 application의 main 틀을 만들고 있으며, 그 구성요소별로 하나하나씩 단계적으로 알아가고 있다는 것을요. 맞습니다. 이전에는 app bar를 알아보았고, 그 다음에는 navigator를 알아보았으며, 그 다음에는 옆에 보이는 menu에 대해서도 알아보았습니다.
이번에는 가장 하단에 보이는 footer에 대해서 알아보겠습니다. 우선 간단하게 footer란 무엇일까요?? 흔히 문서를 작성하다보면.... 머리글, 바닥글이라고 들어보셨을 것 입니다. 이 중에서 바닥글이 바로 footer입니다. 이를 테스트용으로 구현한 화면은 아래와 같습니다.
많이 보신 스타일 일수도 있고, 아닐지도 모릅니다. 어떤 웹페이지에서는 footer에 사이트맵을 제공하는 곳도 있으며, 어떤곳은 아주 심플하게 bar한개가 보이는 곳도 있습니다. 저는 vuetify를 참조하여 mobile web의 느낌이 나도록 구현해 보도록 하겠습니다.
1. v-footer 사용
이렇게 footer를 사용 가능하게 하는 tag는 vuetify에서는 <v-footer/>를 사용하게 됩니다. 우선 v-footer를 구현한 소스를 확인하고 prop하나하나 알아보도록 하겠습니다.
[v-footer code]
<v-content>
<router-view/>
</v-content>
<v-footer app dark padless>
<v-card tile color="#689F38" dark center class="white--text text-center" width="100%">
<v-card-text>
<v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
<v-icon size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text pt-0">
This is the Ayotera Lab's AT Project test vue.js web page.
</v-card-text>
<v-divider></v-divider>
<v-card-text class="white--text">
{{ new Date().getFullYear() }} — <strong>Ayotera Lab</strong>
</v-card-text>
</v-card>
</v-footer>해당 코드도 역시 App.vue에 적용합니다. 왜냐하면 모든 화면에 공통으로 보여지게 될 영역이기 때문입니다. 여러분의 이해를 돕기 위해서 <v-content/>도 추가하여 상대적인 위치도 적었습니다. 코드에 보시다시피... v-content아래에 위치하게 됩니다.
<v-footer>에는 여러가지 props를 추가할 수 있습니다. 해당 부분에 대해서는 아래에 여러가지 테스트를 통해서 비교해 보겠습니다.
내부에서는 <v-card/>를 통해서 이렇게 저렇게 꾸밀 수 있습니다. 여기서 주의할 점만 한가지 말씀드리겠습니다. <v-card>의 경우 기본 설정만 하게 된다면 아래와 같은 결과를 볼 수 있습니다.
특이하게 오른쪽에 black영역이 보이게 됩니다. 이는 <v-card>가 구성된 <v-card-text>중에서 가장 width가 긴 영역까지를 그 범위로 하기 때문입니다. 따라서....
<v-card-text class="white--text pt-0">
This is the Ayotera Lab's AT Project test vue.js web page.
</v-card-text> 이 부분이 가장긴 <v-card> 영역으로 되고, 나머지 <v-footer>영역은 dark props의 영향을 받아서 black의 background가 보여지는 것 입니다.
이를 해결하기 위해서는 <v-card>에 width설정을 추가해 줍니다.
<v-card tile color="#689F38" dark center class="white--text text-center" width="100%">다음과 같이 width = "100%"로 하면 정상적으로 반영이 된 것을 볼 수 있습니다.
2. props 적용에 따른 차이 비교
이제 느끼시겠지만 vuetify를 통해서 tag를 적용할때는 대부분의 control은 props를 통해서 진행이 됩니다. 그렇다면 주요 props에 대해서 알아보고 필요할 경우 test를 통해서 이해해 보겠습니다.
[fixed]
적용할 경우 본문에 데이터가 많아서 scroll이 생기더라도 footer는 항상 페이지의 하단에 위치해 있음
단, 최하단으로 scroll을 위치시킬때 가장 하단의 본문 내용은 footer에 가려져서 보이지 않음
이를 해결하기 위해서는...
[app]
이 prop를 사용하면 footer를 application의 구조 중 일부로 인식하게 됩니다. 따라서 본문이 위치하게 되면 그 하단에 footer가 나타나게 되는 것 입니다.
이제야 하단에 링크들이 들어있는 text가 나오게 되네요~
[absolute]
fixed와 app은 항상 하단에 footer가 위치한다고 하면... absolute는 항상이 아닌 본문이 끝나는 시점에서만 footer가 나오게 됩니다. 하지만 fix와 같이 최하단으로 scroll을 위치시킬때 가장 하단의 본문 내용은 footer에 가려져서 보이지 않게 됩니다.
이를 보정하기 위해서는 absolute props를 삭제해주면 됩니다. 결국 가장 default는 본문의 모든 내용이 나온 후 마지막에 footer가 등장하는 것 입니다.
[dark]
기존에도 알아본 것과 같이, dark theme를 사용하는 것 입니다. 결국 text와 icon들은 while가 될 것입니다. 또한 기본 배경도 black이 됩니다.
[padless]
footer영역에 padding이 0px이 되게하는 설정입니다.
[tile]
footer영역에 border-radius를 없애는 설정입니다. 따라서 footer의 네 귀퉁이는 칼같은 직사각형이 될 것 입니다.
뭐... 크게 어렵지는 않죠?? 이번에는 단순하게 footer에 대해서 추가하는 방법을 알아보았습니다. 나중에는 아마 추가된 icon에 대해서 동작하는 부분 정도가 추가될 것 같습니다.
- Ayotera Lab -
댓글