Vue.js28 [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. [Vue.js] 11. use v-navigation-drawer 바로전에 App Bar를 구성해 보았습니다. 그 요소중에서 App Bar Navigator에 대해서 좀 더 깊이 알아보겠습니다. 사실 기존에 구현한 내용은 Navigator를 통해서 생성한 icon을 클릭했을때 아무런 반응이 없었습니다. 하시만 실제적으로는 클릭을 한다면 무언가... 왼쪽에서 메뉴판이 쫙 나오면서 리스트를 제공해야 합니다. 이렇게 가능하게 해주는 tag는 바로... 입니다. 하지만 실질적인 코드적인 내용으로 생각해보면... 을 클릭하면 가 보이게 하고, 이외의 영역을 클릭하면 사라지게 하는 것 입니다. 그럼 차근차근 알아보도록 하겠습니다. 1. v-navigation-drawer 구현 우선 v-navigation-drawer 자체를 구현해 보겠습니다. 실질적으로 안에 menu는 아직 넣지.. 2021. 3. 2. 이전 1 2 3 4 5 6 7 다음
