분류 전체보기
-
Vue 프로젝트 Search - 필터프로젝트/영화 검색 (Vue) 2021. 8. 1. 13:50
Vue 프로젝트 Search - 필터 Vue 프로젝트 Search - 필터 순서 1. /src/components/Search.vue 생성 All Years {{ item }} 2. /src/routes/Home.vue 연결 결과 참고 https://getbootstrap.com/docs/5.0/forms/form-control/ Form controls Give textual form controls like s and s an upgrade with custom styles, sizing, focus states, and more. getbootstrap.com https://getbootstrap.com/docs/5.0/forms/select/ Select Customize the native s ..
-
Vue 프로젝트 Headline프로젝트/영화 검색 (Vue) 2021. 7. 31. 02:34
Vue 프로젝트 Headline Vue 프로젝트 Headline 순서 1. /src/components/Headline.vue 생성 OMDb API THE OPEN MOVIE DATABASE The OMDb API is a RESTful web service to obtain movie information, all content and images on the site are contributed and maintained by our users. If you find this service useful, please consider making a one-time donation or become a patron. 2. /src/routes/Home.vue 연결 결과 참고 https://getboot..
-
Vue 프로젝트 Header - Logo 및 Google Fonts프로젝트/영화 검색 (Vue) 2021. 7. 31. 01:07
Header - Logo 및 Google Fonts 폰트 로 제작된 로고 Header - Logo 및 Google Fonts 순서 1. google font 에서 사용할 폰트 가져오기 2. /index.html 연결 3. /src/components/Logo.vue 생성 OMDbAPI.COM 4. 생성한 Logo 컴포넌트를 Header.vue에서 출력 ... 생략 결과 참고 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com
-
Vue 프로젝트 Header - Nav프로젝트/영화 검색 (Vue) 2021. 7. 29. 05:05
Header - Nav 각 네비 버튼을 누르면 연결된 Vue 페이지 이동 Header - Nav 순서 1. /src/component/Header.vue 생성 {{ nav.name }} 2. App.vue 에서 Header.vue 연결 3. /src/routes/Movie.vue 생성 4. 페이지 관리를 위해 ./src/routes/index.js 에서 Movie.vue 연결 /* 페이지를 관리해주는 구성 파일 */ import { createRouter, createWebHashHistory } from 'vue-router' import Home from './Home' import Movie from './Movie' import About from './About' /* createRouter()..
-
Vue 프로젝트 Bootstrap 구성프로젝트/영화 검색 (Vue) 2021. 7. 28. 04:31
구성 순서 1. npm i bootstrap@next (부트스트랩 설치) 2. src/scss/main.scss 파일 생성 /* main.scss */ @import "../../node_modules/bootstrap/scss/bootstrap"; /* .scss 생략 */ 3. App.vue 파일에 main.scss 연결 /* App.vue */ 4. main.scss 커스터 마이징 /* main.scss */ // Default variable overrides $primary: #FDC000; // Required @import "../../node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/varia..
-
Vue 프로젝트 Router 구성프로젝트/영화 검색 (Vue) 2021. 7. 24. 03:56
Vue Router 특정한 사이트를 제작할 때 페이지를 구분하는 것이 라우터 기술 -> 일반적으로 뷰에서 화면이 전환될 때, 전환하는 행위를 Route 라고 표현 -> Vue에서는 SPA를 제작할 때 라우팅 라이브러리로 Vue Router 를 제공 Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다. 아래의 기능을 포함합니다. 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 세밀한 네비게이션 컨트롤 active CSS 클래스를 자동으로 추가해주는 링크 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동..