vuetify10 [Vue.js] 23. v-navigation-drawer 에 link 구현 참으로 오랫만에 글을 쓰는것 같습니다. 지난 번에는 Vue.js를 이용해서 원하는 페이지의 전체 큰 틀을 만들어보는 내용을 작성했었는데... 이번에는 그 내부로 좀 더 들어가서 navigation bar에서 표시되는 내용을 꾸며 보도록 하겠습니다. 보통 navigation bar에는 개인 사용자의 기본 정보와 제공되는 페이지 link 가 표시되는데, 최종 목표는 아래와 같이 nav bar를 제공하고, 각 link가 정상적으로 동작하게 하는것으로 하겠습니다. 1. Vuetify를 통한 Navigation Bar적용 확인 Vuetify에서는 Navigation Bar를 적용하기 위해서 v-navigation-drawer를 사용합니다. 해당 내용은 기존에 작성했던 내용이 있어서 링크를 걸어놓겠습니다. 2021.. 2022. 2. 18. [Vue.js] 13. use Grid System 이번에는 Dashboard 등 화면 Layout구성의 근간이 되는 Grid System에 대해서 알아보고자 합니다. Vuetify에서는 Layout 구성을 위한 방법을 제공하는데... 그것이 Grid System 입니다. 1. Grid System이란? Vuetify는 flex-box를 사용하여, 화면을 가로를 기준으로 12개로 나누어 유연하게 구성이 가능하도록 기능을 제공합니다. 이를 기준으로 사용자는 자신이 원하는 기준에 맞게 Layout을 구성하여 사용하면 됩니다. 여기에는 window size 및 window의 방향을 고려한 5가지의 Breakpoints를 지정하여 사용이 가능하도록 제공합니다. 이러한 해상도에 대한 정보는 Vuetify 공식 페이지에서 제공하는 내용을 작성해 보겠습니다. [12 .. 2021. 3. 4. [Vue.js][Error] Window size 조정 시 footer 하단에 scroll생기는 현상 가볍게 누구나 발생가능한 error사항에 대해서 한가지 알아보도록 하겠습니다. web application을 만들다 보면 다양한 상황의 사용자들이 접근할때를 고려해서 개발을 진행해야합니다. 예를 들면, 어떤 사람은 Desktop을 사용해서... 또 어떤 사람은 Tablet PC로, 또 어떤 사람은 Mobile phone으로... 참으로 다양한 환경에서의 접근이 시도되는데... 이런 상황에서도 내가 개발한 application은 사용자의 불편함이 없이 구동 되어야 합니다. 1. Error 발생 [문제상황] Desktop으로 잘 서비스 되는 vue.js로 개발된 web application이 Mobile phone으로 접근하면, 혹은 Windows size를 항상 v-footer 밑에 공백이 생기고 scro.. 2021. 3. 4. [Vue.js] 12. use v-footer 글을 진행하면서 느끼신 분들도 있을 것 같습니다. 현재 application의 main 틀을 만들고 있으며, 그 구성요소별로 하나하나씩 단계적으로 알아가고 있다는 것을요. 맞습니다. 이전에는 app bar를 알아보았고, 그 다음에는 navigator를 알아보았으며, 그 다음에는 옆에 보이는 menu에 대해서도 알아보았습니다. 이번에는 가장 하단에 보이는 footer에 대해서 알아보겠습니다. 우선 간단하게 footer란 무엇일까요?? 흔히 문서를 작성하다보면.... 머리글, 바닥글이라고 들어보셨을 것 입니다. 이 중에서 바닥글이 바로 footer입니다. 이를 테스트용으로 구현한 화면은 아래와 같습니다. 많이 보신 스타일 일수도 있고, 아닐지도 모릅니다. 어떤 웹페이지에서는 footer에 사이트맵을 제공하는.. 2021. 3. 3. 이전 1 2 3 다음
