vue

2034 No

Vuetify 레이아웃

2023-02-14 18:25:14 By 라이트 0 445 댓글수 4 포스트 하기
5월 2024
일월화수목금토
   1234
567891011
12131415161718
19202122232425
262728293031 

 

 

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 &copy;</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 &copy; {{ 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%의 구매자)

 

  • Do it! 프로그레시브 웹앱 만들기 대표 이미지

  •  

 

 

https://product.kyobobook.co.kr/detail/S000001817978

 

 

 

about author

PHRASE

Level 60  라이트

호화로운 임금의 수레도 부서지듯 우리 몸도 늙으면 허물어진다. 오로지 덕행을 쌓아 가는 일만이 이 괴로움에서 벗어나는 길이다. -법구경

댓글 ( 4)

댓글 남기기

작성
Vue.js Examples Vue.js




Vue.js Examples Vue.js Examples






Vue.js Examples vuetifyjs




vue 목록    more

? Copyright 2016 JunHo | Powered by Codeigniter | Powered by jQuery Rain

| Powered by Bootstrap

macaronics.net 는 그어떠한 동영상, 이미지, 파일등을 직접적으로 업로드 제공을 하지 않습니다. 페이스북, 트위터 등 각종 SNS 처럼 macaronics.net 는 웹서핑을 통하여 각종 페이지위치등을 하이퍼링크, 다이렉트링크, 직접링크등으로 링크된 페이지 주소만을 수집 저장하여 제공하고 있습니다. 저장된 각각의 주소에 연결된 페이지등은 그 페이지에서 제공하는 "서버, 사이트" 상황에 따라 페이지와 내용이 삭제 중단 될 수 있으며 macaronics.net 과는 어떠한 연관 관련이 없음을 알려드립니다. 또한, 저작권에 관련된 문제있는 글이나 기타 저작권에 관련된 문제가 있는 것은 연락주시면 바로 삭제해 드리겠습니다.

개인정보 처리방침 | 서비스 이용약관

관리자 문의: braverokmc79@gmail.com 혹은 가입후 관리자 1:1 게시판