<template> <div> <div class="content"> <div class="row"> <div class="content-titleZone"> <p class="box-title">box content</p> </div> <table class="option-table"> <colgroup> <col style="width:20%"> <col style="width:80%"> </colgroup> <tbody> <tr> <th>contetn</th> <td>main영역에서 전체 하얀색 box</td> </tr> <tr> <th>left-contetn</th> <td>main영역에서 왼쪽 하얀색 box</td> </tr> <tr> <th>right-contetn</th> <td>main영역에서 오른쪽 하얀색 box</td> </tr> <tr> <th>row</th> <td>main영역에서 위아래 box</td> </tr> </tbody> </table> <img src="../../../resources/img/guideImg/vertical.png" alt=""> <img src="../../../resources/img/guideImg/horizontal.png" alt=""> </div> <div class="row"> <div class="content-titleZone"> <p class="box-title">메인축 배치</p> </div> <table class="option-table"> <colgroup> <col style="width:20%"> <col style="width:80%"> </colgroup> <tbody> <tr> <th>flex</th> <td>아이템들을 가로 방향으로 배치</td> </tr> <tr> <th>flex-column</th> <td>아이템들을 세로 방향으로 배치</td> </tr> </tbody> </table> </div> <div class="row"> <div class="content-titleZone"> <p class="box-title">메인축 방향 정렬</p> </div> <table class="option-table"> <colgroup> <col style="width:20%"> <col style="width:80%"> </colgroup> <tbody> <tr> <th>justify-start</th> <td>아이템들을 시작점으로 정렬합니다.</td> </tr> <tr> <th>justify-center</th> <td>아이템들을 가운데로 정렬합니다.</td> </tr> <tr> <th>justify-between</th> <td>아이템들의 “사이(between)”에 균일한 간격으로 정렬합니다.</td> </tr> <tr> <th>justify-end </th> <td>아이템들을 끝점으로 정렬합니다.</td> </tr> </tbody> </table> <img src="../../../resources/img/guideImg/justify.png" alt=""> </div> <div class="row"> <div class="content-titleZone"> <p class="box-title">수직축 방향 정렬</p> </div> <table class="option-table"> <colgroup> <col style="width:20%"> <col style="width:80%"> </colgroup> <tbody> <tr> <th>align-start</th> <td>아이템들을 시작점으로 정렬합니다.</td> </tr> <tr> <th>align-center</th> <td>아이템들을 가운데로 정렬합니다.</td> </tr> <tr> <th>align-end</th> <td>아이템들을 끝점으로 정렬합니다.</td> </tr> </tbody> </table> <img src="../../../resources/img/guideImg/align.png" alt=""> </div> <div class="row"> <div class="content-titleZone"> <p class="box-title">너비 비율(부모에 flex나 flex-column이 있어야 자식에 너비를 넣을 수 있음)</p> </div> <table class="option-table"> <colgroup> <col style="width:20%"> <col style="width:80%"> </colgroup> <tbody> <tr> <th>flex5</th> <td>너비 4.5%</td> </tr> <tr> <th>flex10</th> <td>너비 9.5%</td> </tr> <tr> <th>flex15</th> <td>너비 14.5%</td> </tr> <tr> <th>flex20</th> <td>너비 19.5%</td> </tr> <tr> <th>flex25</th> <td>너비 24.5%</td> </tr> <tr> <th>flex30</th> <td>너비 29.5%</td> </tr> <tr> <th>flex35</th> <td>너비 34.5%</td> </tr> <tr> <th>flex40</th> <td>너비 39.5%</td> </tr> <tr> <th>flex45</th> <td>너비 44.5%</td> </tr> <tr> <th>flex50</th> <td>너비 49.5%</td> </tr> <tr> <th>flex55</th> <td>너비 54.5%</td> </tr> <tr> <th>flex60</th> <td>너비 59.5%</td> </tr> <tr> <th>flex65</th> <td>너비 64.5%</td> </tr> <tr> <th>flex70</th> <td>너비 69.5%</td> </tr> <tr> <th>flex75</th> <td>너비 74.5%</td> </tr> <tr> <th>flex80</th> <td>너비 79.5%</td> </tr> <tr> <th>flex85</th> <td>너비 84.5%</td> </tr> <tr> <th>flex90</th> <td>너비 89.5%</td> </tr> <tr> <th>flex95</th> <td>너비 94.5%</td> </tr> </tbody> </table> </div> <div class="row"> <div class="content-titleZone"> <p class="box-title">텍스트 정렬</p> </div> <table class="option-table"> <colgroup> <col style="width:20%"> <col style="width:80%"> </colgroup> <tbody> <tr> <th>text-lf</th> <td>텍스트 왼쪽정렬</td> </tr> <tr> <th>text-ct</th> <td>텍스트 가운데정렬</td> </tr> <tr> <th>text-rg</th> <td>텍스트 오른쪽정렬</td> </tr> </tbody> </table> </div> </div> </div> </template> <script> export default { data() { return { } }, methods: { }, watch: { }, computed: { }, components: { }, mounted() { console.log('main mounted'); } } </script>