2034
No
1. 기본 레이아웃
<!DOCTYPE html>
<html>
<head>
<!-- 모바일 기기의 접속 시 화면 크기 조절을 위해 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- vuetify.js에 필요한 스타일 파일 링크 연결 -->
<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
</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-content 엘리먼트 사용 -->
<v-content>
안녕하세요
<v-container>Contents입니다.</v-container>
</v-content>
<!-- 하단 부분은 v-footer 엘리먼트 사용 -->
<v-footer>
<div>Footer입니다.</div>
</v-footer>
</v-app>
</div>
<!-- 필요한 Vue.js와 Vuetify.js의 자바스크립트 연결 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify()
})
</script>
</body>
</html>
2.기본레이아웃 2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
</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-app-bar app color="primary" dark fixed>
</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.2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify()
})
</script>
</body>
</html>
3.카드 UI 만들기
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
</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.2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify()
})
</script>
</body>
</html>
4.그리드 기본 원리
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
<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.2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify()
})
</script>
</body>
</html>
5.반응형 그리드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
</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.2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify()
})
</script>
</body>
</html>
6.리스트와 아이콘 사용법
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
</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.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>
7.플로팅 버튼 UI 컴포넌트 넣기
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
</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-app>
<v-card>
<v-card-text style="height: 50px; position: relative;">
<v-btn absolute dark fab top right color="pink">
<v-icon>add</v-icon>
</v-btn>
</v-card-text>
</v-card>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.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>
출처 :
Do it! 프로그레시브 웹앱 만들기
반응형 웹 개발부터 하이브리드 앱 배포까지 PWA 완전 정복!
김응석 저자(글)
이지스퍼블리싱 · 2020년 08월 06일
8.5(7개의 리뷰)
도움돼요(50%의 구매자)
https://product.kyobobook.co.kr/detail/S000001817978
댓글 ( 4)
댓글 남기기