티스토리 뷰
뷰티파이 (vuetify.js)는 뷰 자바스크립트 프레임워크에 구글의 공식 material design을 사용할 수 있는 컴포넌트 프레임워크입니다.
뷰 생태계에는 다양한 UI 프레임워크가 있지만, 뷰티파이를 적극 추천합니다.
뷰티파이 공식 홈페이지 v2.vuetifyjs.com/ko/
Vue Material Design 컴포넌트 프레임워크 — Vuetify.js
v2.vuetifyjs.com
그이유는구글의 material design 스팩을 충실하게 표현할뿐만아니라 웹앱에 필요한 컴포넌트를 편리하게 사용할 수 있도록다양한 기능을 지속적으로 지원하기 떄문입니다.
뷰티파이의 특징은 다음과 같습니다.
① 구글 머터리얼 스펙 지원
- 디자이너가 직접 커스터마이징할 수 있는 다양한 옵션을 제공
② 80개이상의 시맨틱 메터리얼 디자인 컴포넌트
- 뷰티파이가 제공하는 엘리먼트 이름은 v- 로 시작하여 매우 직관적임
- 모던 웹앱에서 반드시 필요한 최신 앱바, 플로팅 버튼, 카드 UI 등을 사용 가능할 뿐만아니라 그리드 레이아웃, 타이포그래피의 UI/UX 제공
③ 빠른 속도
- 실행속도 빠름
- 성능을 위한 최적화 작업 보장
④ 쉬운 학습
- 공식 문서 제공 (샘플 소스 등)
1. 레이아웃 만들기
VSCode를 열어 프로젝트에 layout1.html파일을 생성합니다.
v2.vuetifyjs.com/ko/getting-started/quick-start/에서 CDN 으로 연결하기 코드를 복사합니다.
vuetifyjs.com/en/professional-support/consulting/
Vuetify — A Material Design Framework for Vue.js
vuetifyjs.com
콤포넌트 참고 사이트입니다.
<!DOCTYPE html>
<html>
<head>
<!-- vuetify.js 에 필요한 스타일 파일 링크 연결 -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<!-- 모바일 기기 접속시 화면 크기 조절을 위해 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</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>
<!-- content 부분은 v-content 엘리먼트 사용 -->
<v-content>
Hello world
<v-container>content입니다.</v-container>
</v-content>
<v-footer>
<div>Footer입니다.</div>
</v-footer>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></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>
</html>
실행화면입니다.
v-app-bar -앱바 영역 지정, 그 안에 v-toolbar-title 를 사용하여 제목의 내용을 표기
v-content - 본문이 화면어디에 위치할지 정함
v-container - 앱바와 푸터를 제외한 영역 자동 여백
2 . 구글 머터리얼 디자인 적용
VSCode를 열어 first_theme.html 파일을 생성합니다.
<!DOCTYPE html>
<html>
<head>
<!-- vuetify.js 에 필요한 스타일 파일 링크 연결 -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<!-- 모바일 기기 접속시 화면 크기 조절을 위해 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</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-content>
<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="display-3 my-4">안녕하세요</h1>
<p class="body-1 my-4">마스터 페이지입니다.</p>
</v-container>
</v-content>
<!-- 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.x/dist/vue.js"></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>
</html>
dark 어트리뷰트를 지정하면 글자색을 흰색으로 바꾼 후 테마와 글자의 명도를 자동으로 조정하여 가독성을 높일 수 있습니다.
마지막으로 fixed 어트리뷰트를 지정하면 스크롤에 영향받지 않고 앱바의 위치를 고정합니다.
앱바의 메뉴 아이콘과 텍스트를 오른쪽 정렬로 넣고 싶다면 v-spacer를 넣어서 구분합니다.
이 엘리먼트를 넣기 전까지는 왼쪽 정렬로 나타나지만, 넣고나면 오른쪽 정렬로 표시됩니다.
material.io/resources/icons/?style=baseline
Material Icons
Get Material Icons
material.io
fontawesome.com/icons?d=gallery
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
구글에서 제공하는 아이콘을 사용하고 싶다면, v-btn 엘리먼트로 버튼을 먼저 넣고 아이콘의 공식 이름을 지정합니다.
타이포그래피는 디자인에서 가장중요한 요소입니다. 사용하는 방법은 원하는 타이포그래피 스타일을 속성으로 지정하면됩니다. 타이포 스타일은 크게
display, 장식용 큰글자
headline, 큰 제목
title, 제목
subheading, 부제목
body, 본문
caption ,캡션
overline 개요
까지 7가지로 나눌 수 있습니다.
설정옵션인 속성명과 크기는 다음 사이트를 참조바랍니다. 값이 커질수록 크기가 커집니다.
vuetifyjs.com/en/styles/text-and-typography/
Text and typography
View the various typography styles. From headings to captions, with various weights, sizes and italics.
vuetifyjs.com
뷰티파이는 여백 편집을 어트리뷰트에 직접 클리ㅐ스 이름으로 지정할 수 있습니다.
참고사이트 vuetifyjs.com/en/styles/spacing/
CSS Spacing helpers
Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5.
vuetifyjs.com
머터리얼 디자인의 공식폰트는 default값이 roboto폰트, 한글은 noto 폰트입니다.
material.io/design/typography/language-support.html#language-considerations
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
위 사이트에서 폰트를 내려받아 적용하면 됩니다.
엘리먼트를 가운데에 정렬하는 가장 쉬운방법은 여백을 활용하는 방법입니다. mx-auto 를 사용하여 바깥쪽 여백중에 left와 right를 항상 같은 값으로 설정하면 엘리먼트가 가운데 정렬로 오게 됩니다.
<div class="mx-auto">Copyright ©</div>div에 mx-auto를 클래스 선택자로 지정하면 손쉽게 가운데 정렬이 되는데 div 엘리먼트의 너빗값이 지정되지 않아 안쪽값만큼만 너비가 설정되어있기 떄문입니다.
vuetifyjs.com/en/styles/flex/#auto-margins
CSS Flex helpers
Flex helper classes allow you to modify flexbox parents and children.
vuetifyjs.com
4 . 카드 UI 만들기
모던 앱 디자인에서 가장 큰 특징은 카드 UI를 적응 활용한다는 점입니다. 카드 UI는 실전에서 매우 많이 사용됩니다.
뷰티파이에서는 v-card로 카드 UI를 쉽게 구현할 수 있습니다.
VSCode를 열어 card_ui.html를 파일을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<!-- 카드 UI 사용을 선언하는 v-card 엘리먼트 -->
<v-card max-width="400">
<!-- 카드 상단에 이미지를 배치시킴 -->
<v-img src="https://picsum.photos/id/1068/400/300" aspect-ratio="2.3"></v-img>
<!-- 카드 중간에 텍스트를 배치시킴 -->
<v-card-text>
<div>
<!-- 제목의 타이포그래피 스타일을 title으로 설정-->
<!-- 하단의 margin 크기값을 1로 설정-->
<h2 class="title primary--text mb-2">시대정신 선도</h2>
버추얼 컴퍼니에 관심을 가져 주셔서 감사합니다. 버추얼 컴퍼니는 오랜 역사를 지니며 그동안 많은 발전을 하였습니다.
</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-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></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>
</html>
이미지 제공 사이트
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos
색상은 lighten-5~1, accent-1~4, darken-1~4 로 스펙트럼 사용 darken,ㅁfhdarkendarken
vuetifyjs.com/en/styles/colors/#material-colors
Material color palette
Learn about the colors of Material Design. Consume the javascript color pack directly in your application.
vuetifyjs.com
5 . 그리드 레이아웃 만들기
그리드는 화면 레이아웃 작업에서 가장 핵심입니다. 반응형 웹 디자인을 하려면 그리드 사용법은 필히 숙지해야합니다. 뷰티파이도 v-row. v-col 엘리먼트를 통해 그리드 기능을 제공합니다.
VSCode를 열어 grid_layout.html 파일을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<style>
/* 테두리를 볼 수 있도록 그리드 스타일 설정 */
.border_style {
border-color: rgb(5, 121, 30);
/* 초록색 */
border-width: 1px;
border-style: solid;
background-color: rgb(153, 204, 14);
/* 연한 초록색 */
}
</style>
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<!-- 한 행은 12개의 열이 기준 -->
<v-row 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>
<!-- 총 20개 생성함. 열의 개수가 12개를 넘으면 자동으로 줄 바꿈 -->
<v-row 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 text-center>
<v-col sm="4" class="border_style">sm4</v-col>
<!-- offset으로 그리드 사이에 4개의 열 간격을 띄움 -->
<v-col sm="4" offset-sm="4" class="border_style">4</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></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>
</html>실행결과 화면
레이아웃은 크게 행과 열로 나뉩니다 행을 구분하려면 v-row 엘리먼트를 사용합니다. 그러면 행 단위로 사용할 수 있는 영역을 확보할 수 있습니다. 그 이상이 되면 열은 자동으로 다음 행으로 이어집니다.
v-row로 하나의 행을 시작하고 열은 기본값으로 최대 12개 사용합니다.
중단점 breakpoints는 기기가 전환되는 기준 값입니다. 더 자세한 내용은 아래 구글 메터리얼 디자인 공식 사이트를 참조합니다.
material.io/design/layout/responsive-layout-grid.html#breakpoints
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
텍스트를 정렬하는 어트리뷰트의 종류는 다음과 같습니다.
text-코드명-정렬명코드명 xs, sm,md,lg,xl
정렬명 left center,right
vuetifyjs.com/en/components/grids/
Grid system
Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application.
vuetifyjs.com
| 범위(픽셀) | 코드명 | 이니셜 | 기기 종류 |
| 0~599 | xs | eXtra Small | 스마트폰 |
| 600~959 | sm | Small | 테블릿 PC |
| 960~1263 | md | MeDium | 노트북 |
| 1264~1903 | lg | LarGe | 데스크톱 |
| 1904~ | xl | eXtra Large | 데스크톱 (와이드) |
레이아웃에서 행이 정해지면 열을 나눠서 그리드 영역을 지정합니다. 열의 그리드는 v-col을 사용합니다.
열의 개수는 col="12"처럼 반응형 중단점과 개수를 지정하면 됩니다.
열사이의 간격은 offset 어트리뷰트를 사용하여 열 공간을 확보할 수 있습니다.
6 . 반응형 그리드 레이아웃 만들기
VSCode를 열어 grid_responsive_layout.html 파일을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<!-- 앱바를 이용하여 헤더 제목을 작성합니다.-->
<v-app-bar app flat color="primary">
<v-toolbar-title class="white--text mx-auto">Beetle 운동화</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container>
<v-row>
<!-- 첫번째 열의 반응형 크기를 지정합니다.
1) xs의 경우 : 12개의 열을 사용하여 한 행을 모두 차지
2) sm의 경우 : 6개의 열을 사용하여 절반 너비를 차지
-->
<v-col cols="12" sm="6">
<h2 class="mb-3">About Beetle</h2>
<p>운동화는 나를 표현하는 하나의 방법이자 패션을 완성하는 필수 아이템이다. 운동화 대표 브랜드 Beetle은 편안한 발 패션으로 많은 사랑을 받고
있다.</p>
</v-col>
<!-- 두번째 열의 반응형 크기를 지정합니다.
1) xs의 경우 : 12개의 열을 사용하여 한 행을 모두 차지
2) sm의 경우 : 6개의 열을 사용하여 절반 너비를 차지
-->
<v-col cols="12" sm="6">
<h2 class="mb-3">Beetle's Target</h2>
<p>1.운동화에 관심있는 사람은 누구나</p>
<p>2.스니커즈를 사고 싶은 사람</p>
<p>3.차별화된 디자인을 원하는 사람</p>
<p>4.최신 트렌드의 운동화를 원하는 사람</p>
</v-col>
</v-row>
</v-container>
</v-content>
<!-- Footer를 작성합니다. -->
<v-footer color="primary" dark>
<!-- 올해 년도를 자동으로 생성하여 저작권 표시문구 렌더링함 -->
<div class="mx-auto">Copyright © {{ new Date().getFullYear() }}</div>
</v-footer>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></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>
</html>
v-container 을 사용하여 기본 여백을 자동으로 설정합니다.
col="12".sm="6"을 동시에 표현하였습니다. col="12"는 xs일떄 열을 12개 사용한다는 것이고 그다음 중단점인 sm은 열을 6개 사용한다는 뜻입니다. 즉 브라우저 크기 조건에 맞춰서 확보합니다. 그냥 모든 너비를 사용하고 싶을때는 col="12"를 사용하면 됩니다.
7 . 리스트와 아이콘 사용법
VSCode를 열어 icon_list.html 을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-app-bar app color="blue" dark>
<!-- 좌측에 메뉴 아이콘 넣음 -->
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Virtual Company</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container>
<v-card>
<v-list two-line v-for="item in aList" v-bind:key="item.id">
<!-- 항목을 하나씩 가져와서 item 단위로 표시함 -->
<v-list-item @click="">
<!-- 좌측에 대표 아이콘을 먼저 표시함 -->
<v-list-item-avatar>
<v-icon :class="[item.icon_style]">{{ item.icon_name }}</v-icon>
</v-list-item-avatar>
<!-- 제목을 렌더링함 -->
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
<!-- 우측에 화살표 아이콘을 넣음 -->
<v-list-item-action>
<v-btn icon>
<v-icon color="grey">keyboard_arrow_right</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
// 반복되는 항목들은 JSON 배열 데이터로 만들어 반환함
aList: [{
icon_name: 'account_balance',
icon_style: 'red white--text',
title: '회사 소개',
},
{
icon_name: 'photo',
icon_style: 'green white--text',
title: '제품 이미지',
},
{
divider: false,
icon_name: 'movie',
icon_style: 'yellow white--text',
title: '홍보 동영상',
}
]
}
}
})
</script>
</body>
</html>material icon을 사용하기 위해서는 반드시 아래의 소스를 추가하여야합니다.
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">two-line 어트리뷰트는 한 항목에 행이 2개 들어가는 경우를 생각해서 높이를 높게 잡은 경우입니다.
@click에서 @은 v-on의 축약어입니다. 즉 v-on:click
v-bind:key="item.id"은 v-bind의 key에 item의 id값을 저장하는 기능을 수행합니다.
하나의 목록 안에 아이콘을 넣고 싶다면 v-list-item-avatar를 사용합니다.
이 엘리먼트는 아이콘의 원본 이미지를 변경하지않고도 항목에 가장 적합한 모양의 디자인으로 바꿔서 표현해 줍니다.
그리고 v-icon 엘리먼트로 표현하고자 하는 아이콘 모양을 지정하면 됩니다.
v-list 엘리먼트로 먼저 목록의 영역을 지정하였습니다. 그리고 v-list-item 으로 항목을하나씩 표현했는데 이를 위해 v-for 디렉티브로 aList 배열변수에 있는 값을 반복문으로 가져와 item 변수에 저장하여 사용합니다.
v-list-item-avatar를 사용해서 원 모양의 아이콘으로 변경합니다. 그 후 v-list-avatar 엘리먼트 값으로 v-icon을 사용함으로써 화면에 아이콘을 표현합니다. 이때 :class로 v-bind 디렉티브를 간단히 써서 item 변수에 있는 icon_style 이름을 클래스 선택자로 적용합니다.
v-list-item-content 엘리먼트를 이용하여 아이콘 영역을 제외한 나머지 부분을 모두 확보하기 위해 사용합니다.
그러면 목록 항목에서 사용할 수있는 나머지 영역이 확보되어 자동으로 레이아웃을 잡아주면서 제목이나 부제목을 표현 할 수 있습니다.
마지막으로 v-list-item-action엘리먼트를 사용하면 이벤트용 버튼을 목록에서 가장 적합한 레이아웃으로 자동 배치해줍니다.
실행화면
뷰티파이의 기본 사용방법에 대하여 알아보았습니다.
다음글에서는 뷰티파이 심화편에 대해 알아보겠습니다.
수고하셨습니다.
'WEB' 카테고리의 다른 글
| [PWA] 앱 배포하기 (0) | 2020.11.17 |
|---|---|
| [PWA] 뷰티파이 심화편 (0) | 2020.10.28 |
| [PWA] 뷰 vue.js 고급 기능 (0) | 2020.10.26 |
| [PWA] 뷰 vue.js 입문 (1) | 2020.10.26 |
| [PWA] 자바스크립트로 PWA 개발 (1) | 2020.10.26 |
- Total
- Today
- Yesterday