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

강의를 듣고 말씀해주신대로 헤더를 만들고 있는데

q-button컴포넌트가 헤더를 줄이면 혼자서 사이즈가 커져버리는데 원인이 뭔지 모르겠습니다.css로 버튼 높이를 고정해도 계속 커집니다

또한 toolbar의 경우 일정 크기 이하일경우 토글메뉴바로 변경하게는 불가능한걸까요?

 <template>
  <q-layout view="lHh Lpr lFf">
    <q-header class="bg-white text-black">
      <q-toolbar class="row items-center justify-between">
        <q-toolbar-title>
          <q-avatar size="md">
            <img src="src/assets/logo.png" />
          </q-avatar>
          <RouterLink to="/">부동부동</RouterLink>
        </q-toolbar-title>

        <q-tabs v-model="tab" shrink>
          <q-tab name="tab1" label="Tab 1" />
          <q-tab name="tab2" label="Tab 2" />
          <q-tab name="tab3" label="Tab 3" />
        </q-tabs>

        <div class="row no-wrap q-gutter-sm">
          <q-btn
            class="header btn-fixed-height"
            text-color="accent"
            color="white"
            outline
            style="accent"
            label="회원가입"
          />

          <q-btn class="header btn-p" color="primary" label="로그인" />
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
      <q-list>
        <q-item-label header>Essential Links</q-item-label>

        <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue';
import EssentialLink from 'components/EssentialLink.vue';



</script>
<style lang="scss" scoped>
.custom-tolbar {
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.26);
}
.header {
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid;
}
a {
  font-weight: 600;
  font-size: 24px;
  line-height: 48px;
  padding: 3px;
  color: #092d37;
  text-decoration: none;
}
</style>