[QUASAR] Padding 과 Margin / Breakpoints 와 반응형 웹 / $q object

EUN JY·2024년 2월 15일

quasar vue3

Quasar

목록 보기

3/3

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

Style & Identity > Breakpoints (https://quasar.dev/style/breakpoints)
반응형 웹에서 화면 사이즈가 변하는 지점 (viewport)

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

9-2. Media Query

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 에 적용하기

body 에 적용하기 위해 body class 활성화가 필요 (https://quasar.dev/options/screen-plugin#how-to-enable-body-classes)
C:\Users\YNJCH\learn-quasar\quasar.config.js 에 아래와 같이 작성

framework: {
  config: {
    screen: {
      bodyClasses: true // <<< add this
    }
  }
}

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

Breakpoints 를 프로그래밍적으로 접근
Options & Helpers > The $q object (https://quasar.dev/options/the-q-object)
- $q.version, $q.platform, $q.screen, $q.lang, $q.iconSet, $q.cordova, $q.capacitor

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 파일 외부에서 접근

Outside of a .vue file (https://quasar.dev/options/the-q-object#outside-of-a-vue-file)
Util, Service 등에서 $q object 에 접근하고 싶을 때, Quasar 라는 객체를 가져와 접근할 수 있음

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

cssAddon: true 설정을 하면, Breakpoints 를 여백과 함께 사용할 수 있음 (https://quasar.dev/style/spacing#flex-addons)
C:\Users\YNJCH\learn-quasar\quasar.config.js

    framework: {
      cssAddon: true,
      config: {
        screen: {
          bodyClasses: true, // <<< add this
        },
      },

여백 지정 클래스 사이에 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">

EUN JY

개린이

이전 포스트

[QUASAR] Padding 과 Margin / Breakpoints 와 반응형 웹 / $q object

Quasar

8. Padding 과 Margin

8-1. 실습용 페이지 생성

8-2. div에 적용

8-3. none 과 auto

8-4. 중앙 정렬

기타 Style Class

9. Breakpoints

9-1. Quasar 정의 화면 사이즈

9-2. Media Query

9-2. Sass 변수

9-3. body 에 적용하기

9-4. body 사이즈에 맞춰 스타일 적용

9-5. $q object

9-6. $q.screen

9-7. Vue 파일 외부에서 접근

9-8. $q.screen 객체 출력

9-9. flex-addons

[QUASAR] Typography (routes.js 설정, eslint) / Colors (Sass 변수)

0개의 댓글