인프런 커뮤니티 질문&답변

밤의멜로디님의 프로필 이미지
밤의멜로디

작성한 질문수

퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)

Spacing - Padding, Margin 간격 활용하기

spacing 직접 지정

해결된 질문

작성

·

206

0

 안녕하세요

강의 잘 보고 있습니다.

다름이 아니라 padding 혹은 margin을 직접 크기를 주고 싶을 땐 어떻게 해야 할까요?

다른 프레임워크에서는 보통 뒤에 -숫자를 넣으면 해당 숫자만큼 margin 혹은 padding이 되던데 Quasar에서는 어떻게 되는지 궁금합니다.

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 :)

프레임워크 별 차이인 것 같아요. 퀘이사에서는 아래 정의된 사이즈([none|auto|xs|sm|md|lg|xl])로 표기할 수 있고요.

커스텀한 간격을 원한다면

  • <style> 태그에 스타일링을 할 수도 있고

  • 아니면 별도의 사이즈(예: xxl, 3xl)를 정의할 수도 있겠죠?

q-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
    T       D                   S

T - type
  - values: p (padding), m (margin)

D - direction
  - values:
      t (top), r (right), b (bottom), l (left),
      a (all), x (both left & right), y (both top & bottom)

S - size
  - values:
      none,
      auto (ONLY for specific margins: q-ml-*, q-mr-*, q-mx-*),
      xs (extra small),
      sm (small),
      md (medium),
      lg (large),
      xl (extra large)

참고 - https://quasar.dev/style/spacing

 

밤의멜로디님의 프로필 이미지
밤의멜로디

작성한 질문수

질문하기