VueJS/VueJS
2023/06/14__VueJS(Vuetify)
HELLICAT
2023. 6. 14. 18:31
반응형
03. 뷰티파이 기초 쌓기
간단하게 Vue에서 사용하는 UI프레임워크
- 01. 뷰티파이, 뷰 최고의 UI프레임워크
뷰티파이(Vuetify.js)란 무엇인가?
- 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크
- 구글의 머티리얼 디자인 스펙2를 충실하게 표현
- 현대 웹앱에 필요한 컴포넌트를 편리하게 사용
뷰티파이가 주목받는 4가지 특징
- 구글 머티리얼 스펙의 충실한 지원
- 80개 이상의 시맨틱 머티리얼 디자인 컴포넌트
- 빠른 속도
- 쉬운 학습곡선
- 02. 기본 레이아웃 만들기 1
삼단 레이아웃 실습
- 모바일 UI의 가장 기본이 되는 툴바, 본문, 바닥글의 삼단 레이아웃을 구성
핵심 내용
- 틀바 영역: v-toolbar 엘리먼트 사용
- 본분 영역: v-main 엘리먼트 사용
- 여백 자동 설정: v-container 엘리먼트 사용
- 바닥글 영역: v-footer 엘리먼트 사용
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap|Material+icon"
rel="stylesheet"
/>
<!-- |Material+icon 아이콘 같이 사용하려면 기입 -->
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
rel="stylesheet"
/>
<title>vuetify practice</title>
</head>
<body>
<div id="app">
<!-- 첫화면의 시작은 v-app엘리먼트 사용 -->
<v-app>
<!-- 상당부분은 v-app-bar 엘리먼트 사용 -->
<v-app-bar app>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Header입니다</v-toolbar-title>
</v-app-bar>
<!-- 콘텐츠 부분은 v-main 엘리먼트 사용 -->
<v-main>
안녕하세요
<v-container>Contents 입니다.</v-container>
</v-main>
<!-- 하단 부분은 v-footer 엘리먼트 사용 -->
<v-footer>
<div>Footer입니다.</div>
</v-footer>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
});
</script>
</body>- 03. 기본 레이아웃 만들기 2
구성요소 추가 및 스타일 적용
- 틀바에 버튼 아이콘을 추가
- 콘텐츠 영역에 타이포그래피 추가 및 스타일 적용
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap|Material+icon"
rel="stylesheet"
/>
<!-- |Material+icon 아이콘 같이 사용하려면 기입 -->
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
rel="stylesheet"
/>
<title>vuetify practice</title>
</head>
<body>
<div id="app">
<v-app>
<!-- 앱바색상을 primary(파란색)로 설정하고 fixed로 위치 고정 -->
<v-app-bar app color="primary" dark fixed>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>마스터 페이지</v-toolbar-title>
<!-- 우측에 추가메뉴 아이콘을 넣기 위해 v-spacer엘리먼트사용 -->
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<!-- display-1/3, body-1/2 타이포그래피 서체 종류와 크기로 설정 -->
<h1 class="display-1 my-5">안녕하세요</h1>
<!-- my-4로 상하 안쪽여백 설정 -->
<p class="body-2 my-4">마스터페이지입니다.</p>
<v-divider></v-divider>
<h1 class="display3 my-4">안녕하세요</h1>
<p class="body-1 my-4">마스터페이지입니다.</p>
</v-container>
</v-main>
<!-- footer 색상을 secondary로 설정하고 fixed로 위치를 고정 -->
<v-footer color="secondary" dark fixed>
<!-- mx-auto는 블럭레벨 엘리먼트의 내용을 가운데 정렬시킴 -->
<div class="mx-auto">Copyright ©</div>
</v-footer>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
});
</script>- 04. 카드 UI
카드 UI는 실전에서 상당히 많이 사용되는 UI 컴포넌트
- v-card 엘리먼트로 카드 UI를 쉽게 구현
- v-img와 v-card-title 엘리먼트로 이미지와 제목 작성
<v-app>
<!-- 앱바색상을 primary(파란색)로 설정하고 fixed로 위치 고정 -->
<v-app-bar app color="primary" dark fixed>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>마스터 페이지</v-toolbar-title>
<!-- 우측에 추가메뉴 아이콘을 넣기 위해 v-spacer엘리먼트사용 -->
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<!-- 카드 UI 사용을 선언하는 v-card 엘리먼트 -->
<v-card max-width="400">
<!-- 카드 상단에 이미지 배치 // aspect-ratio 는 비율 -->
<v-img src="" aspect-ratio="2"></v-img>
<!-- 카드 중간에 텍스트 배치 -->
<v-card-text>
<div>
<!-- 제목의 타이포그래피 스타일을 title로 설정 -->
<!-- 하단의 margin을 2로 설정 -->
<h2 class="title primary--text mb-2">카드UI</h2>
<p class="mb-0">카드 디자인에 출력될 텍스트를 입력합니다.</p>
</div>
</v-card-text>
<!-- 카드 하단에 버튼 배치 -->
<v-card-actions>
<!-- 버튼 색상은 붉은 색으로 설정 -->
<v-btn color="red white--text ">확인</v-btn>
<!-- outline으로 버튼의 배경색 제거 -->
<v-btn outlined color="red">취소</v-btn>
<v-btn color="#9c27b0 dark">적용</v-btn>
</v-card-actions>
</v-card>
</v-container>
</v-main>
<v-footer color="secondary" dark fixed>
<div class="mx-auto">Copyright ©</div>
</v-footer>
</v-app>- 05. 그리드 기본 원리
그리드는 화면 레이아웃 작업에서 가장 핵심
- 반응형 웹 디자인을 하려면 그리드 사용법은 필수
- v-row, v-col 엘리먼트를 통해 그리드 기능을 충실히 제공
<v-app>
<v-main>
<v-container>
<!-- 한 행은 12개의 열이 기준 -->
<v-row class="text-center">
<v-col cols="12" class="border_style">xs12</v-col>
<v-col cols="6" class="border_style">xs6</v-col>
<v-col cols="3" class="border_style">xs3</v-col>
<!-- 현재 열의 개수가 9개인데 열 4개를 추가하면 12를 초과하므로 자동 줄바꿈 -->
<v-col cols="4" class="border_style">xs4</v-col>
<!-- 총 12개의 열을 추가 . 8개열을 채운 후 4개의 열은 자동으로 줄바꿈 -->
<v-col
cols="1"
v-for="item in 12"
v-bind:key="item.id"
class="border_style"
>xs1</v-col
>
</v-row>
<br />
<v-row class="text-center">
<v-col
cols="1"
v-for="item in 20"
v-bind:key="item.id"
class="border_style"
>
xs1</v-col
>
</v-row>
</v-container>
<v-container fluid>
<v-row class="text-center">
<v-col cols="12" sm="4" class="border_style">sm4</v-col>
<!-- offset으로 그리드 사이에 4개의 열 간격을 띄움 -->
<v-col cols="12" sm="4" offset-sm="4" class="border_style"
>4</v-col
>
</v-row>
</v-container>
</v-main>
</v-app>- 06. 반응형 그리드
반응형 웹 디자인을 그리드로 제작
- 데스크톱 pc와 모바일 웹 디자인을 반응형으로 제작
<v-app>
<v-app-bar app flat color="primary">
<v-toolbar-title class="white--text mx-auto">
화면 크기에 따른 레이아웃 변경
</v-toolbar-title>
</v-app-bar>
<v-main>
<v-container>
<!-- 한 행은 12개의 열이 기준 -->
<v-row>
<!-- 첫번째 열의 반응형 크기를 지정 1. xs의 경우 : 12개의 열을 사용하여
한 행을 모두 차지 2. sm의 경우 6개의 열을 사용하여 절반 너비를
차지 -->
<v-col cols="12" sm="6">
<h2 class="mb-3">Content1</h2>
<p>첫 번째 영역</p>
</v-col>
<!-- 두번째 열의 반응형 크기 지정
1.xs의 경우 :12개의 열을 사용하여 한 행을 모두 차지
2.sm의 경우 : 6개의 열을 사용하여 절반 너비를 차지 -->
<v-col cols="12" sm="6">
<h2 class="mb-3">Content1</h2>
<p>두 번째 영역</p>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>728x90