vuetify component의 input, button 사용할 때 길이 조정하기

Vuetify의 v-text-field(입력 필드)와 v-btn(버튼)은 기본적으로 너비가 길게 설정되어 있다.

이를 적절하게 조정하려면 Vuetify의 그리드 시스템, 유틸리티 클래스, 속성 활용이 필요하다.

 

✅ 이 글에서 다룰 내용

1️⃣ 그리드 시스템 활용 (v-row, v-col)

2️⃣ 유틸리티 클래스 (ma-2, max-width) 사용

3️⃣ 속성 (block, width)으로 크기 조정

 

🟢 1. Vuetify 그리드 시스템을 사용한 크기 조정

 

Vuetify는 Flexbox 기반의 그리드 시스템을 제공하므로, v-row와 v-col을 사용하면 반응형 크기 조정이 가능하다.

 

✔ 기본 코드 예제

<v-container>
  <v-row>
    <v-col cols="12" sm="6" md="4">
      <v-text-field label="이름"></v-text-field>
    </v-col>
  </v-row>
</v-container>

 

✅ 설명:

• cols="12" → 모바일에서 전체 너비 사용

• sm="6" → 작은 화면(태블릿)에서 50% 너비

• md="4" → 큰 화면에서 1/3 너비

 

💡 Tip: v-col을 활용하면 입력 필드나 버튼이 너무 길어지는 문제를 쉽게 해결할 수 있다.

 

🔗 참고 사이트

https://vuetifyjs.com/en/api/v-col/

 

🟡 2. Vuetify 유틸리티 클래스로 크기 조정

 

Vuetify는 간단한 스타일 조정을 위한 유틸리티 클래스를 제공한다.

특히 ma-2(마진 적용)와 max-width(최대 너비 설정)를 활용하면 컴포넌트 크기를 손쉽게 조정할 수 있다.

 

✔ 유틸리티 클래스를 활용한 예제

<v-container>
  <v-row>
    <v-text-field class="ma-2" label="이메일" style="max-width: 300px;" />
  </v-row>
</v-container>

 

✅ 설명:

• class="ma-2" → Vuetify 마진 클래스 적용 (적절한 여백 추가)

• style="max-width: 300px;" → 입력 필드의 최대 너비 제한

 

💡 Tip:

• max-width 값은 디자인에 맞게 조정 가능

• pa-2, mt-3 같은 Vuetify 유틸리티 클래스도 함께 활용 가능

 

🔗 참고 사이트: 

Spacing helpers — Vuetify.js

 

🖥️  화면

vuetify 유틸리티 클래스 사용

 

🔵 3. 속성을 활용한 버튼 크기 조정

 

Vuetify의 v-btn(버튼)은 기본적으로 부모 요소의 너비를 따라가지만,

block 또는 width 속성을 사용하면 크기를 조정할 수 있다.

 

✔ 버튼 크기 조정 예제

<v-container>
  <v-row>
    <v-btn block>전체 너비 버튼</v-btn>
  </v-row>
  <v-row>                    
    <v-btn width="300px">고정 크기 버튼</v-btn>
  </v-row>
</v-container>

 

 

✅ 설명:

• block → 버튼이 부모 컨테이너의 전체 너비를 차지

• width="300px" → 버튼의 고정 너비 설정

 

💡 Tip:

• max-width: 80% 같은 스타일을 추가하면 반응형으로 조정 가능

 

🖥️ 화면

vuetify v-btn 속성

 

📌 정리 & 결론

 

✅ Vuetify Input, Button 크기 조정 방법 총정리

방법	적용 예제	설명
그리드 시스템 (v-col)	sm="6" md="4"	반응형 크기 조정 가능
유틸리티 클래스 (ma-2)	class="ma-2" style="max-width: 300px;"	간단한 너비 제한
속성 (block, width)	v-btn block, v-btn width="300px"	버튼 크기 직접 지정

 

🚀 위 방법을 적용하면 Vuetify에서 입력 필드와 버튼 크기를 효과적으로 조정할 수 있다!