1. 본 DB를 넣어주세요. (댓글 > 책 클릭 > 내가 지금 공부하고 있는 책 검색 및 선택)
Doit!
프로그레시브 웹앱 만들기 저자 김은석출판 이지스퍼블리싱출시 2020.08.06。
2. 제 공부 흔적을 사진으로 보여주세요. 책상(모니터)이랑 책이 같이 보이면 최고!
2. 제 공부 흔적을 사진으로 보여주세요. 책상(모니터)이랑 책이 같이 보이면 최고!
3. 이번 연찬회에서 특히 좋았던 점이나 어려운 점은 있었습니까?새로 알게 된 부분이 있으면 가르치세요.이번 이 책으로 공부하는 공부회의 독자들에게 아주 유익합니다.
(200자 이내)뷰티 파이(Vuetify.js)는 뷰 자바 스크립트 프레임워크에 문서 디자인을 사용할 수 있는 컴포넌트 프레임워크에서 구글의 문서 디자인 스펙을 충실히 표현하고 웹에 필요한 컴퍼넌트를 편리하도록 다양한 기능을 지원합니다.
디자이너 아니더라도 높은 수준의 디자인을 활용할 수 있어 배우기 쉽고, 커스터마이즈도 가능하므로, 꼭 활용해서 봅니다.
[06]뷰티 파이 기초 쌓기 ■ 06-1뷰티 파이, 뷰 최고의 UI프레임워크 □ 뷰티 파이(Vuetify.js):뷰 자바 스크립트 프레임워크에 문서 디자인을 사용할 수 있는 컴포넌트 프레임워크.Beautify컴포넌트로 제작한 관리자 페이지:http://vma.isocked.com/#/dashboard□ 주목의 특징(4개)1)Google문서 스펙 대응 2)80이상의 시맨틱 머티어리얼 디자인 컴포넌트 3)고속 4) 쉽게 학습 ■ 06-2기본 레이아웃 작성 1□ 핵심 내용. AppBar영역:v-app-bar요소 사용.본문 영역:v-content요소를 사용.여백 자동 설정:v-container요소를 사용.바닥 글 영역:v-footer요소 사용 □ 뷰티 파이에서 3단 레이아웃을 작성:hello_simple.html. 뷰 포트 설정 →링크 접속 → v-app요소 → v-app-bar요소 ■ v-content요소 □ v-footer요소 →라이브 서버에서 확인 →06-3의 기본 레이아웃 작성 2→ Google문서 디자인을 적용하여 삼 단계 레이아웃 장식:hello_theme.html.아부 바 스타일 → 아부 바 메뉴 아이콘 → 아부 바 정렬 및 아이콘 추가 → 본문 영역과 자동 여백 → 글꼴 사이즈와 종류 설정 → 요소 여백 → 바닥 글 스타일 → 요소 정렬 → 라이브 서버에서 확인※Google문서 디자인 아이콘의 사용 방법:공식 웹 사이트(https://material.io/resources/icons)에 접속한 뒤 아이콘의 이름을 복사해서 덧붙이기-폰 스토어인 웹 사이트:https://fontawesome.com/icons(이름 앞에 fa-바탕, CDN접속도 필요)-문서 디자인은 웹 사이트:https://materialdesignicons.com(이름 앞에 mdi-바탕, CDN접속도 필요)※머티어리얼 디자인의 공식 폰트:일반적으로 Roboto글꼴을 사용합니다만, 한글은 Noto글꼴을 사용-Google문서 디자인 폰트 안내:https://fonts.google.com/specimen/Roboto-Roboto글꼴:https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean-Noto글꼴(한글, Sans):https://fonts.google.com/specimen/Noto+Serif+KR?subset=korean Noto글꼴(한글, Serif):https://material.io/design/typography/language-support.html#-■ 06-4카드 UI에 타이틀을 붙이고 화상을 넣는다:card_typo_color.html.카드 속에 화상을 넣고 →카드에 넣는다주제 버튼으로 라이브 버튼으로 넣는다→ 서버?옵션)-사용 예:picsum.photos/id/2/400/300?grayscale→ 400×300사이즈의 2번째의 그림에 “흑백 효과”를 적용※색을 일관되게 사용하는 방법-기본 이름 다음에 있는 색을 기준으로 위에서 순서에 번호를 붙이고 lighten-5~1, darken-1~4, accent-1~4의 총 14개의 스펙트럼 이름으로 사용:예 1)#FFEE→ redlighten-5사용(색을 일관해서 사용할 수 있어 정비가 간단하다)-팔레트 디자인:https://vuetifyjs.com/en/styles/colors/:Vue객체를 생성하고 그 안에서 곧바로 데이터 속성을 사용할 때 적용(new Vue()처럼 vue객체를 생성한 뒤 그 가운데 통로로 사용)data:{aList:[{값 1}{값 2}{값 3}]}-함수 선언:컴포넌트에서 사용할 때 함수 형태로 선언(캠
3. 이번 스터디에서 특히 좋았던 점이나 어려웠던 점이 있었나요? 새로 알게 된 부분이 있으면 알려주세요. 이번에 이 책으로 공부하는 스터디 그룹 독자들에게 많은 도움이 됩니다.
(200자 이내) 뷰티파이(Vuetify.js)는 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크로 구글의 머티리얼 디자인 스펙을 충실하게 표현하고 웹에 필요한 컴포넌트를 편리하게 사용할 수 있도록 다양한 기능을 지원합니다.
디자이너가 아니더라도 높은 수준의 디자인을 활용할 수 있어 배우기 쉽고 맞춤 제작도 가능하니 꼭 활용해보겠습니다.
[06] 뷰티파이 기초 쌓기 ■ 06-1 뷰티파이, 뷰 최고의 UI프레임 □ 뷰티파이(Vuetify.js) : 뷰 자바스크립트프레임워크에 머티리얼디자인을 사용할 수 있는 컴포넌트프레임워크. Beautify 컴포넌트로 제작한 관리자 페이지 : http://vma.isocked.com/ #/dashboard□주목의 특징(4개)1)구글 머티리얼 스펙 지원2)80이상의 시맨틱 머티리얼 디자인 컴포넌트3)고속4)간단학습■06-2 기본 레이아웃 작성1□핵심내용.AppBar영역 : v-app-bar 엘리먼트 사용. 본문 영역: v-content 엘리먼트 사용.여백 자동설정 : v-container 엘리먼트를 사용. 바닥글 영역: v-footer 엘리먼트 사용 □ 뷰티 파이로 3단 레이아웃 만들기: hello_simple.html. 뷰포트 설정 → 링크 연결 → v-app 엘리먼트 → v-app-bar 엘리먼트 ■ v-content 엘리먼트 → v-footer 엘리먼트 □ 라이브 서버에서 확인→ 06 – 3의 기본 레이아웃 만들기2→ 구글 머티리얼 디자인을 적용하여 삼단 레이아웃 꾸미기: hello_theme.html。 아부바 스타일→압바 메뉴 아이콘→압바 정렬 및 아이콘 추가→본문 영역과 자동 여백→서체 크기 및 종류 설정→엘리먼트 여백→바닥글 스타일→엘리먼트 정렬→라이브 서버에서 확인 ※ 구글 머티리얼 디자인 아이콘 사용방법 : 공식 웹사이트(https://material.io/resources/icons) 접속 후 아이콘 이름 복사 후 붙여넣기 – 폰트어썸 웹사이트 : https://fontawesome.com/icons (이름 앞에 fa-붙여 넣기, CDN 연결 필요) – 머티리얼 디자인 아이콘 웹사이트 : https://materialdesignicons.com (이름 앞에 mdi-붙여 넣기, CDN 연결 필요) ※ 머티리얼 디자인 공식 글꼴 : 일반적으로 Roboto 글꼴을 사용하지만 한글은 Noto 글꼴 사용 – 구글 머티리얼 디자인 글꼴 안내 : https://fonts.google.com/specimen/Roboto- Robotoフォント: https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean- Notoフォント(ハングル、Sans): https://fonts.google.com/specimen/Noto+Serif+KR?subset=korean Notoフォント(ハングル、Serif): https://material.io/design/typography/language-support.html#-■ 06-4 카드 UI 를 제목으로 이미지 넣기 : card_typo_color.html. 카드 안에 이미지를 넣다→ 카드에 넣다 테마 버튼으로 라이브 버튼으로 넣다 →서버?옵션) – 사용 예 : picsum.photos / id / 2 / 400 / 300 ?grayscale → 400 x 300 크기 두 번째 그림에 “흑백 효과” 적용 ※ 색상 일관되게 사용하는 방법 – 기본명 다음에 있는 색상을 기준으로 위에서 순서대로 번호를 매겨 lighten-5~1, darken-1~4, accent-1~4 총 14개 스펙트럼명으로 사용 : 예1) #FFEE→redlighten-5 사용 (색상 일관되게 사용할 수 있으며 유지보수가 간편함) – 팔레트 디자인 : https://vuetifyjs.com/en/styles/colors/ : Vue 객체를 생성하고 그 중 바로 데이터 속성을 사용할 때 적용 (new Vue()과 같이 vue 객체를 생성한 후 그 안에서 루트로 사용) data: {aList: [{값1}, {값2}, {값3}] – 함수 선언: 컴포넌트에서 사용할 때 함수 형태로 선언 (캠
3. 이번 스터디에서 특히 좋았던 점이나 어려웠던 점이 있었나요? 새로 알게 된 부분이 있으면 알려주세요. 이번에 이 책으로 공부하는 스터디 그룹 독자들에게 많은 도움이 됩니다.
(200자 이내) 뷰티파이(Vuetify.js)는 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크로 구글의 머티리얼 디자인 스펙을 충실하게 표현하고 웹에 필요한 컴포넌트를 편리하게 사용할 수 있도록 다양한 기능을 지원합니다.
디자이너가 아니더라도 높은 수준의 디자인을 활용할 수 있어 배우기 쉽고 맞춤 제작도 가능하니 꼭 활용해보겠습니다.
[06] 뷰티파이 기초 쌓기 ■ 06-1 뷰티파이, 뷰 최고의 UI프레임 □ 뷰티파이(Vuetify.js) : 뷰 자바스크립트프레임워크에 머티리얼디자인을 사용할 수 있는 컴포넌트프레임워크. Beautify 컴포넌트로 제작한 관리자 페이지 : http://vma.isocked.com/ #/dashboard□주목의 특징(4개)1)구글 머티리얼 스펙 지원2)80이상의 시맨틱 머티리얼 디자인 컴포넌트3)고속4)간단학습■06-2 기본 레이아웃 작성1□핵심내용.AppBar영역 : v-app-bar 엘리먼트 사용. 본문 영역: v-content 엘리먼트 사용.여백 자동설정 : v-container 엘리먼트를 사용. 바닥글 영역: v-footer 엘리먼트 사용 □ 뷰티 파이로 3단 레이아웃 만들기: hello_simple.html. 뷰포트 설정 → 링크 연결 → v-app 엘리먼트 → v-app-bar 엘리먼트 ■ v-content 엘리먼트 → v-footer 엘리먼트 □ 라이브 서버에서 확인→ 06 – 3의 기본 레이아웃 만들기2→ 구글 머티리얼 디자인을 적용하여 삼단 레이아웃 꾸미기: hello_theme.html。 아부바 스타일→압바 메뉴 아이콘→압바 정렬 및 아이콘 추가→본문 영역과 자동 여백→서체 크기 및 종류 설정→엘리먼트 여백→바닥글 스타일→엘리먼트 정렬→라이브 서버에서 확인 ※ 구글 머티리얼 디자인 아이콘 사용방법 : 공식 웹사이트(https://material.io/resources/icons) 접속 후 아이콘 이름 복사 후 붙여넣기 – 폰트어썸 웹사이트 : https://fontawesome.com/icons (이름 앞에 fa-붙여 넣기, CDN 연결 필요) – 머티리얼 디자인 아이콘 웹사이트 : https://materialdesignicons.com (이름 앞에 mdi-붙여 넣기, CDN 연결 필요) ※ 머티리얼 디자인 공식 글꼴 : 일반적으로 Roboto 글꼴을 사용하지만 한글은 Noto 글꼴 사용 – 구글 머티리얼 디자인 글꼴 안내 : https://fonts.google.com/specimen/Roboto- Robotoフォント: https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean- Notoフォント(ハングル、Sans): https://fonts.google.com/specimen/Noto+Serif+KR?subset=korean Notoフォント(ハングル、Serif): https://material.io/design/typography/language-support.html#-■ 06-4 카드 UI 를 제목으로 이미지 넣기 : card_typo_color.html. 카드 안에 이미지를 넣다→ 카드에 넣다 테마 버튼으로 라이브 버튼으로 넣다 →서버?옵션) – 사용 예 : picsum.photos / id / 2 / 400 / 300 ?grayscale → 400 x 300 크기 두 번째 그림에 “흑백 효과” 적용 ※ 색상 일관되게 사용하는 방법 – 기본명 다음에 있는 색상을 기준으로 위에서 순서대로 번호를 매겨 lighten-5~1, darken-1~4, accent-1~4 총 14개 스펙트럼명으로 사용 : 예1) #FFEE→redlighten-5 사용 (색상 일관되게 사용할 수 있으며 유지보수가 간편함) – 팔레트 디자인 : https://vuetifyjs.com/en/styles/colors/ : Vue 객체를 생성하고 그 중 바로 데이터 속성을 사용할 때 적용 (new Vue()과 같이 vue 객체를 생성한 후 그 안에서 루트로 사용) data: {aList: [{값1}, {값2}, {값3}] – 함수 선언: 컴포넌트에서 사용할 때 함수 형태로 선언 (캠
3. 이번 스터디에서 특히 좋았던 점이나 어려웠던 점이 있었나요? 새로 알게 된 부분이 있으면 알려주세요. 이번에 이 책으로 공부하는 스터디 그룹 독자들에게 많은 도움이 됩니다.
(200자 이내) 뷰티파이(Vuetify.js)는 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크로 구글의 머티리얼 디자인 스펙을 충실하게 표현하고 웹에 필요한 컴포넌트를 편리하게 사용할 수 있도록 다양한 기능을 지원합니다.
디자이너가 아니더라도 높은 수준의 디자인을 활용할 수 있어 배우기 쉽고 맞춤 제작도 가능하니 꼭 활용해보겠습니다.
[06] 뷰티파이 기초 쌓기 ■ 06-1 뷰티파이, 뷰 최고의 UI프레임 □ 뷰티파이(Vuetify.js) : 뷰 자바스크립트프레임워크에 머티리얼디자인을 사용할 수 있는 컴포넌트프레임워크. Beautify 컴포넌트로 제작한 관리자 페이지 : http://vma.isocked.com/ #/dashboard□주목의 특징(4개)1)구글 머티리얼 스펙 지원2)80이상의 시맨틱 머티리얼 디자인 컴포넌트3)고속4)간단학습■06-2 기본 레이아웃 작성1□핵심내용.AppBar영역 : v-app-bar 엘리먼트 사용. 본문 영역: v-content 엘리먼트 사용.여백 자동설정 : v-container 엘리먼트를 사용. 바닥글 영역: v-footer 엘리먼트 사용 □ 뷰티 파이로 3단 레이아웃 만들기: hello_simple.html. 뷰포트 설정 → 링크 연결 → v-app 엘리먼트 → v-app-bar 엘리먼트 ■ v-content 엘리먼트 → v-footer 엘리먼트 □ 라이브 서버에서 확인→ 06 – 3의 기본 레이아웃 만들기2→ 구글 머티리얼 디자인을 적용하여 삼단 레이아웃 꾸미기: hello_theme.html。 아부바 스타일→압바 메뉴 아이콘→압바 정렬 및 아이콘 추가→본문 영역과 자동 여백→서체 크기 및 종류 설정→엘리먼트 여백→바닥글 스타일→엘리먼트 정렬→라이브 서버에서 확인 ※ 구글 머티리얼 디자인 아이콘 사용방법 : 공식 웹사이트(https://material.io/resources/icons) 접속 후 아이콘 이름 복사 후 붙여넣기 – 폰트어썸 웹사이트 : https://fontawesome.com/icons (이름 앞에 fa-붙여 넣기, CDN 연결 필요) – 머티리얼 디자인 아이콘 웹사이트 : https://materialdesignicons.com (이름 앞에 mdi-붙여 넣기, CDN 연결 필요) ※ 머티리얼 디자인 공식 글꼴 : 일반적으로 Roboto 글꼴을 사용하지만 한글은 Noto 글꼴 사용 – 구글 머티리얼 디자인 글꼴 안내 : https://fonts.google.com/specimen/Roboto- Robotoフォント: https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean- Notoフォント(ハングル、Sans): https://fonts.google.com/specimen/Noto+Serif+KR?subset=korean Notoフォント(ハングル、Serif): https://material.io/design/typography/language-support.html#-■ 06-4 카드 UI 를 제목으로 이미지 넣기 : card_typo_color.html. 카드 안에 이미지를 넣다→ 카드에 넣다 테마 버튼으로 라이브 버튼으로 넣다 →서버?옵션) – 사용 예 : picsum.photos / id / 2 / 400 / 300 ?grayscale → 400 x 300 크기 두 번째 그림에 “흑백 효과” 적용 ※ 색상 일관되게 사용하는 방법 – 기본명 다음에 있는 색상을 기준으로 위에서 순서대로 번호를 매겨 lighten-5~1, darken-1~4, accent-1~4 총 14개 스펙트럼명으로 사용 : 예1) #FFEE→redlighten-5 사용 (색상 일관되게 사용할 수 있으며 유지보수가 간편함) – 팔레트 디자인 : https://vuetifyjs.com/en/styles/colors/ : Vue 객체를 생성하고 그 중 바로 데이터 속성을 사용할 때 적용 (new Vue()과 같이 vue 객체를 생성한 후 그 안에서 루트로 사용) data: {aList: [{값1}, {값2}, {값3}] – 함수 선언: 컴포넌트에서 사용할 때 함수 형태로 선언 (캠
3. 이번 스터디에서 특히 좋았던 점이나 어려웠던 점이 있었나요? 새로 알게 된 부분이 있으면 알려주세요. 이번에 이 책으로 공부하는 스터디 그룹 독자들에게 많은 도움이 됩니다.
(200자 이내) 뷰티파이(Vuetify.js)는 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크로 구글의 머티리얼 디자인 스펙을 충실하게 표현하고 웹에 필요한 컴포넌트를 편리하게 사용할 수 있도록 다양한 기능을 지원합니다.
디자이너가 아니더라도 높은 수준의 디자인을 활용할 수 있어 배우기 쉽고 맞춤 제작도 가능하니 꼭 활용해보겠습니다.
[06] 뷰티파이 기초 쌓기 ■ 06-1 뷰티파이, 뷰 최고의 UI프레임 □ 뷰티파이(Vuetify.js) : 뷰 자바스크립트프레임워크에 머티리얼디자인을 사용할 수 있는 컴포넌트프레임워크. Beautify 컴포넌트로 제작한 관리자 페이지 : http://vma.isocked.com/ #/dashboard□주목의 특징(4개)1)구글 머티리얼 스펙 지원2)80이상의 시맨틱 머티리얼 디자인 컴포넌트3)고속4)간단학습■06-2 기본 레이아웃 작성1□핵심내용.AppBar영역 : v-app-bar 엘리먼트 사용. 본문 영역: v-content 엘리먼트 사용.여백 자동설정 : v-container 엘리먼트를 사용. 바닥글 영역: v-footer 엘리먼트 사용 □ 뷰티 파이로 3단 레이아웃 만들기: hello_simple.html. 뷰포트 설정 → 링크 연결 → v-app 엘리먼트 → v-app-bar 엘리먼트 ■ v-content 엘리먼트 → v-footer 엘리먼트 □ 라이브 서버에서 확인→ 06 – 3의 기본 레이아웃 만들기2→ 구글 머티리얼 디자인을 적용하여 삼단 레이아웃 꾸미기: hello_theme.html。 아부바 스타일→압바 메뉴 아이콘→압바 정렬 및 아이콘 추가→본문 영역과 자동 여백→서체 크기 및 종류 설정→엘리먼트 여백→바닥글 스타일→엘리먼트 정렬→라이브 서버에서 확인 ※ 구글 머티리얼 디자인 아이콘 사용방법 : 공식 웹사이트(https://material.io/resources/icons) 접속 후 아이콘 이름 복사 후 붙여넣기 – 폰트어썸 웹사이트 : https://fontawesome.com/icons (이름 앞에 fa-붙여 넣기, CDN 연결 필요) – 머티리얼 디자인 아이콘 웹사이트 : https://materialdesignicons.com (이름 앞에 mdi-붙여 넣기, CDN 연결 필요) ※ 머티리얼 디자인 공식 글꼴 : 일반적으로 Roboto 글꼴을 사용하지만 한글은 Noto 글꼴 사용 – 구글 머티리얼 디자인 글꼴 안내 : https://fonts.google.com/specimen/Roboto- Robotoフォント: https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean- Notoフォント(ハングル、Sans): https://fonts.google.com/specimen/Noto+Serif+KR?subset=korean Notoフォント(ハングル、Serif): https://material.io/design/typography/language-support.html#-■ 06-4 카드 UI 를 제목으로 이미지 넣기 : card_typo_color.html. 카드 안에 이미지를 넣다→ 카드에 넣다 테마 버튼으로 라이브 버튼으로 넣다 →서버?옵션) – 사용 예 : picsum.photos / id / 2 / 400 / 300 ?grayscale → 400 x 300 크기 두 번째 그림에 “흑백 효과” 적용 ※ 색상 일관되게 사용하는 방법 – 기본명 다음에 있는 색상을 기준으로 위에서 순서대로 번호를 매겨 lighten-5~1, darken-1~4, accent-1~4 총 14개 스펙트럼명으로 사용 : 예1) #FFEE→redlighten-5 사용 (색상 일관되게 사용할 수 있으며 유지보수가 간편함) – 팔레트 디자인 : https://vuetifyjs.com/en/styles/colors/ : Vue 객체를 생성하고 그 중 바로 데이터 속성을 사용할 때 적용 (new Vue()과 같이 vue 객체를 생성한 후 그 안에서 루트로 사용) data: {aList: [{값1}, {값2}, {값3}] – 함수 선언: 컴포넌트에서 사용할 때 함수 형태로 선언 (캠
3. 이번 스터디에서 특히 좋았던 점이나 어려웠던 점이 있었나요? 새로 알게 된 부분이 있으면 알려주세요. 이번에 이 책으로 공부하는 스터디 그룹 독자들에게 많은 도움이 됩니다.
(200자 이내) 뷰티파이(Vuetify.js)는 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크로 구글의 머티리얼 디자인 스펙을 충실하게 표현하고 웹에 필요한 컴포넌트를 편리하게 사용할 수 있도록 다양한 기능을 지원합니다.
디자이너가 아니더라도 높은 수준의 디자인을 활용할 수 있어 배우기 쉽고 맞춤 제작도 가능하니 꼭 활용해보겠습니다.
[06] 뷰티파이 기초 쌓기 ■ 06-1 뷰티파이, 뷰 최고의 UI프레임 □ 뷰티파이(Vuetify.js) : 뷰 자바스크립트프레임워크에 머티리얼디자인을 사용할 수 있는 컴포넌트프레임워크. Beautify 컴포넌트로 제작한 관리자 페이지 : http://vma.isocked.com/ #/dashboard□주목의 특징(4개)1)구글 머티리얼 스펙 지원2)80이상의 시맨틱 머티리얼 디자인 컴포넌트3)고속4)간단학습■06-2 기본 레이아웃 작성1□핵심내용.AppBar영역 : v-app-bar 엘리먼트 사용. 본문 영역: v-content 엘리먼트 사용.여백 자동설정 : v-container 엘리먼트를 사용. 바닥글 영역: v-footer 엘리먼트 사용 □ 뷰티 파이로 3단 레이아웃 만들기: hello_simple.html. 뷰포트 설정 → 링크 연결 → v-app 엘리먼트 → v-app-bar 엘리먼트 ■ v-content 엘리먼트 → v-footer 엘리먼트 □ 라이브 서버에서 확인→ 06 – 3의 기본 레이아웃 만들기2→ 구글 머티리얼 디자인을 적용하여 삼단 레이아웃 꾸미기: hello_theme.html。 아부바 스타일→압바 메뉴 아이콘→압바 정렬 및 아이콘 추가→본문 영역과 자동 여백→서체 크기 및 종류 설정→엘리먼트 여백→바닥글 스타일→엘리먼트 정렬→라이브 서버에서 확인 ※ 구글 머티리얼 디자인 아이콘 사용방법 : 공식 웹사이트(https://material.io/resources/icons) 접속 후 아이콘 이름 복사 후 붙여넣기 – 폰트어썸 웹사이트 : https://fontawesome.com/icons (이름 앞에 fa-붙여 넣기, CDN 연결 필요) – 머티리얼 디자인 아이콘 웹사이트 : https://materialdesignicons.com (이름 앞에 mdi-붙여 넣기, CDN 연결 필요) ※ 머티리얼 디자인 공식 글꼴 : 일반적으로 Roboto 글꼴을 사용하지만 한글은 Noto 글꼴 사용 – 구글 머티리얼 디자인 글꼴 안내 : https://fonts.google.com/specimen/Roboto- Robotoフォント: https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean- Notoフォント(ハングル、Sans): https://fonts.google.com/specimen/Noto+Serif+KR?subset=korean Notoフォント(ハングル、Serif): https://material.io/design/typography/language-support.html#-■ 06-4 카드 UI 를 제목으로 이미지 넣기 : card_typo_color.html. 카드 안에 이미지를 넣다→ 카드에 넣다 테마 버튼으로 라이브 버튼으로 넣다 →서버?옵션) – 사용 예 : picsum.photos / id / 2 / 400 / 300 ?grayscale → 400 x 300 크기 두 번째 그림에 “흑백 효과” 적용 ※ 색상 일관되게 사용하는 방법 – 기본명 다음에 있는 색상을 기준으로 위에서 순서대로 번호를 매겨 lighten-5~1, darken-1~4, accent-1~4 총 14개 스펙트럼명으로 사용 : 예1) #FFEE→redlighten-5 사용 (색상 일관되게 사용할 수 있으며 유지보수가 간편함) – 팔레트 디자인 : https://vuetifyjs.com/en/styles/colors/ : Vue 객체를 생성하고 그 중 바로 데이터 속성을 사용할 때 적용 (new Vue()과 같이 vue 객체를 생성한 후 그 안에서 루트로 사용) data: {aList: [{값1}, {값2}, {값3}] – 함수 선언: 컴포넌트에서 사용할 때 함수 형태로 선언 (캠
3. 이번 스터디에서 특히 좋았던 점이나 어려웠던 점이 있었나요? 새로 알게 된 부분이 있으면 알려주세요. 이번에 이 책으로 공부하는 스터디 그룹 독자들에게 많은 도움이 됩니다.
(200자 이내) 뷰티파이(Vuetify.js)는 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크로 구글의 머티리얼 디자인 스펙을 충실하게 표현하고 웹에 필요한 컴포넌트를 편리하게 사용할 수 있도록 다양한 기능을 지원합니다.
디자이너가 아니더라도 높은 수준의 디자인을 활용할 수 있어 배우기 쉽고 맞춤 제작도 가능하니 꼭 활용해보겠습니다.
[06] 뷰티파이 기초 쌓기 ■ 06-1 뷰티파이, 뷰 최고의 UI프레임 □ 뷰티파이(Vuetify.js) : 뷰 자바스크립트프레임워크에 머티리얼디자인을 사용할 수 있는 컴포넌트프레임워크. Beautify 컴포넌트로 제작한 관리자 페이지 : http://vma.isocked.com/ #/dashboard□주목의 특징(4개)1)구글 머티리얼 스펙 지원2)80이상의 시맨틱 머티리얼 디자인 컴포넌트3)고속4)간단학습■06-2 기본 레이아웃 작성1□핵심내용.AppBar영역 : v-app-bar 엘리먼트 사용. 본문 영역: v-content 엘리먼트 사용.여백 자동설정 : v-container 엘리먼트를 사용. 바닥글 영역: v-footer 엘리먼트 사용 □ 뷰티 파이로 3단 레이아웃 만들기: hello_simple.html. 뷰포트 설정 → 링크 연결 → v-app 엘리먼트 → v-app-bar 엘리먼트 ■ v-content 엘리먼트 → v-footer 엘리먼트 □ 라이브 서버에서 확인→ 06 – 3의 기본 레이아웃 만들기2→ 구글 머티리얼 디자인을 적용하여 삼단 레이아웃 꾸미기: hello_theme.html。 아부바 스타일→압바 메뉴 아이콘→압바 정렬 및 아이콘 추가→본문 영역과 자동 여백→서체 크기 및 종류 설정→엘리먼트 여백→바닥글 스타일→엘리먼트 정렬→라이브 서버에서 확인 ※ 구글 머티리얼 디자인 아이콘 사용방법 : 공식 웹사이트(https://material.io/resources/icons) 접속 후 아이콘 이름 복사 후 붙여넣기 – 폰트어썸 웹사이트 : https://fontawesome.com/icons (이름 앞에 fa-붙여 넣기, CDN 연결 필요) – 머티리얼 디자인 아이콘 웹사이트 : https://materialdesignicons.com (이름 앞에 mdi-붙여 넣기, CDN 연결 필요) ※ 머티리얼 디자인 공식 글꼴 : 일반적으로 Roboto 글꼴을 사용하지만 한글은 Noto 글꼴 사용 – 구글 머티리얼 디자인 글꼴 안내 : https://fonts.google.com/specimen/Roboto- Robotoフォント: https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean- Notoフォント(ハングル、Sans): https://fonts.google.com/specimen/Noto+Serif+KR?subset=korean Notoフォント(ハングル、Serif): https://material.io/design/typography/language-support.html#-■ 06-4 카드 UI 를 제목으로 이미지 넣기 : card_typo_color.html. 카드 안에 이미지를 넣다→ 카드에 넣다 테마 버튼으로 라이브 버튼으로 넣다 →서버?옵션) – 사용 예 : picsum.photos / id / 2 / 400 / 300 ?grayscale → 400 x 300 크기 두 번째 그림에 “흑백 효과” 적용 ※ 색상 일관되게 사용하는 방법 – 기본명 다음에 있는 색상을 기준으로 위에서 순서대로 번호를 매겨 lighten-5~1, darken-1~4, accent-1~4 총 14개 스펙트럼명으로 사용 : 예1) #FFEE→redlighten-5 사용 (색상 일관되게 사용할 수 있으며 유지보수가 간편함) – 팔레트 디자인 : https://vuetifyjs.com/en/styles/colors/ : Vue 객체를 생성하고 그 중 바로 데이터 속성을 사용할 때 적용 (new Vue()과 같이 vue 객체를 생성한 후 그 안에서 루트로 사용) data: {aList: [{값1}, {값2}, {값3}] – 함수 선언: 컴포넌트에서 사용할 때 함수 형태로 선언 (캠
3. 이번 스터디에서 특히 좋았던 점이나 어려웠던 점이 있었나요? 새로 알게 된 부분이 있으면 알려주세요. 이번에 이 책으로 공부하는 스터디 그룹 독자들에게 많은 도움이 됩니다.
(200자 이내) 뷰티파이(Vuetify.js)는 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크로 구글의 머티리얼 디자인 스펙을 충실하게 표현하고 웹에 필요한 컴포넌트를 편리하게 사용할 수 있도록 다양한 기능을 지원합니다.
디자이너가 아니더라도 높은 수준의 디자인을 활용할 수 있어 배우기 쉽고 맞춤 제작도 가능하니 꼭 활용해보겠습니다.
[06] 뷰티파이 기초 쌓기 ■ 06-1 뷰티파이, 뷰 최고의 UI프레임 □ 뷰티파이(Vuetify.js) : 뷰 자바스크립트프레임워크에 머티리얼디자인을 사용할 수 있는 컴포넌트프레임워크. Beautify 컴포넌트로 제작한 관리자 페이지 : http://vma.isocked.com/ #/dashboard□주목의 특징(4개)1)구글 머티리얼 스펙 지원2)80이상의 시맨틱 머티리얼 디자인 컴포넌트3)고속4)간단학습■06-2 기본 레이아웃 작성1□핵심내용.AppBar영역 : v-app-bar 엘리먼트 사용. 본문 영역: v-content 엘리먼트 사용.여백 자동설정 : v-container 엘리먼트를 사용. 바닥글 영역: v-footer 엘리먼트 사용 □ 뷰티 파이로 3단 레이아웃 만들기: hello_simple.html. 뷰포트 설정 → 링크 연결 → v-app 엘리먼트 → v-app-bar 엘리먼트 ■ v-content 엘리먼트 → v-footer 엘리먼트 □ 라이브 서버에서 확인→ 06 – 3의 기본 레이아웃 만들기2→ 구글 머티리얼 디자인을 적용하여 삼단 레이아웃 꾸미기: hello_theme.html。 아부바 스타일→압바 메뉴 아이콘→압바 정렬 및 아이콘 추가→본문 영역과 자동 여백→서체 크기 및 종류 설정→엘리먼트 여백→바닥글 스타일→엘리먼트 정렬→라이브 서버에서 확인 ※ 구글 머티리얼 디자인 아이콘 사용방법 : 공식 웹사이트(https://material.io/resources/icons) 접속 후 아이콘 이름 복사 후 붙여넣기 – 폰트어썸 웹사이트 : https://fontawesome.com/icons (이름 앞에 fa-붙여 넣기, CDN 연결 필요) – 머티리얼 디자인 아이콘 웹사이트 : https://materialdesignicons.com (이름 앞에 mdi-붙여 넣기, CDN 연결 필요) ※ 머티리얼 디자인 공식 글꼴 : 일반적으로 Roboto 글꼴을 사용하지만 한글은 Noto 글꼴 사용 – 구글 머티리얼 디자인 글꼴 안내 : https://fonts.google.com/specimen/Roboto- Robotoフォント: https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean- Notoフォント(ハングル、Sans): https://fonts.google.com/specimen/Noto+Serif+KR?subset=korean Notoフォント(ハングル、Serif): https://material.io/design/typography/language-support.html#-■ 06-4 카드 UI 를 제목으로 이미지 넣기 : card_typo_color.html. 카드 안에 이미지를 넣다→ 카드에 넣다 테마 버튼으로 라이브 버튼으로 넣다 →서버?옵션) – 사용 예 : picsum.photos / id / 2 / 400 / 300 ?grayscale → 400 x 300 크기 두 번째 그림에 “흑백 효과” 적용 ※ 색상 일관되게 사용하는 방법 – 기본명 다음에 있는 색상을 기준으로 위에서 순서대로 번호를 매겨 lighten-5~1, darken-1~4, accent-1~4 총 14개 스펙트럼명으로 사용 : 예1) #FFEE→redlighten-5 사용 (색상 일관되게 사용할 수 있으며 유지보수가 간편함) – 팔레트 디자인 : https://vuetifyjs.com/en/styles/colors/ : Vue 객체를 생성하고 그 중 바로 데이터 속성을 사용할 때 적용 (new Vue()과 같이 vue 객체를 생성한 후 그 안에서 루트로 사용) data: {aList: [{값1}, {값2}, {값3}] – 함수 선언: 컴포넌트에서 사용할 때 함수 형태로 선언 (캠첨부파일ex06.zip파일 다운로드 내 컴퓨터 저장네이버 MYBOX에 저장196p 그림 6-8 머티리얼 디자인의 컬러 팔레트: https://vuetifyjs.com/ko/styles/colors/ 그림 6-8 머티리얼 디자인의 컬러 팔레트: https://vuetifyjs.com/en/styles/colors/ #material-colors 199p 표 6-6 기기별 정렬 옵션 (참조: vuetifyjs.com/ko/components/grids/) 표 6-6 기기별 정렬 옵션(참조: vuetifyjs.com/en/components/grids/) )