Vuetify 를 쓰다보면, class="mb-4" 이런 게 보인다.
이게 뭘까~?~?
어렵지 않다.

<v-text-field
v-model="userId"
label="아이디"
variant="outlined"
density="compact"
class="mb-4"
/>
이건 아이디 text-field 의 아래로 margin이 4단계 들어갔다는 뜻이다.
숫자는 Vuetify 기준 spacing scale (1은 약 4px)

그리고 이렇게 block속성이 들어가있으면 너비가 자동으로 100%가 된다.
Vuetify 컴포넌트는 기본적으로 block 요소라 가로정렬이 안되므로
margin: 0 auto; 을 줘야 중앙정렬 된다.
'웹 개발 > Vue' 카테고리의 다른 글
| [Vue3] optionsAPI / compositionAPI(script setup) 비교 예제 (0) | 2025.08.07 |
|---|---|
| [Vue3][wikibook] 1. Vue 소개 (3) | 2025.08.06 |
| [Vue3] DB중에서 계정 과목 불러와서 selectBox에 넣기 (1) | 2025.06.10 |
| [Vue3] v-slot (0) | 2025.05.28 |
| [Vue3] data() -> <script setup> 문법 (0) | 2025.05.28 |