Vue 웹앱 프로젝트_5

## Vue 웹앱 프로젝트_5

---

- 기술참조1: https://vuetifyjs.com/ko/components/toolbars/
- 기술참조2: Front-end 간단한 게시판 구현 ( VueJs + Vuetify). https://dollvin.tistory.com/61
- 기술참조3: Vue와 Firebase로 모던웹사이트 만들기. https://fkkmemi.github.io/talk/vf-000-intro/
- 기술참조4: 기술참조3의 Git소스. https://github.com/fkkmemi/vf
- 개발언어: Vue(Javascript 문법 확장판)
- 개발환경: VSCode IDE사용, vue create . 사용-
- Vue 프로젝트 설치시 vue-router, vuex 선택 이후 모두 default 선택.
- 실행환경: yarn serve = npm run serve (필요: npm i -g yarn)
- 배포환경: 구글파이어베이스 firebase deploy(필요:npm install -g firebase-tools)
- 결과확인링크: https://covid19-kr.web.app/
- 작업결과소스: https://github.com/miniplugin/vue
- 같은의미: npm install = yarn install = yarn (package.json 의 의존성 패키지를 node_moudles 폴더에 설치해 준다.)

---

### 20200409 작업내역(아래)

- vuetify기반 v-list-group > template 태그로 2단 메뉴 만들기.
- vuetify기반 v-card 태그로 카드 디자인 만들기.
- 반응형 레이아웃 구조 만들기: v-container > v-layout > v-flex
- 반응형에서 보통 xs12 sm6 md4 3개 까지만 지정한다.

```
클래스 속성 및 기기별 Viewport 종류
- Extra small   xs [mobile]     < 600px
- Small         sm [tablet/pad]  600px > < 960px
- Medium       md [notebook]   960px > < 1264px*
- Large         lg [desktop]     1264px* > < 1904px*
- Extra large   xl [4k ultra-wides monitor] > 1904px*
```
- 반응형 예, 타블렛이 아닐때 만 내용 보이기(아래)

<v-flex

        xs12

        sm6

        md4

        v-for="(data,index) in 9"

        v-bind:key="index"

      >

        <v-card color="red">

          <v-card-title

            primary-title

            v-if="!$vuetify.breakpoint.sm"

          >

            <!-- 화며크기= xs: 모바일, sm: tablet/i패드, md: 노트북이상 -->

            {{$vuetify.breakpoint.xs + ' ' + $vuetify.breakpoint.sm + ' ' + $vuetify.breakpoint.md}}

          </v-card-title>

          <v-card-text>

- 위 결과 출력(아래)

Ps. 위 vue 스크립트 v-if 조건 속성으로 처리 할 수 도 있으나, css로도 처리 가능함. 아래 사용예,

<v-toolbar-items class="hidden-sm-and-down">

위 css 화면크기 조건은 sm 즉, 타블렛/i패트 + 보다 작은 down 되는 화면에서는 hidden숨기다는 의미.