Vue
뷰티파이 그리드레이아웃 v-row v-col cols 기기별 정렬속성
낮햇볕
2022. 3. 29. 17:59
행 v-row 12열이 1행
v-row를 이용하면 하나의 행을 만들수 있다
열 v-col
v-col를 이용하면 안에 들어가는 열을 만들수있다
cols을 이용하여 차지하는 열의 갯수를 정할수 있다
cols=6작성시 전체 반차지 12넣으면 전체차지 최대가 12다
열사이간격조정 offset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<title>Document</title>
<style>
.border_style{
border: 1px solid black;
background-color: rgb(133, 100, 145);
}
#app{
color:white;
}
</style>
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<!-- v-row를 이용하면 하나의 행을 만들수 있다 -->
<v-row >
<!-- v-col를 이용하면 안에 들어가는 열을 만들수있다 -->
<!-- cols=6작성시 전체 반차지 12넣으면 전체차지 기본값12이여서 넘으면 아래로내려옴-->
<v-col cols="12" class="border_style">그리드12</v-col>
<!-- cols을 이용하여 차지하는 열의 갯수를 정할수 있다 -->
<v-col cols="6" class="border_style">그리드6</v-col>
<!--위의 6에서 다음남은칸채운다음 줄바꿈함 -->
<v-col cols="1" class="border_style" v-for="item in 12">그리드12</v-col>
</v-row>
</v-container>
<v-container>
<v-row>
<!-- sm(태블릿)사이즈에따른 그리드사용 -->
<!-- 화면클때 4칸차지 작아지면 전체차지 -->
<v-col sm="4" class="border_style">sm4</v-col>
<!-- offset-sm=4열간격띄우기 뒤쪽4칸차지
크기에따라 띄어줌280보다작아지만 아래로내려감-->
<v-col sm="4" offset-sm="4" class="border_style">sm4</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
<script>
new Vue({
el:"#app",
vuetify: new Vuetify(),
})
</script>
</body>
</html>
cols="12"면 전체차지해서 한줄에 전체차지가되었고
cols ="6"이면 절반차지해서 절반차지가 되고
cols = "1" v-for = "item in 12" 는 cols가 1이 되어서 한칸씩 v-for문으로 12를 줘서 위의 절반차지한다
cols=6 옆에 바로출력된다 cols가 12였다면 아래로 출력된다
그리고 밑의 sm4는 sm은 태블릿pc에서 볼때이고
sm="4"이면 화면클때(600이되었을때) 4칸을 차지한다 화면이 작아지면(600미만일때) 6칸차지한다
offset-sm ="4" 는 4칸을 띄우고 다음에 나오게 된다 하지면 화면크기에따라 띄워진게 없어질수있다
아래에 기기별로 어떻게 나오는지 적어두었다 화면을 작게 하거나 크게하면 sm4가 달라지게된다
기기별 정렬속성 text-코드명-정렬명
| 범위(픽셀) | 0-559 | 600-959 | 9600-1263 | 1264-1903 | 1904- |
| 코드명 | xs | sm | md | lg | xl |
| 이니셜 | eXtar Small | Small | MeDium | LarGe | eXta Large |
| 기기종류 | 스마트폰 | 태블릿 pc | 노트북 | 데스크톱 | 데스크톱 와이드 |