개발고양이발

목표- 표시될 영역의 정중앙에 요소를 추가 해결- 을 영역 내에 가득 채우기- height="100vh" : 화면 view height 기준 꽉 채우기- d-flex align-center justify-center : 수평 수직 중앙으로 정렬 중앙! 참고https://vuetifyjs.com/en/api/v-container/ https://vuetifyjs.com/en/api/v-container/ vuetifyjs.com

max 를 통해서 선택할 수 있는 최대 개수를 설정할 수 있다....참고https://vuetifyjs.com/en/api/v-chip-group/ https://vuetifyjs.com/en/api/v-chip-group/ vuetifyjs.com

원인- 클라이언트와 서버가 동기화가 되지 않았을 경우 발생하는 에러 해결- 를 통해 간단히 해결 가능 {{ user?.name }}참고https://github.com/nuxt/nuxt/issues/12266 [Vue warn]: Hydration node mismatch: · Issue #12266 · nuxt/nuxtEnvironment Operating System: Linux Node Version: v14.18.1 Nuxt Version: 3.0.0-27243104.5e903ae Package Manager: Yarn Bundler: Vite User Config: meta, buildModules Runtime Modules: - Build Modules:...github.com

문제 - 작성한 내용이 자동으로 줄 바꿈이 되지 않는 현상 해결- word-break: break-all; 을 추가하여 자동 줄바꿈을 할 수 있게 됨..post-content { margin-top: 5px; font-size: 12px; word-break: break-all;}참고https://developer.mozilla.org/en-US/docs/Web/CSS/word-break word-break - CSS: Cascading Style Sheets | MDNThe word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.developer.m..

문제- 변수 값을 변경하였으나 페이지 화면에서는 변경되지 않는 현상 원인- 일반 변수는 값을 변경하여도 DOM에 접근할 수 없다. 해결 - DOM에 접근 하기 위해 ref 속성을 사용해야 한다.const value = 0; (X)const value = ref(0); (O)참고https://ko.vuejs.org/guide/essentials/template-refs Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org

문제- v-bottom-navigation 하위에 v-list-item 으로 메뉴 생성 시 메뉴 간의 간격 발생 원인 - padding 값이 존재하여 item 사이의 간격 발생 해결 - important를 붙여주어서 padding 값을 0 으로 변경