FRONT-END

Logo 만들기

inner처럼 가운데 bootstrap을 통해 정렬하기

1. navigations로 nav태그들을 나열하기 위해 Search, Movie, About을 만들고 href로 주소도 배치한다.

2. 나열될 div에 v-for로 나열시키고 RouterLink에 :to로 href를 할당한다.

3. bootstrap처럼 버튼을 누를시 active가 되는것을 위해 active-class="active"로 하고 nav-pills로 bootstrap 양식을 맞춘다.

4. App.vue에 Header로 선언한다.

페이지 라우터 이동 연결 설정

1. npm install vue-router@4 설치

2. main.js 설정

import router from './routes/index.js' //import 추가

createApp(App).use(router).mount('#app') //.use(router)추가

3. index.js 설정import { createRouter, createWebHashHistory } from 'vue-router'

export default createRouter({history: createWebHashHistory(),routes:[{ path:'/'. //주소 뒤 경로 component:'' //Router폴더안에 있는 vue파일을 연결}]})

index.js 내부routes-component 설정하는법

bootstrap 커스텀하기-scss

1. npm install bootstrap@next로 최신 bootstrap설치

2. main.scss 선언

@import "../../node_modules/bootstrap.scss/bootstrap.scss

3. 적용할 vue에 scss 선언

<style lang="scss">

@import "~scss/main";

</style>

4. main.scss에서 custom진행

$primary: #FDC000;

@import "../../node_modules/bootstrap/scss/functions"; //위 커스텀 적용후 import

@import "../../node_modules/bootstrap/scss/variables"; //위 커스텀 적용후 import

@import "../../node_modules/bootstrap/scss/mixins"; //위 커스텀 적용후 import