이번에는 Dashboard 등 화면 Layout구성의 근간이 되는 Grid System에 대해서 알아보고자 합니다. Vuetify에서는 Layout 구성을 위한 방법을 제공하는데... 그것이 Grid System 입니다.
1. Grid System이란?
Vuetify는 flex-box를 사용하여, 화면을 가로를 기준으로 12개로 나누어 유연하게 구성이 가능하도록 기능을 제공합니다. 이를 기준으로 사용자는 자신이 원하는 기준에 맞게 Layout을 구성하여 사용하면 됩니다. 여기에는 window size 및 window의 방향을 고려한 5가지의 Breakpoints를 지정하여 사용이 가능하도록 제공합니다. 이러한 해상도에 대한 정보는 Vuetify 공식 페이지에서 제공하는 내용을 작성해 보겠습니다.
[12 points] - Vuetify 공식 페이지 참조
[Breakpoints] - Vuetify 공식 페이지 참조
| Device | Code | Type | Range |
| Extra small | xs | Small to large phone | < 600px |
| Small | sm | Small to medium tablet | 600px ~ 960px |
| Medium | md | Large tablet to laptop | 960px ~ 1264px |
| Large | lg | Desktop | 1264px ~ 1904px |
| Extra Large | xl | 4k and ultra-wide | > 1904px |
2. Grid System 구성
Grid System을 사용하기 위한 Vuetify의 코드 구성이 버전별로 차이가 있습니다. 우리는 v2.4.5를 사용하기 때문에 아래 구성만 참조하면 되지만... 향후에 다른 사람들이 작성한 코드를 참조할 때, 기존 버전인지 구분하기 위해서 v1.5에서의 구성도 살펴보겠습니다.
[v1.5]
<v-container>
<v-layout>
<v-flex>
</v-flex>
</v-layout>
</v-container>
[v2.4.5]
<v-container>
<v-row>
<v-col>
</v-col>
</v-row>
</v-container>각 Tag에 대해서 간단히 알아보고 실험을 해보도록 하겠습니다.
- v-container - Grid System를 구성하는 가장 큰 틀로서 요소들을 중앙정렬로 배치시키는 Tag입니다. Viewport의 100%를 사용하기 위해서는 fluid라는 props를 추가합니다. v1.5와는 동일한 기능을 합니다.
- v-row - v-col을 감싸주는 Tag로서 v1.5에서는 v-layout으로 그 기능을 제공하였습니다. 표준적으로 gutter를 24px로 지정하여 제공하고 있습니다. props중 dense를 추가하여 그 폭을 줄일 수 있으며, no-gutters로 그 폭을 아예 없앨 수 있습니다.
- v-col - Grid System의 최하단 Tag로서 v1.5에서는 v-flex로 그 기능을 제공하였습니다. v-row안에서 12points에 대한 적절한 배치를 수행합니다. 물론 Breakpoints 기준으로 배치가 됩니다.
3. Grid System 기본 구현
[Grid System 기본 코드]
<template>
<v-container fluid>
<v-row dense>
<v-col v-for="n in 12" :key="n" cols="12" md="1">
<v-card class="pa-3" outlined tile>
#{{n}}
</v-card>
</v-col>
</v-row>
</v-container>
</template>
음 화면이 너무 작네요.... Medium size device에서 12 points의 구성을 보여드리고자 구성했더니 너무 해상도가 커서 캡쳐가 잘 보이지 않네요!! 아무래도 device code sm으로 12 points를 구성해서 보시죠!!
이때는 소스 코드를 md="1"에 옆에 sm="1"만 추가해주시면 됩니다.
<v-col v-for="n in 12" :key="n" cols="12" md="1" sm="1">
이제 좀 보이시나요?? 해당 소스를 살짝 분석해 보면... <v-container>에 fluid props를 추가하여, viewport전체사이즈를 기준으로 v-card를 배치하게 하였습니다. 또한 <v-row>에 dense props를 추가하여, 각 v-card의 간격이 24px보다 작게 배치되게 하였습니다.
<v-col>에서는 v-for로 반복하여 v-card를 구성하였지만, 중요한 부분은 sm="1"로 하여 개별 <v-col>의 크기는 12 points 기준에 의거하여 1의 크기를 갖게 설정하여 총 12개의 <v-col>이 한개의 열로 구성되게 하였습니다.
이제는 개념이 대충 생기셨나요?? 그럼 복합 Size에 대한 Layout을 구성해 보면서 좀더 구체화를 해보겠습니다.
4. Grid System 복합 구현
이번에는 Grid를 약간 여러가지로 복잡하게 구현해 보겠습니다. 그리고 Device의 size에 맞게 조절이 되는 부분에 대해서도 구현해 보겠습니다.
- Top - 3개의 v-card로 구성 (단, md size에서와 sm size에서 동일하게 구현)
- Middle - 4개의 v-card로 구성 (단, md size에서는 4개가 1줄로, sm size에서는 2줄로 구현)
- Bottom - 2개의 v-card로 구성 (단, md size에서는 2개가 1줄로, sm size에서는 2줄로 구현)
먼저 결과를 확인해보고 코드를 보겠습니다.
[md size Device]
[sm size Device]
그림으로 보니까 살짝 느껴지시나요?? 그럼 바로 코드를 확인해 보겠습니다.
[소스코드]
<template>
<v-container fluid>
<v-row dense>
<v-col v-for="n in 3" :key="n" cols="12" md="4" sm="4">
<v-card class="pa-3" outlined tile style="height: 150px;" color="#385F73">
TOP #{{n}}
</v-card>
</v-col>
</v-row>
<v-row dense>
<v-col v-for="n in 4" :key="n" cols="12" md="3" sm="6">
<v-card class="pa-3" outlined tile style="height: 300px;" color="#1F7087">
MIDDLE #{{n}}
</v-card>
</v-col>
</v-row>
<v-row dense>
<v-col v-for="n in 2" :key="n" cols="12" md="6" sm="12">
<v-card class="pa-3" outlined tile style="height: 250px;" color="#952175">
BOTTOM #{{n}}
</v-card>
</v-col>
</v-row>
</v-container>
</template>아마 내부에 <v-card>로 꾸미고 하면, 너무 아름다운 화면을 볼 수 있겠지만... 저는 영역만 확인하고자 TOP / MIDDLE / BOTTOM에 공통적인 색으로 구현하였습니다.
열을 늘리기 위해서는 <v-row>를 계속 추가하면 됩니다. 그리고 각 device별로 한개의 v-card가 가지는 크기를 조절하기 위해서는 Breakpoints에 정의된 code로 절대적인 size를 12 points체계 기준으로 정의하면 됩니다.
<v-col v-for="n in 4" :key="n" cols="12" md="3" sm="6">이 코드의 경우에는... v-card를 4개 배치를 하는 코드입니다. 그리고, medium size는 12 points중 3 points크기로 적용합니다. 또한, small size는 12 points중 6 points크기를 적용합니다. 따라서... medium일 경우에는 한줄로 v-card 4개가 보여질 것이고, small일 경우에는 두줄로 v-card 4개가 보여질 것 입니다.
그 밑에 코드도 동일한 방식으로 동작하게 됩니다.
이제 이후에 v-card를 통해서 뭔가 의미있는 정보를 아름답게 표현해 보도록 하겠습니다.
- Ayotera Lab -
댓글