[Vuetify] v-row와 v-col 사용법

모비어스에서 Vuetify를 쓴다고 합니다. Bootstrap같이 UI 컴포넌트 라이브러리인데, 디자인이 구글 물을 너무 먹어서 살짝 별로? 하지만 잘쓰면 좋을 거 같습니다.

v-col, v-row, v-div, v-container 처럼 미리 정해진 html tag를 사용해 UI를 구성하는 라이브러리 입니다. 근데 직관적이지 않고 러닝커브가 많이 높아서 대가리 박으면서 배우는게 살짝 한계가 있는 거 같습니다. 그래서 여기서 필수적인 부분을 정리하면서 Vuetify를 사용해보도록 하겠습니다

v-col과 v-row

이건 grid, table처럼 cols, rows를 지정해서 얼마나 영역을 차지할지 정합니다.

예시를 가지고 설명해보겠습니다.

<template>
  <v-container>
    <!-- 가로 방향(row)으로 3개의 컬럼 배치 -->
    <v-row>
      <v-col cols="4">
        <div class="pa-4 grey lighten-4">컬럼 1 (4/12)</div>
      </v-col>
      <v-col cols="4">
        <div class="pa-4 grey lighten-3">컬럼 2 (4/12)</div>
      </v-col>
      <v-col cols="4">
        <div class="pa-4 grey lighten-2">컬럼 3 (4/12)</div>
      </v-col>
    </v-row>
  </v-container>
</template>

cols, rows의 총 값은 12이고 초과될 시 줄바꿈됩니다.
cols가 4가 아닌 8이 된다면 3개 전부 줄바꿈됩니다.

반응형으로 만들기

특정 사이즈 이상일때 6공간 차지, 이하일 때 12공간 차지처럼
media query를 적용할 수 있습니다

예시를 통해 알아보겠습니다

<template>
  <v-container>
    <!-- sm(600px) 이하에선 12칸, md(960px) 이상에선 6칸씩 배치 -->
    <v-row>
      <v-col cols="12" md="6">
        <div class="pa-4 teal lighten-4">컬럼 A (xs=12, md=6)</div>
      </v-col>
      <v-col cols="12" md="6">
        <div class="pa-4 teal lighten-3">컬럼 B (xs=12, md=6)</div>
      </v-col>
    </v-row>
  </v-container>
</template>

md 크기 이상일땐 6 공간을 차지하고 md 크기보다 작아지면 기본 값인 12 공간을 차지하게 됩니다.

정렬과 간격 조절

당연하게도 정렬 또한 정할 수 있게 됩니다.

예시를 통해 배워봅시다

<template>
  <v-container>
    <!-- 수직 가운데 정렬, 컬럼 간격(gutter)=8px -->
    <v-row align="center" dense>
      <v-col cols="4">
        <div class="pa-4 red lighten-4">왼쪽</div>
      </v-col>
      <v-col cols="4">
        <div class="pa-4 red lighten-3">중앙</div>
      </v-col>
      <v-col cols="4">
        <div class="pa-4 red lighten-2">오른쪽</div>
      </v-col>
    </v-row>
  </v-container>
</template>

기본적으로 vuetify에서는 width: 100%가 기본값입니다.

마무리

Vuetify는 미리 제공되는 수치가 많아서 마음대로 이쁘게 만들기 쉽지 않습니다.