8. Padding 과 Margin
- Spacing 관련 내용 확인 https://quasar.dev/style/spacing
q-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
- T 타입 : p (padding), m (margin)
- D 방향 : t (top), r (right), b (bottom), l (left), a (all), x (both left & right), y (both top & bottom)
- S 사이즈 : none, auto (ONLY for specific margins: q-ml-, q-mr-, q-mx-*), xs (extra small), sm (small), md (medium), lg (large), xl (extra large)
8-1. 실습용 페이지 생성
C:\Users\YNJCH\learn-quasar\src\layouts\MainLayout.vue
: 메뉴 추가
C:\Users\YNJCH\learn-quasar\src\pages\Spacing.vue
: 초기화 (vbase-3-setup
입력하여 템플릿 자동완성)
C:\Users\YNJCH\learn-quasar\src\router\routes.js
: 라우터 설정
8-2. div에 적용
<div class="bg-primary q-pa-lg q-mt-md">
: 상하좌우에 padding 값을 적용하고, 상단에 margin 적용
<section class="q-mb-xl">
<div class="text-h4 nanumBrush">Spacing</div>
<q-separator class="q-my-md" />
<div class="bg-primary q-pa-xs q-mt-md">
<div class="bg-dark text-white">
There are CSS classes supplied by Quasar to help you with spacing for
DOM elements or components.
</div>
</div>
<div class="bg-primary q-pa-sm q-mt-md">
<div class="bg-dark text-white">
There are CSS classes supplied by Quasar to help you with spacing for
DOM elements or components.
</div>
</div>
<div class="bg-primary q-pa-md q-mt-md">
<div class="bg-dark text-white">
There are CSS classes supplied by Quasar to help you with spacing for
DOM elements or components.
</div>
</div>
<div class="bg-primary q-pa-lg q-mt-md">
<div class="bg-dark text-white">
There are CSS classes supplied by Quasar to help you with spacing for
DOM elements or components.
</div>
</div>
<div class="bg-primary q-pa-xl q-mt-md">
<div class="bg-dark text-white">
There are CSS classes supplied by Quasar to help you with spacing for
DOM elements or components.
</div>
</div>
</section>
8-3. none 과 auto
- 실습을 위해 버튼이 있는 Card UI 사용 (https://quasar.dev/vue-components/card)
q-btn
버튼
flat
대신 outline
사용
- padding prop 존재 >
padding = "sm"
으로 사용 가능
none
을 이용하면 padding 값이 사라짐
q-card
카드
- width 를 설정하고, 중앙 정렬을 위해
q-mx-auto
값 적용
auto
는 margin 좌우를 위한 값임
<section class="q-mb-xl">
<div class="text-h4 nanumBrush">Components</div>
<q-separator class="q-my-md" />
<q-card class="my-card bg-secondary text-white q-mx-auto" style="width: 400px">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-card-section>
{{ lorem }}
</q-card-section>
<q-separator dark />
<q-card-actions>
<q-btn outline padding="md">Action 1</q-btn>
<q-btn outline padding="none">Action 2</q-btn>
</q-card-actions>
</q-card>
</section>
8-4. 중앙 정렬
- 바깥쪽 박스에
flex
와 함께 쓰면 적용되는 효과
items-center
클래스 적용 > 수직으로 중앙 정렬됨
justify-center
클래스 적용 > 수평으로 중앙 정렬됨
flex-center
클래스 적용 > 중앙 정렬됨
<section class="q-mb-xl">
<div class="text-h4 nanumBrush">중앙 정렬</div>
<q-separator class="q-my-md" />
<div class="bg-primary q-mt-md flex flex-center" style="width: 100%; height: 400px">
<div class="bg-dark text-white" style="width: 100px; height: 100px">
중앙 정렬
</div>
</div>
</section>
기타 Style Class
no-margin
: margin 값 없음
no-padding
: padding 값 없음
9. Breakpoints
9-1. Quasar 정의 화면 사이즈
- Extra Small
xs
: 0px ~ 599.99px
- Small
sm
: 600px ~ 1023.99px
- Medium
md
: 1024px ~ 1439.99px
- Large
lg
: 1440px ~ 1919.99px
- Extra Large
xl
: 1920px ~ Infinity
- Media Query 를 이용해
max-width: 500px
일 때 즉, 0~500px 일 경우 red 색상으로 적용
<div class="target"></div>
<style lang="scss" scoped>
.target {
height: 200px;
background-color: $dark;
}
@media (max-width: 500px) {
.target {
height: 200px;
background-color: $red;
}
}
</style>
9-2. Sass 변수
- Quasar 는 Breakpoints 를 Sass 변수로 정의함
- 이 변수를 이용해
max-width: 599.99px
로 정의될 수 있음
@media (max-width: $breakpoint-xs-max) {
.target {
height: 200px;
background-color: $red;
}
}
9-3. body 에 적용하기
framework: {
config: {
screen: {
bodyClasses: true
}
}
}
- F12 개발자 도구에서 body 태그에 화면 사이즈 별로 class 값이 들어가는 것을 볼 수 있음 (
screen--md
)
9-4. body 사이즈에 맞춰 스타일 적용
- body 에
screen--sm
클래스가 있으면, .target
의 배경색은 yellow-3 컬러로 적용
<div class="target"></div>
<style lang="scss" scoped>
.target {
height: 200px;
background-color: $dark;
}
@media (max-width: $breakpoint-xs-max) {
.target {
height: 200px;
background-color: $red;
}
}
.target {
body.screen--sm & {
background-color: $yellow-3;
}
body.screen--xs & {
background-color: $teal-3;
}
}
</style>
- 결과는 아래와 같음
- 기본 상태는
$dark
/ screen--sm
일 때 $yellow-3
/ screen--xs
일 때 $teal-3
body.screen--xs & { ~
부분이 없다면 media (max-width: $breakpoint-xs-max)
로 인해 $red
가 적용됨
9-5. $q object
9-6. $q.screen
- screen 에 대한 정보들을 담고 있음
<template>
에서 접근 시에는 <div>{{ $q.screen }}</div>
로 작성하여 screen 정보를 조회할 수 있음
- $q object 가 vue 인스턴스에 있기 때문
- Options API 사용하는 경우,
this.$q.screen
로 작성
<script>
export default {
mounted() {
console.log('this.$q.screen > ', this.$q.screen);
},
};
</script>
- Vue 3 이므로, setup 함수에서 접근하기로 함
- Quasar 에서 지원하는
useQuasar
라는 Composable 함수를 활용
<script setup>
import { useQuasar } from 'quasar';
const $q = useQuasar();
console.log('setup -> q.screen > ', $q.screen);
</script>
9-7. Vue 파일 외부에서 접근
import { Quasar, Platform } from 'quasar'
console.log(Quasar.version)
console.log(Platform.is.ios)
9-8. $q.screen 객체 출력
$q.screen
객체를 v-for
를 이용해 반복하며 출력
v-for="(value, key) in $q.screen"
: $q.screen
의 값을 value, key 에 담음
<span class="inline-block" style="width: 120px">
<span>
태그는 inline element 라 width, height 가 적용되지 않음
- Quasar 에서 제공하는 Helper Class 를 활용, inline block으로 display 속성 변경
{{ isFunction(value) ? '함수' : value }}
: 함수이면 '함수', 아니면 value 값을 출력하도록 isFunction()
함수 작성
<section class="q-mb-xl">
<div class="text-h4 nanumBrush">$q.screen</div>
<q-separator class="q-my-md" />
<div class="text-subtitle1">
<ul>
<li v-for="(value, key) in $q.screen" :key="key">
<span class="inline-block" style="width: 120px">{{ key }}</span>
: <span>{{ isFunction(value) ? '함수' : value }}</span>
</li>
</ul>
</div>
</section>
<script setup>
const isFunction = value => typeof value === 'function';
</script>
- 출력된 정보를 이용해, 현재 화면이 sm 보다 크면 중앙 정렬된
$q.screen.name
를 출력, 아니면 보이지 않음
name: sm
: 현재 화면에 대한 Breakpoint 정보 = sm
gt: { "xs": true, "sm": false, "md": false, "lg": false }
: 현재 화면에 대한 Breakpoint 정보와 비교하여 큰지 검사
<section class="q-mb-xl">
<div class="text-h4 nanumBrush">$q.screen 과 v-if</div>
<q-separator class="q-my-md" />
<div v-if="$q.screen.gt.sm" class="target flex flex-center">
<span class="text-h2 text-weight-bold text-grey">
{{ $q.screen.name }}
</span>
</div>
</section>
9-9. flex-addons
framework: {
cssAddon: true,
config: {
screen: {
bodyClasses: true,
},
},
- 여백 지정 클래스 사이에 Breakpoints 설정 가능 :
.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)
- ex. 웹 화면에서는 여백을 넓게, 모바일 화면에서는 여백을 좁게 설정하고 싶을 때
<q-page class="q-pa-xl">
대신 <q-page class="q-pa-md q-pa-md-xl">
- 상하좌우 padding 값이 md 이상의 Breakpoints 에서 xl 이고, 그 미만일 경우 md
<template>
<q-page class="q-pa-md q-pa-md-xl">
<section class="q-mb-xl">