Vue.js30 [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. [Vue.js] 10. use v-app-bar 지금까지는 단편적인 개별 화면을 구성하는 방법에 대해서 알아보았습니다. 하지만 SPA를 만들기 위해서는 개별적인 화면이 아닌 전체 Frame(틀)을 구성하고 그 안에서 동작하는 sub frame을 만들어서 동작을 시키게 됩니다. 기존의 단편적인 개별화면이 sub frame이 되겠고, 오늘부터는 main frame을 만드는 방법에 대해서 차근차근 알아보겠습니다. Material Design에 대해서 들어보셨나요?? Google이 Android 스마트폰에 적용하면서 유행하며 널리 퍼진 방식으로 간단하게 말하면... 평면적인 디자인을 그림자 효과를 주어 입체효과를 주고 아주 최소화된 feature를 사용해서 원하는 바를 최대한으로 표현하는 디자인 방식을 말합니다. 대표적으로 Gmail, YouTube 등이 있.. 2021. 2. 26. 이전 1 2 3 4 5 6 7 8 다음
