Commit @9ee97a3f9f497a2fdeb505da8155bf4e95266991

류윤주 01-12

240112 류윤주 공통 css 수정

@9ee97a3f9f497a2fdeb505da8155bf4e95266991

58d6698

9ee97a3

client/resources/css/common.css

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

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


 /* 정렬 */
 .flex {
     display: flex;
-    align-items: center;
-}
-
-.flex-start {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.flex-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.flex-between {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.flex-end {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-}
-
-.flex-contentBox {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
+    flex-wrap: wrap;
 }
 
 .flex-column {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     height: 100%;
+}
+
+
+.justify-start {
+    justify-content: flex-start;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.align-start {
+    align-items: flex-start;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.align-end {
+    align-items: flex-end;
 }
 
 
 
 /* 정렬 배율 */
 
-.flex10 {
-    flex: 0 0 9.2%
+.flex5 {
+    flex: 0 0 4.5%
 }
 
+.flex10 {
+    flex: 0 0 9.5%
+}
+
+.flex15 {
+    flex: 0 0 14.5%
+}
 
 .flex20 {
-    flex: 0 0 19.2%
+    flex: 0 0 19.5%
 }
 
+.flex25 {
+    flex: 0 0 24.5%
+}
 
 .flex30 {
-    flex: 0 0 29.2%
+    flex: 0 0 29.5%
 }
 
 
 .flex40 {
-    flex: 0 0 39.2%
+    flex: 0 0 39.5%
 }
 
 .flex50 {
-    flex: 0 0 39.2%
+    flex: 0 0 49.5%
 }
 
 
 .flex60 {
-    flex: 0 0 59.2%
+    flex: 0 0 59.5%
 }
 
 
 .flex70 {
-    flex: 0 0 69.2%
+    flex: 0 0 69.5%
 }
 
 .flex80 {
-    flex: 0 0 79.2%
+    flex: 0 0 79.5%
 }
 
 
 .flex90 {
-    flex: 0 0 89.2%
+    flex: 0 0 89.5%
 }
 
 

     position: relative;
 }
 
-.logout-btn::before{
+.logout-btn::before {
     content: "";
     width: 1px;
     height: 10px;

 
 
 
-/* box 공통 */
-.container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-}
 
-.content-box {
-    width: 100%;
-    height:100%;
-}
-
-.left-content,
-.right-content {
-    height: 100%;
-}
-
-.content{
-    width: 100%;
-    height: 100%;
-    margin-bottom: 30px;
-}
-
-.content:last-child{
-    margin-bottom: 0;
-}
-
-.left-content,
-.right-content,
-.top-content,
-.bottom-content,
-.content {
-    padding: 15px;
-    border-radius: 10px;
-    background-color: #fff;
-    position: relative;
-}
-
-.form-box{
-    background-color: #edf0ff;
-    border: 1px solid #dbe3fb;
-}
-
-/* title 공통 */
-.page-titleZone {
-    margin-bottom: 20px;
-}
-
-.main-title {
-    font-family: 'GmarketSansB';
-    font-size: 2rem;
-    color: #213f99;
-}
-
-.content-titleZone {
-    padding-bottom: 10px;
-    border-bottom: 1px solid #aaa;
-    margin-bottom: 15px;
-}
-
-.box-title {
-    font-size: 1.6rem;
-    font-weight: bold;
-}
-
-/* 테이블 공통 */
-.list-table {
-    border-bottom: 1px solid #aaa;
-}
-
-.list-table th,
-.list-table td {
-    text-align: center;
-    border-top: 1px solid #aaa;
-}
-
-.list-table thead tr {
-    background-color: #dbe3fb;
-    color: #213f99;
-}
-
-.list-table tbody tr:nth-child(even) {
-    background-color: #f4f6ff;
-}
-
-.form-table th {
-    color: #213f99;
-    text-align: center;
-}
-
-
-
-.option-table th{
+/* text 정렬 */
+.text-lf {
     text-align: left;
 }
 
-
-/* 서치바 공통 */
-/* .table-zone */
-.searchbar-zone{
-    margin-bottom: 10px;
-}
-/* 기본 서치바 */
-.search-square {
-    position: relative;
-    margin-left: 5px;
+.text-ct {
+    text-align: center;
 }
 
-.square-date,
-.square-select {
-    width: 150px;
-}
-
-.square-input {
-    color: #646464;
-    padding: 6px 10px;
-    border-radius: 5px;
-    width: 300px;
-    transition: all ease-in-out .5s;
-}
-
-.square-input:hover,
-.square-input:focus {
-    box-shadow: 0 0 1em #00000013;
-}
-
-.square-input:focus {
-    outline: none;
-    background-color: #f0eeee;
-}
-
-.square-input::-webkit-input-placeholder {
-    font-weight: 100;
-    color: #ccc;
-}
-
-.square-input:focus {
-    background-color: #f0eeee;
-}
-
-.square-button {
-    border: none;
-    margin-left: 0;
-    position: absolute;
-    right: 5px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.square-button:hover {
-    cursor: pointer;
-}
-
-.square-icon {
-    color: #b4b4b4;
-}
-
-/* 상세 서치바 */
-.option-searchbar{
-    width: 50%;
-    margin: 0 auto;
-    padding: 15px;
-    background-color: #f8f9fe;
-    border-radius: 10px;
-}
-
-
-/* 기타 공통 */
-.coupler {
-    font-size: 1.3rem;
-    margin-left: 5px;
+.text-rg {
+    text-align: right;
 }

58d6698

9ee97a3

client/resources/css/style.css

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

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

...	...	@@ -1,3 +1,194 @@
1	1	@charset "utf-8";
2	2
3		-/* */ (파일 끝에 줄바꿈 문자 없음)
	3	+/* box 공통 */
	4	+.container {
	5	+ width: 100%;
	6	+ display: flex;
	7	+ flex-direction: column;
	8	+ flex-grow: 1;
	9	+}
	10	+
	11	+.content-box {
	12	+ width: 100%;
	13	+ height: 100%;
	14	+}
	15	+
	16	+.left-content,
	17	+.right-content {
	18	+ height: 100%;
	19	+}
	20	+
	21	+.content {
	22	+ width: 100%;
	23	+ height: 100%;
	24	+ margin-bottom: 30px;
	25	+}
	26	+
	27	+.content:last-child {
	28	+ margin-bottom: 0;
	29	+}
	30	+
	31	+.left-content,
	32	+.right-content,
	33	+.top-content,
	34	+.bottom-content,
	35	+.content {
	36	+ padding: 15px;
	37	+ border-radius: 10px;
	38	+ background-color: #fff;
	39	+ position: relative;
	40	+}
	41	+
	42	+.form-box {
	43	+ background-color: #edf0ff;
	44	+ border: 1px solid #dbe3fb;
	45	+}
	46	+
	47	+/* title 공통 */
	48	+.page-titleZone {
	49	+ margin-bottom: 20px;
	50	+}
	51	+
	52	+.main-title {
	53	+ font-family: 'GmarketSansB';
	54	+ font-size: 2rem;
	55	+ color: #213f99;
	56	+}
	57	+
	58	+.content-titleZone {
	59	+ padding-bottom: 10px;
	60	+ border-bottom: 1px solid #aaa;
	61	+ margin-bottom: 15px;
	62	+}
	63	+
	64	+.box-title {
	65	+ font-size: 1.6rem;
	66	+ font-weight: bold;
	67	+}
	68	+
	69	+/* 테이블 공통 */
	70	+.list-table {
	71	+ border-bottom: 1px solid #aaa;
	72	+}
	73	+
	74	+.list-table th,
	75	+.list-table td {
	76	+ text-align: center;
	77	+ border-top: 1px solid #aaa;
	78	+}
	79	+
	80	+.list-table thead tr {
	81	+ background-color: #dbe3fb;
	82	+ color: #213f99;
	83	+}
	84	+
	85	+.list-table tbody tr:nth-child(even) {
	86	+ background-color: #f4f6ff;
	87	+}
	88	+
	89	+.form-table th {
	90	+ color: #213f99;
	91	+ text-align: center;
	92	+}
	93	+
	94	+
	95	+
	96	+.option-table th {
	97	+ text-align: left;
	98	+}
	99	+
	100	+
	101	+/* 서치바 공통 */
	102	+/* .table-zone */
	103	+.searchbar-zone {
	104	+ margin-bottom: 10px;
	105	+}
	106	+
	107	+/* 기본 서치바 */
	108	+.search-square {
	109	+ position: relative;
	110	+ margin-left: 5px;
	111	+}
	112	+
	113	+.square-date,
	114	+.square-select {
	115	+ width: 150px;
	116	+}
	117	+
	118	+.square-input {
	119	+ color: #646464;
	120	+ padding: 6px 10px;
	121	+ border-radius: 5px;
	122	+ width: 300px;
	123	+ transition: all ease-in-out .5s;
	124	+}
	125	+
	126	+.square-input:hover,
	127	+.square-input:focus {
	128	+ box-shadow: 0 0 1em #00000013;
	129	+}
	130	+
	131	+.square-input:focus {
	132	+ outline: none;
	133	+ background-color: #f0eeee;
	134	+}
	135	+
	136	+.square-input::-webkit-input-placeholder {
	137	+ font-weight: 100;
	138	+ color: #ccc;
	139	+}
	140	+
	141	+.square-input:focus {
	142	+ background-color: #f0eeee;
	143	+}
	144	+
	145	+.square-button {
	146	+ border: none;
	147	+ margin-left: 0;
	148	+ position: absolute;
	149	+ right: 5px;
	150	+ top: 50%;
	151	+ transform: translateY(-50%);
	152	+}
	153	+
	154	+.square-button:hover {
	155	+ cursor: pointer;
	156	+}
	157	+
	158	+.square-icon {
	159	+ color: #b4b4b4;
	160	+}
	161	+
	162	+/* 상세 서치바 */
	163	+.search-bottom{
	164	+ padding: 10px 0;
	165	+}
	166	+.option-searchbar {
	167	+ width: 50%;
	168	+ margin: 0 auto;
	169	+ padding: 15px;
	170	+ background-color: #f8f9fe;
	171	+ border-radius: 10px;
	172	+}
	173	+
	174	+/* 기타 공통 */
	175	+.coupler {
	176	+ font-size: 1.3rem;
	177	+ margin-left: 5px;
	178	+}
	179	+
	180	+.option-title {
	181	+ padding: 0 5px;
	182	+ font-size: 1.3rem;
	183	+ color: #213f99;
	184	+ margin-left: 5px;
	185	+}
	186	+
	187	+.count-zone {
	188	+ font-size: 1.3rem;
	189	+}
	190	+
	191	+.count-zone span{
	192	+ font-weight: 900;
	193	+ color: #213f99;
	194	+} (파일 끝에 줄바꿈 문자 없음)

58d6698

9ee97a3

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


                     <img src="../../resources/img/logo.png" alt="BI MANAGER LOGO">
                 </a>
             </div>
-            <div class="user-info flex-end">
+            <div class="user-info flex justify-end align-center">
                 <div class="sms">
                     <svg-icon type="mdi" :path="mdiEmail" color="#213f99"></svg-icon>
                 </div>
-                <div class="user flex">
+                <div class="user flex align-center">
                     <div class="user-img">
                         <svg-icon type="mdi" :path="mdiAccountCircle" color="#213f99"></svg-icon>
                     </div>

58d6698

9ee97a3

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import Login from "../pages/login/Login.vue";
 
 // 템플릿 
-import Searchbar from "../pages/template/Searchbar.vue";
-import Table from "../pages/template/Table.vue";
-import BtnPosition from "../pages/template/BtnPosition.vue";
-import Horizontal from "../pages/layoutTemplate/Horizontal.vue";
-import Vertical from "../pages/layoutTemplate/Vertical.vue";
+import Searchbar from "../template/templateElement/Searchbar.vue";
+import Table from "../template/templateElement/Table.vue";
+import BtnPosition from "../template/templateElement/BtnPosition.vue";
+import Horizontal from "../template/layoutTemplate/Horizontal.vue";
+import Vertical from "../template/layoutTemplate/Vertical.vue";
+import Guide from "../template/guide/TemplateGuide.vue";
 
 const routes = [
   /* 메인화면 */

   {path: "/btnPosition.page",name: "BtnPosition",component: BtnPosition,},
   {path: "/horizontal.page",name: "Horizontal",component: Horizontal,},
   {path: "/vertical.page",name: "Vertical",component: Vertical,},
+  {path: "/guide.page",name: "Guide",component: Guide,},
 ];
 
 const AppRouter = createRouter({

58d6698

client/views/pages/layoutTemplate/Vertical.vue (deleted)

--- client/views/pages/layoutTemplate/Vertical.vue

...	...	@@ -1,111 +0,0 @@
	1	-<template>
	2	- <div class="container">
	3	- <div class="page-titleZone flex-between">
	4	- <p class="main-title">페이지 제목을 적어주세요</p>
	5	- <PageNavigation />
	6	- </div>
	7	- <div class="content-box flex-contentBox">
	8	- <div class="left-content flex20">
	9	- <div class="content-titleZone flex-between">
	10	- <p class="box-title">폴더 리스트</p>
	11	- <button class="darkg-border-btn small-btn">폴더추가</button>
	12	- </div>
	13	- <div class="content-zone">
	14	-
	15	- </div>
	16	- </div>
	17	- <div class="right-content flex80">
	18	- <div class="searchbar-zone">
	19	- <div class="flex-end">
	20	- <input type="date" name="" id="" class="square-date">
	21	- <span class="coupler">~</span>
	22	- <input type="date" name="" id="" class="square-date">
	23	- <select name="" id="" class="square-select">
	24	- <option value="all">전체</option>
	25	- </select>
	26	- <div class="search-square">
	27	- <input type="text" class="square-input" placeholder="Search">
	28	- <button class="square-button">
	29	- <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	30	- </button>
	31	- </div>
	32	- </div>
	33	- </div>
	34	- <div class="flex-column">
	35	- <div class="table-zone">
	36	- <table class="list-table">
	37	- <colgroup>
	38	- <col style="width: ;">
	39	- <col style="width: ;">
	40	- <col style="width: ;">
	41	- <col style="width: ;">
	42	- </colgroup>
	43	- <thead>
	44	- <tr>
	45	- <th>No</th>
	46	- <th>user ID</th>
	47	- <th>이름</th>
	48	- <th>생년월일</th>
	49	- <th>성별</th>
	50	- </tr>
	51	- </thead>
	52	- <tbody>
	53	- <tr>
	54	- <td>1</td>
	55	- <td>test123</td>
	56	- <td>홍길동</td>
	57	- <td>1999.01.01</td>
	58	- <td>여</td>
	59	- </tr>
	60	-
	61	- </tbody>
	62	- </table>
	63	- </div>
	64	- <PaginationButton class="flex10"/>
	65	- </div>
	66	- </div>
	67	- </div>
	68	- </div>
	69	-</template>
	70	-
	71	-<script>
	72	-import PageNavigation from '../../component/PageNavigation.vue';
	73	-import PaginationButton from '../../component/PaginationButton.vue';
	74	-import FileTree from '../../component/FileTree.vue';
	75	-import SvgIcon from '@jamescoyle/vue-icon';
	76	-import { mdiMagnify } from '@mdi/js';
	77	-export default {
	78	- data() {
	79	- return {
	80	- searchPath: mdiMagnify
	81	- }
	82	- },
	83	- methods: {
	84	-
	85	- },
	86	- watch: {
	87	-
	88	- },
	89	- computed: {
	90	-
	91	- },
	92	- components: {
	93	- 'PageNavigation': PageNavigation,
	94	- 'FileTree': FileTree,
	95	- 'SvgIcon': SvgIcon,
	96	- 'PaginationButton': PaginationButton
	97	- },
	98	- mounted() {
	99	- console.log('main mounted');
	100	- }
	101	-}
	102	-</script>
	103	-
	104	-<style lang="css" scoped>
	105	-.content-zone {
	106	- border: 1px solid #eee;
	107	- padding: 10px;
	108	- height: calc(100% - 55px);
	109	- overflow: auto;
	110	-}
	111	-</style>(파일 끝에 줄바꿈 문자 없음)

58d6698

client/views/pages/template/DetailSearchBar.vue (deleted)

--- client/views/pages/template/DetailSearchBar.vue

...	...	@@ -1,173 +0,0 @@
	1	-<template>
	2	- <div class="search-bar">
	3	- <div class="option-searchbar">
	4	- <div class="search-top">
	5	- <div class="flex">
	6	- <input type="date" name="" id="" class="square-date">
	7	- <span class="coupler">~</span>
	8	- <input type="date" name="" id="" class="square-date">
	9	- <select name="" id="" class="square-select">
	10	- <option value="all">전체</option>
	11	- </select>
	12	- <div class="search-square">
	13	- <input type="text" class="square-input" placeholder="Search">
	14	- <button class="square-button">
	15	- <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	16	- </button>
	17	- </div>
	18	- </div>
	19	- </div>
	20	- <div class="search-bottom">
	21	- <table class="option-table">
	22	- <colgroup>
	23	- <col style="width: 10%;" />
	24	- </colgroup>
	25	- <tbody>
	26	- <tr>
	27	- <th>단일조건</th>
	28	- <td>
	29	- <div class="input-container flex">
	30	- <label class="radio-label">
	31	- <input type="radio" name="radio" checked="" class="custom-radiobox ">
	32	- <span>HTML</span>
	33	- </label>
	34	- <label class="radio-label">
	35	- <input type="radio" name="radio" class="custom-radiobox ">
	36	- <span>CSS</span>
	37	- </label>
	38	- <label class="radio-label">
	39	- <input type="radio" name="radio" class="custom-radiobox ">
	40	- <span>Javascript</span>
	41	- </label>
	42	- </div>
	43	- </td>
	44	- </tr>
	45	- <tr>
	46	- <th>다중조건</th>
	47	- <td>
	48	- <div class="input-container flex">
	49	- <label class="check-label">
	50	- <input type="checkbox" name="check" checked="" class="custom-checkbox ">
	51	- <span>HTML</span>
	52	- </label>
	53	- <label class="check-label">
	54	- <input type="checkbox" name="check" class="custom-checkbox ">
	55	- <span>CSS</span>
	56	- </label>
	57	- <label class="check-label">
	58	- <input type="checkbox" name="check" class="custom-checkbox ">
	59	- <span>Javascript</span>
	60	- </label>
	61	- </div>
	62	- </td>
	63	- </tr>
	64	- </tbody>
	65	- </table>
	66	- </div>
	67	- </div>
	68	- </div>
	69	-</template>
	70	-
	71	-<script>
	72	-import SvgIcon from '@jamescoyle/vue-icon';
	73	-import { mdiMagnify } from '@mdi/js';
	74	-export default {
	75	- data() {
	76	- return {
	77	- searchPath: mdiMagnify
	78	- }
	79	- },
	80	- methods: {
	81	-
	82	- },
	83	- watch: {
	84	-
	85	- },
	86	- computed: {
	87	-
	88	- },
	89	- components: {
	90	- 'SvgIcon': SvgIcon
	91	- },
	92	- mounted() {
	93	- console.log('main mounted');
	94	- }
	95	-}
	96	-</script>
	97	-
	98	-<style>
	99	-.search-top {
	100	- padding: 15px 0;
	101	- border-bottom: 1px solid #aaa;
	102	-}
	103	-
	104	-/* radio css */
	105	-.input-container label {
	106	- display: flex;
	107	- cursor: pointer;
	108	- font-weight: 500;
	109	- position: relative;
	110	- overflow: hidden;
	111	- margin-bottom: 3px;
	112	-}
	113	-
	114	-.input-container label input.custom-radiobox,
	115	-.input-container label input.custom-checkbox {
	116	- position: absolute;
	117	- left: -9999px;
	118	-}
	119	-
	120	-.input-container label input.custom-radiobox:checked+span {
	121	- background-color: #5b72b8;
	122	- color: #fff;
	123	-}
	124	-
	125	-.input-container label input.custom-checkbox:checked+span {
	126	- background-color: #f8bb59;
	127	- color: #fff;
	128	-}
	129	-
	130	-.input-container label input.custom-radiobox:checked+span:before {
	131	- box-shadow: inset 0 0 0 4px #213f99;
	132	-}
	133	-
	134	-.input-container label input.custom-checkbox:checked+span:before {
	135	- box-shadow: inset 0 0 0 4px #ff9d00;
	136	-}
	137	-
	138	-.input-container label span {
	139	- display: flex;
	140	- align-items: center;
	141	- padding: 3px 7px;
	142	- border-radius: 10px;
	143	- transition: 0.25s ease;
	144	- color: #333;
	145	-}
	146	-
	147	-
	148	-.input-container label.radio-label span:hover {
	149	- background-color: #d6d6e5;
	150	-}
	151	-
	152	-.input-container label.check-label span:hover {
	153	- background-color: #f4e3c2;
	154	-}
	155	-
	156	-.input-container label.radio-label span:before,
	157	-.input-container label.check-label span:before {
	158	- display: flex;
	159	- flex-shrink: 0;
	160	- content: "";
	161	- background-color: #fff;
	162	- width: 15px;
	163	- height: 15px;
	164	- border-radius: 50%;
	165	- margin-right: 3px;
	166	- transition: 0.25s ease;
	167	- box-shadow: inset 0 0 0 1px #333;
	168	-}
	169	-
	170	-.input-container label.check-label span:before {
	171	- border-radius: 0%;
	172	-}
	173	-</style>(파일 끝에 줄바꿈 문자 없음)

9ee97a3

client/views/template/guide/TemplateGuide.vue (added)

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

...	...	@@ -0,0 +1,49 @@
	1	+<template>
	2	+ <div>
	3	+ <div class="content">
	4	+ <div class="content-titleZone">
	5	+ <p class="box-title">레이아웃</p>
	6	+ <p>레이아웃은 2가지 형태로 나뉘며 좌우 아님 상하로 나뉘어짐</p>
	7	+ </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>
	23	+ </div>
	24	+ </div>
	25	+</template>
	26	+
	27	+<script>
	28	+
	29	+export default {
	30	+ data() {
	31	+ return {
	32	+ }
	33	+ },
	34	+ methods: {
	35	+
	36	+ },
	37	+ watch: {
	38	+
	39	+ },
	40	+ computed: {
	41	+
	42	+ },
	43	+ components: {
	44	+ },
	45	+ mounted() {
	46	+ console.log('main mounted');
	47	+ }
	48	+}
	49	+</script>(파일 끝에 줄바꿈 문자 없음)

58d6698

9ee97a3

client/views/template/layoutTemplate/Horizontal.vue (Renamed from client/views/pages/layoutTemplate/Horizontal.vue)

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

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


 <template>
     <div class="container">
-        <div class="page-titleZone flex-between">
+        <div class="page-titleZone flex justify-between">
             <p class="main-title">페이지 제목을 적어주세요</p>
             <PageNavigation />
         </div>

                     <p class="box-title">목록</p>
                 </div>
                 <div class="searchbar-zone">
-                    <div class="flex-end">
+                    <div class="flex justify-end align-center">
                         <span class="option-title">검증유형</span>
                         <select name="" id="" class="square-select">
                             <option value="all">전체</option>

                         </div>
                     </div>
                 </div>
-                <div class="flex-between">
-                    <div class="count-zone">
-                        <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
-                    </div>
-                    <div class="btn-zone flex">
-                        <button class="red-border-btn small-btn">선택 항목 삭제</button>
-                    </div>
-                </div>
                 <div class="table-zone">
+                    <div class="flex justify-between align-center">
+                        <div class="count-zone">
+                            <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
+                        </div>
+                        <div class="cunt-selectZone">
+                            <select name="" id="">
+                                <option value="">10개 보기</option>
+                                <option value="">20개 보기</option>
+                            </select>
+                        </div>
+                    </div>
                     <table class="list-table">
                         <colgroup>
                             <col style="width: ;">

                             </tr>
                         </tbody>
                     </table>
+                    <div class="flex justify-end">
+                        <button class="red-border-btn small-btn">선택항목 삭제</button>
+                    </div>
                 </div>
                 <PaginationButton />
             </div>

                             <tr>
                                 <th>생년월일</th>
                                 <td>
-                                    <div class="flex">
-                                        <select name="" id=""></select>
-                                        <select name="" id=""></select>
-                                        <select name="" id=""></select>
+                                    <div class="flex justify-between ">
+                                        <select name="" id="" class="flex30"></select>
+                                        <select name="" id="" class="flex30"></select>
+                                        <select name="" id="" class="flex30"></select>
                                     </div>
                                 </td>
                                 <th>성별</th>

                         </tbody>
                     </table>
                 </div>
-                <div class="flex-end">
+                <div class="flex justify-end">
                     <button class="blue-border-btn small-btn">등록</button>
                     <!-- 값이 있을때 수정 버튼으로 변경 -->
                     <!-- <button class="orange-border-btn small-btn">수정</button> -->

     data() {
         return {
             searchPath: mdiMagnify,
-            inputValue:null
+            inputValue: null
         }
     },
     methods: {

 }
 </script>
 
-<style scoped>
-.option-title {
-    padding: 0 5px;
-    font-size: 1.3rem;
-    color: #213f99;
-    margin-left: 5px;
-}
-
-.count-zone {
-    font-size: 1.3rem;
-}
-</style>
+<style scoped></style>

9ee97a3

client/views/template/layoutTemplate/Vertical.vue (added)

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

...	...	@@ -0,0 +1,165 @@
	1	+<template>
	2	+ <div class="container">
	3	+ <div class="page-titleZone flex justify-between">
	4	+ <p class="main-title">페이지 제목을 적어주세요</p>
	5	+ <PageNavigation />
	6	+ </div>
	7	+ <div class="content-box flex justify-between">
	8	+ <div class="left-content flex20">
	9	+ <div class="content-titleZone flex justify-between">
	10	+ <p class="box-title">폴더 리스트</p>
	11	+ <button class="darkg-border-btn small-btn">폴더추가</button>
	12	+ </div>
	13	+ <div class="content-zone">
	14	+
	15	+ </div>
	16	+ </div>
	17	+ <div class="right-content flex80">
	18	+ <div class="searchbar-zone">
	19	+ <div class="flex justify-end align-center">
	20	+ <input type="date" name="" id="" class="square-date">
	21	+ <span class="coupler">~</span>
	22	+ <input type="date" name="" id="" class="square-date">
	23	+ <select name="" id="" class="square-select">
	24	+ <option value="all">전체</option>
	25	+ </select>
	26	+ <div class="search-square">
	27	+ <input type="text" class="square-input" placeholder="Search">
	28	+ <button class="square-button">
	29	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	30	+ </button>
	31	+ </div>
	32	+ </div>
	33	+ </div>
	34	+ <div class="flex-column">
	35	+ <div class="table-zone">
	36	+ <table class="list-table">
	37	+ <colgroup>
	38	+ <col style="width: ;">
	39	+ <col style="width: ;">
	40	+ <col style="width: ;">
	41	+ <col style="width: ;">
	42	+ </colgroup>
	43	+ <thead>
	44	+ <tr>
	45	+ <th>No</th>
	46	+ <th>user ID</th>
	47	+ <th>이름</th>
	48	+ <th>생년월일</th>
	49	+ <th>성별</th>
	50	+ </tr>
	51	+ </thead>
	52	+ <tbody>
	53	+ <tr>
	54	+ <td>1</td>
	55	+ <td>test123</td>
	56	+ <td>홍길동</td>
	57	+ <td>1999.01.01</td>
	58	+ <td>여</td>
	59	+ </tr>
	60	+ <tr>
	61	+ <td>1</td>
	62	+ <td>test123</td>
	63	+ <td>홍길동</td>
	64	+ <td>1999.01.01</td>
	65	+ <td>여</td>
	66	+ </tr> <tr>
	67	+ <td>1</td>
	68	+ <td>test123</td>
	69	+ <td>홍길동</td>
	70	+ <td>1999.01.01</td>
	71	+ <td>여</td>
	72	+ </tr> <tr>
	73	+ <td>1</td>
	74	+ <td>test123</td>
	75	+ <td>홍길동</td>
	76	+ <td>1999.01.01</td>
	77	+ <td>여</td>
	78	+ </tr> <tr>
	79	+ <td>1</td>
	80	+ <td>test123</td>
	81	+ <td>홍길동</td>
	82	+ <td>1999.01.01</td>
	83	+ <td>여</td>
	84	+ </tr> <tr>
	85	+ <td>1</td>
	86	+ <td>test123</td>
	87	+ <td>홍길동</td>
	88	+ <td>1999.01.01</td>
	89	+ <td>여</td>
	90	+ </tr> <tr>
	91	+ <td>1</td>
	92	+ <td>test123</td>
	93	+ <td>홍길동</td>
	94	+ <td>1999.01.01</td>
	95	+ <td>여</td>
	96	+ </tr> <tr>
	97	+ <td>1</td>
	98	+ <td>test123</td>
	99	+ <td>홍길동</td>
	100	+ <td>1999.01.01</td>
	101	+ <td>여</td>
	102	+ </tr> <tr>
	103	+ <td>1</td>
	104	+ <td>test123</td>
	105	+ <td>홍길동</td>
	106	+ <td>1999.01.01</td>
	107	+ <td>여</td>
	108	+ </tr> <tr>
	109	+ <td>1</td>
	110	+ <td>test123</td>
	111	+ <td>홍길동</td>
	112	+ <td>1999.01.01</td>
	113	+ <td>여</td>
	114	+ </tr>
	115	+ </tbody>
	116	+ </table>
	117	+ </div>
	118	+ <PaginationButton />
	119	+ </div>
	120	+ </div>
	121	+ </div>
	122	+ </div>
	123	+</template>
	124	+
	125	+<script>
	126	+import PageNavigation from '../../component/PageNavigation.vue';
	127	+import PaginationButton from '../../component/PaginationButton.vue';
	128	+import FileTree from '../../component/FileTree.vue';
	129	+import SvgIcon from '@jamescoyle/vue-icon';
	130	+import { mdiMagnify } from '@mdi/js';
	131	+export default {
	132	+ data() {
	133	+ return {
	134	+ searchPath: mdiMagnify
	135	+ }
	136	+ },
	137	+ methods: {
	138	+
	139	+ },
	140	+ watch: {
	141	+
	142	+ },
	143	+ computed: {
	144	+
	145	+ },
	146	+ components: {
	147	+ 'PageNavigation': PageNavigation,
	148	+ 'FileTree': FileTree,
	149	+ 'SvgIcon': SvgIcon,
	150	+ 'PaginationButton': PaginationButton
	151	+ },
	152	+ mounted() {
	153	+ console.log('main mounted');
	154	+ }
	155	+}
	156	+</script>
	157	+
	158	+<style lang="css" scoped>
	159	+.content-zone {
	160	+ border: 1px solid #eee;
	161	+ padding: 10px;
	162	+ height: calc(100% - 55px);
	163	+ overflow: auto;
	164	+}
	165	+</style>(파일 끝에 줄바꿈 문자 없음)

58d6698

9ee97a3

client/views/template/templateElement/BtnPosition.vue (Renamed from client/views/pages/template/BtnPosition.vue)

--- client/views/pages/template/BtnPosition.vue

+++ client/views/template/templateElement/BtnPosition.vue

No changes

58d6698

9ee97a3

client/views/template/templateElement/DefaultSearchBar.vue (Renamed from client/views/pages/template/DefaultSearchBar.vue)

--- client/views/pages/template/DefaultSearchBar.vue

+++ client/views/template/templateElement/DefaultSearchBar.vue


 <template>
     <div class="search-bar">
-        <div class="flex-end">
+        <div class="flex justify-end align-center">
             <input type="date" name="" id="" class="square-date">
             <span class="coupler">~</span>
             <input type="date" name="" id="" class="square-date">

9ee97a3

client/views/template/templateElement/DetailSearchBar.vue (added)

+++ client/views/template/templateElement/DetailSearchBar.vue

...	...	@@ -0,0 +1,181 @@
	1	+<template>
	2	+ <div class="search-bar">
	3	+ <div class="option-searchbar">
	4	+ <div class="search-top flex justify-center">
	5	+ <div class="flex align-center">
	6	+ <input type="date" name="" id="" class="square-date">
	7	+ <span class="coupler">~</span>
	8	+ <input type="date" name="" id="" class="square-date">
	9	+ <select name="" id="" class="square-select">
	10	+ <option value="all">전체</option>
	11	+ </select>
	12	+ <div class="search-square">
	13	+ <input type="text" class="square-input" placeholder="Search">
	14	+ <button class="square-button">
	15	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	16	+ </button>
	17	+ </div>
	18	+ </div>
	19	+ </div>
	20	+ <div class="search-bottom">
	21	+ <div class="flex">
	22	+ <div class="flex flex30 align-center">
	23	+ <span class="option-title">단일조건</span>
	24	+ <div class="input-container flex">
	25	+ <label class="radio-label">
	26	+ <input type="radio" name="radio" checked="" class="custom-radiobox ">
	27	+ <span>HTML</span>
	28	+ </label>
	29	+ <label class="radio-label">
	30	+ <input type="radio" name="radio" class="custom-radiobox ">
	31	+ <span>CSS</span>
	32	+ </label>
	33	+ <label class="radio-label">
	34	+ <input type="radio" name="radio" class="custom-radiobox ">
	35	+ <span>Javascript</span>
	36	+ </label>
	37	+ </div>
	38	+ </div>
	39	+ <div class="flex flex30 align-center">
	40	+ <span class="option-title">다중조건</span>
	41	+ <div class="input-container flex">
	42	+ <label class="check-label">
	43	+ <input type="checkbox" name="check" checked="" class="custom-checkbox ">
	44	+ <span>HTML</span>
	45	+ </label>
	46	+ <label class="check-label">
	47	+ <input type="checkbox" name="check" class="custom-checkbox ">
	48	+ <span>CSS</span>
	49	+ </label>
	50	+ <label class="check-label">
	51	+ <input type="checkbox" name="check" class="custom-checkbox ">
	52	+ <span>Javascript</span>
	53	+ </label>
	54	+ </div>
	55	+ </div>
	56	+ <div class="flex flex30 align-center">
	57	+ <span class="option-title">다중조건</span>
	58	+ <div class="input-container flex">
	59	+ <label class="radio-label">
	60	+ <input type="radio" name="radio" checked="" class="custom-radiobox ">
	61	+ <span>HTML</span>
	62	+ </label>
	63	+ <label class="radio-label">
	64	+ <input type="radio" name="radio" class="custom-radiobox ">
	65	+ <span>CSS</span>
	66	+ </label>
	67	+ <label class="radio-label">
	68	+ <input type="radio" name="radio" class="custom-radiobox ">
	69	+ <span>Javascript</span>
	70	+ </label>
	71	+ </div>
	72	+ </div>
	73	+ </div>
	74	+ </div>
	75	+ </div>
	76	+ </div>
	77	+</template>
	78	+
	79	+<script>
	80	+import SvgIcon from '@jamescoyle/vue-icon';
	81	+import { mdiMagnify } from '@mdi/js';
	82	+export default {
	83	+ data() {
	84	+ return {
	85	+ searchPath: mdiMagnify
	86	+ }
	87	+ },
	88	+ methods: {
	89	+
	90	+ },
	91	+ watch: {
	92	+
	93	+ },
	94	+ computed: {
	95	+
	96	+ },
	97	+ components: {
	98	+ 'SvgIcon': SvgIcon
	99	+ },
	100	+ mounted() {
	101	+ console.log('main mounted');
	102	+ }
	103	+}
	104	+</script>
	105	+
	106	+<style>
	107	+.search-top {
	108	+ padding: 15px 0;
	109	+ border-bottom: 1px solid #aaa;
	110	+}
	111	+
	112	+/* radio css */
	113	+.input-container label {
	114	+ display: flex;
	115	+ cursor: pointer;
	116	+ font-weight: 500;
	117	+ position: relative;
	118	+ overflow: hidden;
	119	+ margin-bottom: 3px;
	120	+}
	121	+
	122	+.input-container label input.custom-radiobox,
	123	+.input-container label input.custom-checkbox {
	124	+ position: absolute;
	125	+ left: -9999px;
	126	+}
	127	+
	128	+.input-container label input.custom-radiobox:checked+span {
	129	+ background-color: #5b72b8;
	130	+ color: #fff;
	131	+}
	132	+
	133	+.input-container label input.custom-checkbox:checked+span {
	134	+ background-color: #f8bb59;
	135	+ color: #fff;
	136	+}
	137	+
	138	+.input-container label input.custom-radiobox:checked+span:before {
	139	+ box-shadow: inset 0 0 0 4px #213f99;
	140	+}
	141	+
	142	+.input-container label input.custom-checkbox:checked+span:before {
	143	+ box-shadow: inset 0 0 0 4px #ff9d00;
	144	+}
	145	+
	146	+.input-container label span {
	147	+ display: flex;
	148	+ align-items: center;
	149	+ padding: 3px 7px;
	150	+ border-radius: 10px;
	151	+ transition: 0.25s ease;
	152	+ color: #333;
	153	+}
	154	+
	155	+
	156	+.input-container label.radio-label span:hover {
	157	+ background-color: #d6d6e5;
	158	+}
	159	+
	160	+.input-container label.check-label span:hover {
	161	+ background-color: #f4e3c2;
	162	+}
	163	+
	164	+.input-container label.radio-label span:before,
	165	+.input-container label.check-label span:before {
	166	+ display: flex;
	167	+ flex-shrink: 0;
	168	+ content: "";
	169	+ background-color: #fff;
	170	+ width: 15px;
	171	+ height: 15px;
	172	+ border-radius: 50%;
	173	+ margin-right: 3px;
	174	+ transition: 0.25s ease;
	175	+ box-shadow: inset 0 0 0 1px #333;
	176	+}
	177	+
	178	+.input-container label.check-label span:before {
	179	+ border-radius: 0%;
	180	+}
	181	+</style>(파일 끝에 줄바꿈 문자 없음)

58d6698

9ee97a3

client/views/template/templateElement/FormTable.vue (Renamed from client/views/pages/template/FormTable.vue)

--- client/views/pages/template/FormTable.vue

+++ client/views/template/templateElement/FormTable.vue


                 <tr>
                     <th>생년월일</th>
                     <td>
-                        <div class="flex">
-                            <select name="" id=""></select>
-                            <select name="" id=""></select>
-                            <select name="" id=""></select>
+                        <div class="flex justify-between">
+                            <select name="" id="" class="flex30"></select>
+                            <select name="" id="" class="flex30"></select>
+                            <select name="" id="" class="flex30"></select>
                         </div>
                     </td>
                     <th>성별</th>

58d6698

9ee97a3

client/views/template/templateElement/ListTable.vue (Renamed from client/views/pages/template/ListTable.vue)

--- client/views/pages/template/ListTable.vue

+++ client/views/template/templateElement/ListTable.vue


 <template>
     <div class="table-zone">
+        <div class="flex justify-between align-center">
+            <div class="count-zone">
+                <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
+            </div>
+            <div class="cunt-selectZone">
+                <select name="" id="">
+                    <option value="">10개 보기</option>
+                    <option value="">20개 보기</option>
+                </select>
+            </div>
+        </div>
         <table class="list-table">
             <colgroup>
                 <col style="width: ;">

58d6698

9ee97a3

client/views/template/templateElement/Searchbar.vue (Renamed from client/views/pages/template/Searchbar.vue)

--- client/views/pages/template/Searchbar.vue

+++ client/views/template/templateElement/Searchbar.vue

No changes

58d6698

9ee97a3

client/views/template/templateElement/Table.vue (Renamed from client/views/pages/template/Table.vue)

--- client/views/pages/template/Table.vue

+++ client/views/template/templateElement/Table.vue

No changes

Add a comment

Open 0
Closed 0

List

...	...	@@ -3,91 +3,98 @@
3	3	/* 정렬 */
4	4	.flex {
5	5	display: flex;
6		- align-items: center;
7		-}
8		-
9		-.flex-start {
10		- display: flex;
11		- justify-content: flex-start;
12		- align-items: center;
13		-}
14		-
15		-.flex-center {
16		- display: flex;
17		- justify-content: center;
18		- align-items: center;
19		-}
20		-
21		-.flex-between {
22		- display: flex;
23		- justify-content: space-between;
24		- align-items: center;
25		-}
26		-
27		-.flex-end {
28		- display: flex;
29		- justify-content: flex-end;
30		- align-items: center;
31		-
32		-}
33		-
34		-.flex-contentBox {
35		- display: flex;
36		- justify-content: space-between;
37		- align-items: flex-start;
	6	+ flex-wrap: wrap;
38	7	}
39	8
40	9	.flex-column {
41	10	display: flex;
42	11	flex-direction: column;
43		- justify-content: space-between;
44	12	height: 100%;
	13	+}
	14	+
	15	+
	16	+.justify-start {
	17	+ justify-content: flex-start;
	18	+}
	19	+
	20	+.justify-center {
	21	+ justify-content: center;
	22	+}
	23	+
	24	+.justify-between {
	25	+ justify-content: space-between;
	26	+}
	27	+
	28	+.justify-end {
	29	+ justify-content: flex-end;
	30	+}
	31	+
	32	+.align-start {
	33	+ align-items: flex-start;
	34	+}
	35	+
	36	+.align-center {
	37	+ align-items: center;
	38	+}
	39	+
	40	+.align-end {
	41	+ align-items: flex-end;
45	42	}
46	43
47	44
48	45
49	46	/* 정렬 배율 */
50	47
51		-.flex10 {
52		- flex: 0 0 9.2%
	48	+.flex5 {
	49	+ flex: 0 0 4.5%
53	50	}
54	51
	52	+.flex10 {
	53	+ flex: 0 0 9.5%
	54	+}
	55	+
	56	+.flex15 {
	57	+ flex: 0 0 14.5%
	58	+}
55	59
56	60	.flex20 {
57		- flex: 0 0 19.2%
	61	+ flex: 0 0 19.5%
58	62	}
59	63
	64	+.flex25 {
	65	+ flex: 0 0 24.5%
	66	+}
60	67
61	68	.flex30 {
62		- flex: 0 0 29.2%
	69	+ flex: 0 0 29.5%
63	70	}
64	71
65	72
66	73	.flex40 {
67		- flex: 0 0 39.2%
	74	+ flex: 0 0 39.5%
68	75	}
69	76
70	77	.flex50 {
71		- flex: 0 0 39.2%
	78	+ flex: 0 0 49.5%
72	79	}
73	80
74	81
75	82	.flex60 {
76		- flex: 0 0 59.2%
	83	+ flex: 0 0 59.5%
77	84	}
78	85
79	86
80	87	.flex70 {
81		- flex: 0 0 69.2%
	88	+ flex: 0 0 69.5%
82	89	}
83	90
84	91	.flex80 {
85		- flex: 0 0 79.2%
	92	+ flex: 0 0 79.5%
86	93	}
87	94
88	95
89	96	.flex90 {
90		- flex: 0 0 89.2%
	97	+ flex: 0 0 89.5%
91	98	}
92	99
93	100
...	...	@@ -110,7 +117,7 @@
110	117	position: relative;
111	118	}
112	119
113		-.logout-btn::before{
	120	+.logout-btn::before {
114	121	content: "";
115	122	width: 1px;
116	123	height: 10px;
...	...	@@ -202,176 +209,16 @@
202	209
203	210
204	211
205		-/* box 공통 */
206		-.container {
207		- width: 100%;
208		- display: flex;
209		- flex-direction: column;
210		- flex-grow: 1;
211		-}
212	212
213		-.content-box {
214		- width: 100%;
215		- height:100%;
216		-}
217		-
218		-.left-content,
219		-.right-content {
220		- height: 100%;
221		-}
222		-
223		-.content{
224		- width: 100%;
225		- height: 100%;
226		- margin-bottom: 30px;
227		-}
228		-
229		-.content:last-child{
230		- margin-bottom: 0;
231		-}
232		-
233		-.left-content,
234		-.right-content,
235		-.top-content,
236		-.bottom-content,
237		-.content {
238		- padding: 15px;
239		- border-radius: 10px;
240		- background-color: #fff;
241		- position: relative;
242		-}
243		-
244		-.form-box{
245		- background-color: #edf0ff;
246		- border: 1px solid #dbe3fb;
247		-}
248		-
249		-/* title 공통 */
250		-.page-titleZone {
251		- margin-bottom: 20px;
252		-}
253		-
254		-.main-title {
255		- font-family: 'GmarketSansB';
256		- font-size: 2rem;
257		- color: #213f99;
258		-}
259		-
260		-.content-titleZone {
261		- padding-bottom: 10px;
262		- border-bottom: 1px solid #aaa;
263		- margin-bottom: 15px;
264		-}
265		-
266		-.box-title {
267		- font-size: 1.6rem;
268		- font-weight: bold;
269		-}
270		-
271		-/* 테이블 공통 */
272		-.list-table {
273		- border-bottom: 1px solid #aaa;
274		-}
275		-
276		-.list-table th,
277		-.list-table td {
278		- text-align: center;
279		- border-top: 1px solid #aaa;
280		-}
281		-
282		-.list-table thead tr {
283		- background-color: #dbe3fb;
284		- color: #213f99;
285		-}
286		-
287		-.list-table tbody tr:nth-child(even) {
288		- background-color: #f4f6ff;
289		-}
290		-
291		-.form-table th {
292		- color: #213f99;
293		- text-align: center;
294		-}
295		-
296		-
297		-
298		-.option-table th{
	213	+/* text 정렬 */
	214	+.text-lf {
299	215	text-align: left;
300	216	}
301	217
302		-
303		-/* 서치바 공통 */
304		-/* .table-zone */
305		-.searchbar-zone{
306		- margin-bottom: 10px;
307		-}
308		-/* 기본 서치바 */
309		-.search-square {
310		- position: relative;
311		- margin-left: 5px;
	218	+.text-ct {
	219	+ text-align: center;
312	220	}
313	221
314		-.square-date,
315		-.square-select {
316		- width: 150px;
317		-}
318		-
319		-.square-input {
320		- color: #646464;
321		- padding: 6px 10px;
322		- border-radius: 5px;
323		- width: 300px;
324		- transition: all ease-in-out .5s;
325		-}
326		-
327		-.square-input:hover,
328		-.square-input:focus {
329		- box-shadow: 0 0 1em #00000013;
330		-}
331		-
332		-.square-input:focus {
333		- outline: none;
334		- background-color: #f0eeee;
335		-}
336		-
337		-.square-input::-webkit-input-placeholder {
338		- font-weight: 100;
339		- color: #ccc;
340		-}
341		-
342		-.square-input:focus {
343		- background-color: #f0eeee;
344		-}
345		-
346		-.square-button {
347		- border: none;
348		- margin-left: 0;
349		- position: absolute;
350		- right: 5px;
351		- top: 50%;
352		- transform: translateY(-50%);
353		-}
354		-
355		-.square-button:hover {
356		- cursor: pointer;
357		-}
358		-
359		-.square-icon {
360		- color: #b4b4b4;
361		-}
362		-
363		-/* 상세 서치바 */
364		-.option-searchbar{
365		- width: 50%;
366		- margin: 0 auto;
367		- padding: 15px;
368		- background-color: #f8f9fe;
369		- border-radius: 10px;
370		-}
371		-
372		-
373		-/* 기타 공통 */
374		-.coupler {
375		- font-size: 1.3rem;
376		- margin-left: 5px;
	222	+.text-rg {
	223	+ text-align: right;
377	224	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -8,11 +8,12 @@
8	8	import Login from "../pages/login/Login.vue";
9	9
10	10	// 템플릿
11		-import Searchbar from "../pages/template/Searchbar.vue";
12		-import Table from "../pages/template/Table.vue";
13		-import BtnPosition from "../pages/template/BtnPosition.vue";
14		-import Horizontal from "../pages/layoutTemplate/Horizontal.vue";
15		-import Vertical from "../pages/layoutTemplate/Vertical.vue";
	11	+import Searchbar from "../template/templateElement/Searchbar.vue";
	12	+import Table from "../template/templateElement/Table.vue";
	13	+import BtnPosition from "../template/templateElement/BtnPosition.vue";
	14	+import Horizontal from "../template/layoutTemplate/Horizontal.vue";
	15	+import Vertical from "../template/layoutTemplate/Vertical.vue";
	16	+import Guide from "../template/guide/TemplateGuide.vue";
16	17
17	18	const routes = [
18	19	/* 메인화면 */
...	...	@@ -30,6 +31,7 @@
30	31	{path: "/btnPosition.page",name: "BtnPosition",component: BtnPosition,},
31	32	{path: "/horizontal.page",name: "Horizontal",component: Horizontal,},
32	33	{path: "/vertical.page",name: "Vertical",component: Vertical,},
	34	+ {path: "/guide.page",name: "Guide",component: Guide,},
33	35	];
34	36
35	37	const AppRouter = createRouter({

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div class="container">
3		- <div class="page-titleZone flex-between">
	3	+ <div class="page-titleZone flex justify-between">
4	4	<p class="main-title">페이지 제목을 적어주세요</p>
5	5	<PageNavigation />
6	6	</div>
...	...	@@ -10,7 +10,7 @@
10	10	<p class="box-title">목록</p>
11	11	</div>
12	12	<div class="searchbar-zone">
13		- <div class="flex-end">
	13	+ <div class="flex justify-end align-center">
14	14	<span class="option-title">검증유형</span>
15	15	<select name="" id="" class="square-select">
16	16	<option value="all">전체</option>
...	...	@@ -27,15 +27,18 @@
27	27	</div>
28	28	</div>
29	29	</div>
30		- <div class="flex-between">
31		- <div class="count-zone">
32		- <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
33		- </div>
34		- <div class="btn-zone flex">
35		- <button class="red-border-btn small-btn">선택 항목 삭제</button>
36		- </div>
37		- </div>
38	30	<div class="table-zone">
	31	+ <div class="flex justify-between align-center">
	32	+ <div class="count-zone">
	33	+ <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
	34	+ </div>
	35	+ <div class="cunt-selectZone">
	36	+ <select name="" id="">
	37	+ <option value="">10개 보기</option>
	38	+ <option value="">20개 보기</option>
	39	+ </select>
	40	+ </div>
	41	+ </div>
39	42	<table class="list-table">
40	43	<colgroup>
41	44	<col style="width: ;">
...	...	@@ -137,6 +140,9 @@
137	140	</tr>
138	141	</tbody>
139	142	</table>
	143	+ <div class="flex justify-end">
	144	+ <button class="red-border-btn small-btn">선택항목 삭제</button>
	145	+ </div>
140	146	</div>
141	147	<PaginationButton />
142	148	</div>
...	...	@@ -162,10 +168,10 @@
162	168	<tr>
163	169	<th>생년월일</th>
164	170	<td>
165		- <div class="flex">
166		- <select name="" id=""></select>
167		- <select name="" id=""></select>
168		- <select name="" id=""></select>
	171	+ <div class="flex justify-between ">
	172	+ <select name="" id="" class="flex30"></select>
	173	+ <select name="" id="" class="flex30"></select>
	174	+ <select name="" id="" class="flex30"></select>
169	175	</div>
170	176	</td>
171	177	<th>성별</th>
...	...	@@ -176,7 +182,7 @@
176	182	</tbody>
177	183	</table>
178	184	</div>
179		- <div class="flex-end">
	185	+ <div class="flex justify-end">
180	186	<button class="blue-border-btn small-btn">등록</button>
181	187	<!-- 값이 있을때 수정 버튼으로 변경 -->
182	188	<!-- <button class="orange-border-btn small-btn">수정</button> -->
...	...	@@ -196,7 +202,7 @@
196	202	data() {
197	203	return {
198	204	searchPath: mdiMagnify,
199		- inputValue:null
	205	+ inputValue: null
200	206	}
201	207	},
202	208	methods: {
...	...	@@ -219,15 +225,4 @@
219	225	}
220	226	</script>
221	227
222		-<style scoped>
223		-.option-title {
224		- padding: 0 5px;
225		- font-size: 1.3rem;
226		- color: #213f99;
227		- margin-left: 5px;
228		-}
229		-
230		-.count-zone {
231		- font-size: 1.3rem;
232		-}
233		-</style> (파일 끝에 줄바꿈 문자 없음)
	228	+<style scoped></style> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div class="search-bar">
3		- <div class="flex-end">
	3	+ <div class="flex justify-end align-center">
4	4	<input type="date" name="" id="" class="square-date">
5	5	<span class="coupler">~</span>
6	6	<input type="date" name="" id="" class="square-date">

...	...	@@ -17,10 +17,10 @@
17	17	<tr>
18	18	<th>생년월일</th>
19	19	<td>
20		- <div class="flex">
21		- <select name="" id=""></select>
22		- <select name="" id=""></select>
23		- <select name="" id=""></select>
	20	+ <div class="flex justify-between">
	21	+ <select name="" id="" class="flex30"></select>
	22	+ <select name="" id="" class="flex30"></select>
	23	+ <select name="" id="" class="flex30"></select>
24	24	</div>
25	25	</td>
26	26	<th>성별</th>

...	...	@@ -1,5 +1,16 @@
1	1	<template>
2	2	<div class="table-zone">
	3	+ <div class="flex justify-between align-center">
	4	+ <div class="count-zone">
	5	+ <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
	6	+ </div>
	7	+ <div class="cunt-selectZone">
	8	+ <select name="" id="">
	9	+ <option value="">10개 보기</option>
	10	+ <option value="">20개 보기</option>
	11	+ </select>
	12	+ </div>
	13	+ </div>
3	14	<table class="list-table">
4	15	<colgroup>
5	16	<col style="width: ;">

Delete comment