Vue+Vuetify+Vue-Router 시작하기 - 4

Vuetify는 신세계다.

입에 침바르고 하는 말이 아니다. 정말 신세계였다. 내가 css 건들면서 직접 수정할 만한 것이 없다. 다만 안드로이드에서 흔히보면 그 구글 머티리얼 디자인이라서 좀 식상할 순 있지만, 디자인에 대해 공부하고 머리 좋은 사람들이 모여서 만든게 안좋을리가 없잖아

이거 쌩 HTML CSS로 짜면 플렉스 쭈물럭대면서 레이아웃 머리짜매고 맞춰야되는데 그럴 필요가 없다.
v-머시깽이만 써주면 저거 금방만듬; 미쳤다.

<v-app>
    <v-app-bar>
      app bar
    </v-app-bar>
    <v-content>
      content
    </v-content>
    <v-footer>
      footer
    </v-footer>
    <v-bottom-navigation>
      bottom-nav
    </v-bottom-navigation>
  </v-app>

-- 세상에 .. 코드가 이리 간단하다..

공식문서에 보면 https://vuetifyjs.com/en/components/application/
UI-Components에서 Application 이라고 있는데, 여기에 가보면 대충 뷰티파이는 어떻게 페이지 구성을 해야되는지 친절하게 '영어'로 설명되어있다. 한글로 봐도 되긴한데 자꾸 페이지 리로딩되는거 짜증나서 그냥 영어로 보기로 했다.

1. v-app

이거는 쫌 중요한 내용인것 같다.
애플리케이션이 제대로 작동하려면 v-app 구성 요소로 감싸야 합니다. 이 구성 요소는 적절한 교차 브라우저 호환성을 보장하는 데 필요합니다. Vuetify는 한 페이지에서 여러 개의 분리된 Vuetify 인스턴스를 지원하지 않습니다. v-app은 앱 본문 내에 있을 수 있지만 하나만 있어야 하며 모든 Vuetify 구성 요소의 상위여야 합니다.

애플리케이션의 동작을 위해선 v-app이 필요하고 템플릿 내에 반드시 하나만 존재해야 한다.

2.v-system-bar

"v-app-bar보다 우선 순위가 높은 애플리케이션의 맨 위에 항상 배치됩니다."

요거는 그거다. 모바일 타입 염두 해두고 만든 시스템 바.
와이파이 떠잇고 배터리 얼마남았는지 보이는거 그거.
데탑에서는 쓸일이 없기때문에 만들어놔도 데탑에선 와이파이랑 배터리 남은거 안보일껄
공식문서 설명에는 이렇게 나와있음.

3.v-app-bar

"v-system-bar보다 우선 순위가 낮은 애플리케이션의 맨 위에 항상 배치됩니다."

이녀석은 시스템 바 보다 후배치인 녀석인데, 웹의 맨위에 바 타입으로 나타나는 친구다.
저 위에 스크린샷 보면 꽤 넓게 배치되있는데 그거는 내가 아무것도 설정을 안잡아서 그런다;

4.v-navigation-drawer

"애플리케이션의 왼쪽 또는 오른쪽에 배치하고 v-app-bar 옆 또는 아래에 배치하도록 구성할 수 있습니다."

흔히 우리가 알고있는 내비게이션을 그려주는 태그타입이다. 별로 설명할게 없다.

ETC

v-bottom-navigation: Is always placed at the bottom of an application with a higher priority than v-footer.

v-footer: Is always placed at the bottom of an application with a lower priority than v-bottom-navigation.

구글번역이나 파파고로 설명 읽어보기 바람; 별로 중요하게 사용되는 애들은 아닌거 같음. 뭐 대충 바닥에서 노는 애들인데 지들끼리 우선순위 있다는 내용임

UI 컴포넌트를 갖고 놀려면 일단 페이지 레이아웃 부터 잡아야겠다.