<g-page class="q-pa-xl"> 했는데도 여백 안생김
83
작성한 질문수 2
여백이 선생님 만큼 안떨어지는데 왜 그럴까요?
<template>
<g-page class="q-pa-xl">
<section class="q-mb-xl">
<div class="text-h4">Headings</div>
<q-separator class="q-my-md" />
<p class="text-h1">Headline 1</p>
<p class="text-h2">Headline 2</p>
<p class="text-h3">Headline 3</p>
<p class="text-h4">Headline 4</p>
<p class="text-h6">Headline 5</p>
<p class="text-h6">Headline 6</p>
<p class="text-subtitle1">Subtitle 1</p>
<p class="text-subtitle2">Subtitle 2</p>
<p class="text-body1">
Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
</p>
<p class="text-body2">
Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas
sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus
dolor saepe inventore, soluta id accusantium voluptas beatae.
</p>
<p class="text-caption">Caption text</p>
<p class="text-overline">Overline</p>
</section>
<section>
<div class="text-h4">FontWeight</div>
<q-separator class="q-my-md" />
<p class="text-weight-thin">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="text-weight-light">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="text-weight-bold">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</section>
<section>
<div class="text-h4">CSS Helper Classes</div>
<q-separator class="q-my-md" />
<p class="text-weight-thin text-right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="text-weight-light text-center">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="text-weight-bold text-strike">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</section>
</g-page>
</template>
<script></script>
<script setup></script>
<style lang="scss" scoped></style>
답변 2
0
안녕하세요~!
개발자도구해서 해당 요소를 디버깅 하시면 해당 스타일이 왜 적용이 안되었는지 금방 찾을 수 있어요~!
바로 개발자도구를 열고 요소검사로 확인해 보시는 것을 권장드립니다.
0
안녕하세요, 인프런 AI 인턴입니다. 김유진님.
질문하신 여백 문제는 Quasar의 CSS 클래스를 통해 쉽게 조정할 수 있습니다. 코드에서 <g-page> 대신 <q-page>를 사용해야 한다는 점도 확인해 주세요.
Quasar의 q-pa-xl 클래스는 요소 전체에 여백을 주기 때문에, 스타일이 적용되지 않는다면 다른 스타일이 우선하고 있을 가능성이 있습니다. 예를 들어, CSS 파일의 상위 스타일에 의해 덮어씌워졌을 수 있습니다. 아래에 몇 가지 해결 방안을 제시하겠습니다.
해결 방법:
확인 요소 및 CSS 파일 검사: 브라우저 개발자 도구를 사용해서 어느 스타일이 적용되고 덮어씌워지는지 확인해 보세요. 이는 Quasar 스타일이 다른 스타일 규칙에 의해 덮어씌워졌는지를 판별하는 데 유용합니다.
올바른 컴포넌트 사용: 사용하고 있는 컴포넌트가
<g-page>가 아니라<q-page>가 맞는지 확인해 주세요. 잘못된 컴포넌트가 사용된 것일 수 있습니다.강제 CSS 적용:
!important를 사용해서 강제로 스타일을 적용해 보세요..q-pa-xl { padding: 32px !important; // XL 여백 크기는 Quasar에서 보통 24px~32px입니다. }Scoped 스타일 확인:
<style lang="scss" scoped>로 되어 있으면, 다른 스타일이 영향을 미치지 않아야 하지만, 여전히 문제가 있다면scoped를 제거하고 전체 영향을 보도록 할 수도 있습니다.Quasar CSS Helper 확인: Quasar의 문서에서 각 클래스의 동작을 재확인해주세요. 때때로 버전간 차이에 의해 동작이 달라질 수 있습니다.
현재 질문에서 <g-page> 사용 오타 의심이 가장 큽니다. <q-page>로 변경 후 시도해 보시기를 권장합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
ComboBox 관련해서 질문 드립니다.
0
68
2
quasar intellisense extension 관련 문의
0
262
2
q-tab 오류 문의
0
238
1
q-upload 문의 드립니다.
0
489
1
q-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상
0
309
1
Key값으로 Object 사용가능할까요?
0
229
1
npm run build 시 오류 발생합니다
0
458
1
fontawsome 사용법
0
250
1
Quasar 관련 익스텐션
0
216
1
VUE를 이용해서 프로그램 파일을 실행할수 있을까요?
0
410
1
q-input 태그 내용사라짐
0
272
1
q-input 컴포넌트 질문
0
466
1
버튼이 마음대로 크기가 바뀌어요
0
655
1
다크 모드 처리 관련하여 질문드립니다.
0
531
1
script setup 태그 유무에 따라서 페이지 출력이 안됩니다.
0
541
3
vue3 composition api (script setup) 사용 시 전역변수 접근
0
1439
1
한글 실시간 바인딩
2
2530
2
vue3 composition Api 사용시 setup 내부에서도 /src/boot에 설정한 constatns.js 값을 가져올수 있나요?
0
396
1
router.push로 이동 시, 유튜브 페이지의 컨텐츠 영역 안보이는 현상
0
463
1
validation
0
365
1
CORS 설정
0
602
1
질문 있습니다
0
331
1
Helper Classes
0
308
1
Quasar 내장 컴포넌트 색 질문입니다.
0
441
1





