vue 3 js - quasar 게시판 방명록 만들기 2 - 레이아웃 디자인

https://godffs.tistory.com/3791

vue 3 js - quasar 로 게시판 방명록 만들기 1

이어서 작업...

---

 

전체 레이아웃을 디자인부터 하려고 하는데 디자인을 할 줄 모른다

quasar 공식 사이트에 들어가면 레이아웃을 마우스 클릭으로 만들 수 있다

 

https://quasar.dev/layout/layout#introduction

Layout | Quasar Framework

 

위에 주소에 들어가서 중간쯤 보면

quasar 레이아웃 템플릿 디자인 하기

'LAYOUT BUILDER' 버튼을 클릭한다

 

 

새 페이지가 열리고 이 안에서 원하는 데로 설정하고 continue를 눌러서 진행하면 된다

quasar 레이아웃 템플릿 디자인

EXPORT LAYOUT 버튼을 누르면 소스코드가 나온다 복사해서 프로젝트에 추가한다

작업한 디자인 소스코드 복사하기

src \ layouts \ comunity \ LayoutGuestBook.vue 파일을 열어서

안에 내용을 모두 지우고 복사한 내용을 붙여 넣는다

quasar layout template

 

결과 확인

피시, 모바일에서 반응형으로 잘된다

quasar에서 디자인 한 결과물

 

quasar-project-js.zip

0.20MB