Commit @d84816e3c71efb119b7091bfe30e22f6177e9b75

류윤주 01-15

240115 가이드 추가

@d84816e3c71efb119b7091bfe30e22f6177e9b75

869d590

d84816e

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


     flex: 0 0 29.5%
 }
 
+.flex35 {
+    flex: 0 0 34.5%
+}
 
 .flex40 {
     flex: 0 0 39.5%
 }
 
+.flex45 {
+    flex: 0 0 44.5%
+}
+
 .flex50 {
     flex: 0 0 49.5%
+}
+
+.flex55 {
+    flex: 0 0 54.5%
 }
 
 

     flex: 0 0 59.5%
 }
 
+.flex65 {
+    flex: 0 0 64.5%
+}
+
 
 .flex70 {
     flex: 0 0 69.5%
+}
+
+.flex75 {
+    flex: 0 0 74.5%
 }
 
 .flex80 {
     flex: 0 0 79.5%
 }
 
+.flex85 {
+    flex: 0 0 84.5%
+}
+
 
 .flex90 {
     flex: 0 0 89.5%
+}
+
+.flex95 {
+    flex: 0 0 94.5%
 }
 
 

     border-radius: 5px;
 }
 
-.icon-btn{
+.icon-btn {
     padding: 5px;
     border-radius: 50%;
 }

     background-color: #aaa;
 }
 
-.close-btn{
+.close-btn {
     color: #d6def6;
 }
 

     background-color: #fff;
 }
 
-.tp-btn{
+.tp-btn {
     background-color: transparent;
     width: 15px;
     height: 15px;

869d590

d84816e

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


 
 .left-content,
 .right-content,
-.top-content,
-.bottom-content,
+.row,
 .content {
     padding: 15px;
     border-radius: 10px;

d84816e

client/resources/img/guideImg/align.png (Binary) (added)

+++ client/resources/img/guideImg/align.png

Binary file is not shown

d84816e

client/resources/img/guideImg/justify.png (Binary) (added)

+++ client/resources/img/guideImg/justify.png

Binary file is not shown

869d590

d84816e

client/views/layout/TopMenu.vue

--- client/views/layout/TopMenu.vue

+++ client/views/layout/TopMenu.vue


                         { path: "/horizontal.page", pathName: "수평 레이아웃" },
                     ],
                 },
+                {
+                    pathName: "가이드",
+                    subMenu: [
+                        { path: "/guide.page", pathName: "가이드" },
+                    ],
+                },
             ],
             currentRoute: null,
             showSubmenu: false

869d590

d84816e

client/views/pages/file/HostManagement.vue

--- client/views/pages/file/HostManagement.vue

+++ client/views/pages/file/HostManagement.vue


 <template>
     <div class="container horizontal">
-        <div class="top-content"></div>
-        <div class="bottom-content"></div>
+        <div class="row"></div>
+        <div class="row"></div>
     </div>
 </template>
 

869d590

d84816e

client/views/pages/schedule/ScheduleManagement.vue

--- client/views/pages/schedule/ScheduleManagement.vue

+++ client/views/pages/schedule/ScheduleManagement.vue


 <template>
     <div class="container horizontal">
-        <div class="top-content"></div>
-        <div class="bottom-content"></div>
+        <div class="row"></div>
+        <div class="row"></div>
     </div>
 </template>
 

869d590

d84816e

client/views/template/guide/TemplateGuide.vue

--- client/views/template/guide/TemplateGuide.vue

+++ client/views/template/guide/TemplateGuide.vue

...	...	@@ -1,25 +1,197 @@
1	1	<template>
2	2	<div>
3	3	<div class="content">
4		- <div class="content-titleZone">
5		- <p class="box-title">레이아웃</p>
6		- <p>레이아웃은 2가지 형태로 나뉘며 좌우 아님 상하로 나뉘어짐</p>
	4	+ <div class="row">
	5	+ <div class="content-titleZone">
	6	+ <p class="box-title">메인축 배치</p>
	7	+ </div>
	8	+ <table class="option-table">
	9	+ <colgroup>
	10	+ <col style="width:20%">
	11	+ <col style="width:80%">
	12	+ </colgroup>
	13	+ <tbody>
	14	+ <tr>
	15	+ <th>flex</th>
	16	+ <td>아이템들을 가로 방향으로 배치</td>
	17	+ </tr>
	18	+ <tr>
	19	+ <th>flex-column</th>
	20	+ <td>아이템들을 세로 방향으로 배치</td>
	21	+ </tr>
	22	+ </tbody>
	23	+ </table>
7	24	</div>
8		- <table class="option-table">
9		- <colgroup>
10		- <col>
11		- </colgroup>
12		- <tbody>
13		- <tr>
14		- <th>상하(수평레이아웃)</th>
15		- <td></td>
16		- </tr>
17		- <tr>
18		- <th>좌우(수직레이아웃)</th>
19		- <td></td>
20		- </tr>
21		- </tbody>
22		- </table>
	25	+ <div class="row">
	26	+ <div class="content-titleZone">
	27	+ <p class="box-title">메인축 방향 정렬</p>
	28	+ </div>
	29	+ <table class="option-table">
	30	+ <colgroup>
	31	+ <col style="width:20%">
	32	+ <col style="width:80%">
	33	+ </colgroup>
	34	+ <tbody>
	35	+ <tr>
	36	+ <th>justify-start</th>
	37	+ <td>아이템들을 시작점으로 정렬합니다.</td>
	38	+ </tr>
	39	+ <tr>
	40	+ <th>justify-center</th>
	41	+ <td>아이템들을 가운데로 정렬합니다.</td>
	42	+ </tr>
	43	+ <tr>
	44	+ <th>justify-between</th>
	45	+ <td>아이템들의 “사이(between)”에 균일한 간격으로 정렬합니다.</td>
	46	+ </tr>
	47	+ <tr>
	48	+ <th>justify-end </th>
	49	+ <td>아이템들을 끝점으로 정렬합니다.</td>
	50	+ </tr>
	51	+ </tbody>
	52	+ </table>
	53	+ <img src="../../../resources/img/guideImg/justify.png" alt="">
	54	+ </div>
	55	+ <div class="row">
	56	+ <div class="content-titleZone">
	57	+ <p class="box-title">수직축 방향 정렬</p>
	58	+ </div>
	59	+ <table class="option-table">
	60	+ <colgroup>
	61	+ <col style="width:20%">
	62	+ <col style="width:80%">
	63	+ </colgroup>
	64	+ <tbody>
	65	+ <tr>
	66	+ <th>align-start</th>
	67	+ <td>아이템들을 시작점으로 정렬합니다.</td>
	68	+ </tr>
	69	+ <tr>
	70	+ <th>align-center</th>
	71	+ <td>아이템들을 가운데로 정렬합니다.</td>
	72	+ </tr>
	73	+ <tr>
	74	+ <th>align-end</th>
	75	+ <td>아이템들을 끝점으로 정렬합니다.</td>
	76	+ </tr>
	77	+ </tbody>
	78	+ </table>
	79	+ <img src="../../../resources/img/guideImg/align.png" alt="">
	80	+ </div>
	81	+ <div class="row">
	82	+ <div class="content-titleZone">
	83	+ <p class="box-title">너비 비율</p>
	84	+ </div>
	85	+ <table class="option-table">
	86	+ <colgroup>
	87	+ <col style="width:20%">
	88	+ <col style="width:80%">
	89	+ </colgroup>
	90	+ <tbody>
	91	+ <tr>
	92	+ <th>flex5</th>
	93	+ <td>너비 4.5%</td>
	94	+ </tr>
	95	+ <tr>
	96	+ <th>flex10</th>
	97	+ <td>너비 9.5%</td>
	98	+ </tr>
	99	+ <tr>
	100	+ <th>flex15</th>
	101	+ <td>너비 14.5%</td>
	102	+ </tr>
	103	+ <tr>
	104	+ <th>flex20</th>
	105	+ <td>너비 19.5%</td>
	106	+ </tr>
	107	+ <tr>
	108	+ <th>flex25</th>
	109	+ <td>너비 24.5%</td>
	110	+ </tr>
	111	+ <tr>
	112	+ <th>flex30</th>
	113	+ <td>너비 29.5%</td>
	114	+ </tr>
	115	+ <tr>
	116	+ <th>flex35</th>
	117	+ <td>너비 34.5%</td>
	118	+ </tr>
	119	+ <tr>
	120	+ <th>flex40</th>
	121	+ <td>너비 39.5%</td>
	122	+ </tr>
	123	+ <tr>
	124	+ <th>flex45</th>
	125	+ <td>너비 44.5%</td>
	126	+ </tr>
	127	+ <tr>
	128	+ <th>flex50</th>
	129	+ <td>너비 49.5%</td>
	130	+ </tr>
	131	+ <tr>
	132	+ <th>flex55</th>
	133	+ <td>너비 54.5%</td>
	134	+ </tr>
	135	+ <tr>
	136	+ <th>flex60</th>
	137	+ <td>너비 59.5%</td>
	138	+ </tr>
	139	+ <tr>
	140	+ <th>flex65</th>
	141	+ <td>너비 64.5%</td>
	142	+ </tr>
	143	+ <tr>
	144	+ <th>flex70</th>
	145	+ <td>너비 69.5%</td>
	146	+ </tr>
	147	+ <tr>
	148	+ <th>flex75</th>
	149	+ <td>너비 74.5%</td>
	150	+ </tr>
	151	+ <tr>
	152	+ <th>flex80</th>
	153	+ <td>너비 79.5%</td>
	154	+ </tr>
	155	+ <tr>
	156	+ <th>flex85</th>
	157	+ <td>너비 84.5%</td>
	158	+ </tr>
	159	+ <tr>
	160	+ <th>flex90</th>
	161	+ <td>너비 89.5%</td>
	162	+ </tr>
	163	+ <tr>
	164	+ <th>flex95</th>
	165	+ <td>너비 94.5%</td>
	166	+ </tr>
	167	+ </tbody>
	168	+ </table>
	169	+ </div>
	170	+ <div class="row">
	171	+ <div class="content-titleZone">
	172	+ <p class="box-title">텍스트 정렬</p>
	173	+ </div>
	174	+ <table class="option-table">
	175	+ <colgroup>
	176	+ <col style="width:20%">
	177	+ <col style="width:80%">
	178	+ </colgroup>
	179	+ <tbody>
	180	+ <tr>
	181	+ <th>text-lf</th>
	182	+ <td>텍스트 왼쪽정렬</td>
	183	+ </tr>
	184	+ <tr>
	185	+ <th>text-ct</th>
	186	+ <td>텍스트 가운데정렬</td>
	187	+ </tr>
	188	+ <tr>
	189	+ <th>text-rg</th>
	190	+ <td>텍스트 오른쪽정렬</td>
	191	+ </tr>
	192	+ </tbody>
	193	+ </table>
	194	+ </div>
23	195	</div>
24	196	</div>
25	197	</template>

869d590

d84816e

client/views/template/layoutTemplate/Horizontal.vue

--- client/views/template/layoutTemplate/Horizontal.vue

+++ client/views/template/layoutTemplate/Horizontal.vue


             <PageNavigation />
         </div>
         <div class="content">
-            <div class="top-content">
+            <div class="row">
                 <div class="content-titleZone">
                     <p class="box-title">목록</p>
                 </div>

                 </div>
                 <PaginationButton />
             </div>
-            <div class="bottom-content form-box">
+            <div class="row form-box">
                 <div class="content-titleZone">
                     <p class="box-title">등록</p>
                 </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -69,13 +69,24 @@
69	69	flex: 0 0 29.5%
70	70	}
71	71
	72	+.flex35 {
	73	+ flex: 0 0 34.5%
	74	+}
72	75
73	76	.flex40 {
74	77	flex: 0 0 39.5%
75	78	}
76	79
	80	+.flex45 {
	81	+ flex: 0 0 44.5%
	82	+}
	83	+
77	84	.flex50 {
78	85	flex: 0 0 49.5%
	86	+}
	87	+
	88	+.flex55 {
	89	+ flex: 0 0 54.5%
79	90	}
80	91
81	92
...	...	@@ -83,18 +94,34 @@
83	94	flex: 0 0 59.5%
84	95	}
85	96
	97	+.flex65 {
	98	+ flex: 0 0 64.5%
	99	+}
	100	+
86	101
87	102	.flex70 {
88	103	flex: 0 0 69.5%
	104	+}
	105	+
	106	+.flex75 {
	107	+ flex: 0 0 74.5%
89	108	}
90	109
91	110	.flex80 {
92	111	flex: 0 0 79.5%
93	112	}
94	113
	114	+.flex85 {
	115	+ flex: 0 0 84.5%
	116	+}
	117	+
95	118
96	119	.flex90 {
97	120	flex: 0 0 89.5%
	121	+}
	122	+
	123	+.flex95 {
	124	+ flex: 0 0 94.5%
98	125	}
99	126
100	127
...	...	@@ -111,7 +138,7 @@
111	138	border-radius: 5px;
112	139	}
113	140
114		-.icon-btn{
	141	+.icon-btn {
115	142	padding: 5px;
116	143	border-radius: 50%;
117	144	}
...	...	@@ -133,7 +160,7 @@
133	160	background-color: #aaa;
134	161	}
135	162
136		-.close-btn{
	163	+.close-btn {
137	164	color: #d6def6;
138	165	}
139	166
...	...	@@ -216,7 +243,7 @@
216	243	background-color: #fff;
217	244	}
218	245
219		-.tp-btn{
	246	+.tp-btn {
220	247	background-color: transparent;
221	248	width: 15px;
222	249	height: 15px;

...	...	@@ -30,8 +30,7 @@
30	30
31	31	.left-content,
32	32	.right-content,
33		-.top-content,
34		-.bottom-content,
	33	+.row,
35	34	.content {
36	35	padding: 15px;
37	36	border-radius: 10px;

...	...	@@ -95,6 +95,12 @@
95	95	{ path: "/horizontal.page", pathName: "수평 레이아웃" },
96	96	],
97	97	},
	98	+ {
	99	+ pathName: "가이드",
	100	+ subMenu: [
	101	+ { path: "/guide.page", pathName: "가이드" },
	102	+ ],
	103	+ },
98	104	],
99	105	currentRoute: null,
100	106	showSubmenu: false

...	...	@@ -1,7 +1,7 @@
1	1	<template>
2	2	<div class="container horizontal">
3		- <div class="top-content"></div>
4		- <div class="bottom-content"></div>
	3	+ <div class="row"></div>
	4	+ <div class="row"></div>
5	5	</div>
6	6	</template>
7	7

...	...	@@ -5,7 +5,7 @@
5	5	<PageNavigation />
6	6	</div>
7	7	<div class="content">
8		- <div class="top-content">
	8	+ <div class="row">
9	9	<div class="content-titleZone">
10	10	<p class="box-title">목록</p>
11	11	</div>
...	...	@@ -146,7 +146,7 @@
146	146	</div>
147	147	<PaginationButton />
148	148	</div>
149		- <div class="bottom-content form-box">
	149	+ <div class="row form-box">
150	150	<div class="content-titleZone">
151	151	<p class="box-title">등록</p>
152	152	</div>

Delete comment