From 41ea9fcb94a17195209dd884c3b6d04ba97cf826 Mon Sep 17 00:00:00 2001
From: psy <pak1427@gmail.com>
Date: Wed, 23 Mar 2022 09:42:24 +0900
Subject: [PATCH] =?UTF-8?q?2022.03.23=20=EB=B0=95=EC=86=8C=EC=98=81=20?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B8=EB=94=94=EC=9E=90=EC=9D=B8=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/webapp/WEB-INF/jsp/index.jsp         |  74 ++++++-----
 src/main/webapp/WEB-INF/jsp/nav.jsp           |   1 +
 .../resource/css/file-drag-and-drop.css       |  22 +++-
 src/main/webapp/resource/css/images/arrow.png | Bin 0 -> 321 bytes
 src/main/webapp/resource/css/images/logo.png  | Bin 0 -> 1104 bytes
 .../webapp/resource/css/images/uploadFile.png | Bin 0 -> 519 bytes
 src/main/webapp/resource/css/style.css        | 124 +++++++++++++++++-
 7 files changed, 178 insertions(+), 43 deletions(-)
 create mode 100644 src/main/webapp/resource/css/images/arrow.png
 create mode 100644 src/main/webapp/resource/css/images/logo.png
 create mode 100644 src/main/webapp/resource/css/images/uploadFile.png

diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index 354d045..6758456 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -209,7 +209,7 @@ let findData = ()=>{
 	div.content{
 		margin: 10px;
 	}
-	button {
+/*	button {
 		height:27px;
 		padding: 10px 15px 30px 15px;
 		margin: 10px;
@@ -223,7 +223,7 @@ let findData = ()=>{
 		border-color: #6a5a64;
 		text-shadow: none;
 		box-shadow: none;
-	}
+	}*/
 
 </style>
 
@@ -235,45 +235,49 @@ let findData = ()=>{
 		</div>
 
 		<div class="app-item article">
-			<div class="app-container" style="align-items: center">
-				<h1>CI 변환</h1>
-				<details>
-					<summary>메뉴 세부정보</summary>
-					<ul>
-						<li>주민번호에 대한 CI 값을 취득 합니다.</li>
-						<li>첨부파일은 엑셀문서(xls,xlsx)만 가능 합니다.</li>
-						<li>첨부파일의 시트에는 `A열:성명, B:주민번호` 가 작성되어 있어야 합니다.</li>
-						<span style="font-weight: bold;">[첨부파일 작성방법]</span>
-						<ul>
-							<li>1행: 컬럼명(A열:성명, B열:주민번호)</li>
-							<li>2~xxx행: 데이터</li>
+			<div class="box_group">
+				<div class="app-container" style="align-items: center; display: block;">
+					<h1>CI 변환</h1>
+					<details>
+						<summary>메뉴 세부정보</summary>
+						<ul class="box">
+							<li>주민번호에 대한 CI 값을 취득 합니다.</li>
+							<li>첨부파일은 엑셀문서(xls,xlsx)만 가능 합니다.</li>
+							<li>첨부파일의 시트에는 `A열:성명, B:주민번호` 가 작성되어 있어야 합니다.</li>
+							<span style="font-weight: bold;">[첨부파일 작성방법]</span>
+							<ul>
+								<li>1행: 컬럼명(A열:성명, B열:주민번호)</li>
+								<li>2~xxx행: 데이터</li>
+							</ul>
 						</ul>
-					</ul>
-				</details>
-			</div>
-			<div class="content">
+					</details>
+				</div>
+				<div class="content">
 				<span>
-					<input type="button" value="파일 첨부하기" onclick="document.querySelector('#lbFile').click(); return false;"/>
+					<input type="button" value="파일 첨부하기"
+						   onclick="document.querySelector('#lbFile').click(); return false;"/>
 					<label id="lbFile" for="fExcel">선택된 파일이 없습니다</label>
 				</span>
-				<input type="file" id="fExcel" name="fExcel" style="display: none;"/>
-				<div class="file-drag-and-drop">
-					<p>첨부파일(xls,xlsx)을 이곳에 올려주세요</p>
+					<input type="file" id="fExcel" name="fExcel" style="display: none;"/>
+					<div class="file-drag-and-drop">
+						<p>첨부파일(xls,xlsx)을 이곳에 올려주세요</p>
+					</div>
+					<!-- 		<h1>Header 정보 보기</h1> -->
+					<!-- 		<div id="displayHeaders"></div> -->
+					<!-- 		<h1>JSON 형태로 보기</h1> -->
+					<!-- 		<div id="displayExcelJson"></div> -->
+					<!-- 		<h1>CSV 형태로 보기</h1> -->
+					<!-- 		<div id="displayExcelCsv"></div> -->
+					<!-- 		<h1>HTML 형태로 보기</h1> -->
+					<!-- 		<div id="displayExcelHtml"></div> -->
+				</div>
+				<div>
+					<button id="findBtn">
+						<span>CI 변환 실행</span>
+					</button>
 				</div>
-		<!-- 		<h1>Header 정보 보기</h1> -->
-		<!-- 		<div id="displayHeaders"></div> -->
-		<!-- 		<h1>JSON 형태로 보기</h1> -->
-		<!-- 		<div id="displayExcelJson"></div> -->
-		<!-- 		<h1>CSV 형태로 보기</h1> -->
-		<!-- 		<div id="displayExcelCsv"></div> -->
-		<!-- 		<h1>HTML 형태로 보기</h1> -->
-		<!-- 		<div id="displayExcelHtml"></div> -->
-			</div>
-			<div>
-				<button id="findBtn">
-					<span>CI 변환 실행</span>
-				</button>
 			</div>
+			<%--box_group 종료--%>
 
 			<div id="grid" class="tuigrid"></div>
 		</div>
diff --git a/src/main/webapp/WEB-INF/jsp/nav.jsp b/src/main/webapp/WEB-INF/jsp/nav.jsp
index 43b585a..ee796bd 100644
--- a/src/main/webapp/WEB-INF/jsp/nav.jsp
+++ b/src/main/webapp/WEB-INF/jsp/nav.jsp
@@ -13,6 +13,7 @@
 
 <div>
     <ul class="nav">
+        <a href="/"><li class="logo"></li></a>
         <li class="dp1">
             <a href="/">CI 변환</a>
         </li>
diff --git a/src/main/webapp/resource/css/file-drag-and-drop.css b/src/main/webapp/resource/css/file-drag-and-drop.css
index ef4506d..6b52f7d 100644
--- a/src/main/webapp/resource/css/file-drag-and-drop.css
+++ b/src/main/webapp/resource/css/file-drag-and-drop.css
@@ -1,12 +1,13 @@
 
 .file-drag-and-drop{
-    outline: 2px dashed #92b0b3 ;
-    outline-offset:-10px;
+    outline: 2px dashed #c1c1c1 ;
+    outline-offset:-1px;
     text-align: center;
     transition: all .15s ease-in-out;
     width: 350px;
-    height: 100px;
-    background-color: #cccccc;
+    height: 150px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
 
     display: flex;
     flex-direction: row;
@@ -14,5 +15,18 @@
     justify-content: center;
     align-content: center;
     flex-wrap: wrap;
+
+    background-image: url("./images/uploadFile.png");
+    background-size: 20px;
+    background-repeat: no-repeat;
+    background-position: center 43px;
+}
+
+.file-drag-and-drop p{
+    padding-top: 32px;
+    font-family: 'Noto Sans KR', sans-serif;
+    font-weight: 500;
+    font-size: 15px;
+    color: #898989;
 }
 
diff --git a/src/main/webapp/resource/css/images/arrow.png b/src/main/webapp/resource/css/images/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0e2361939f042dd129b8680d5fdffa30fa20aa0
GIT binary patch
literal 321
zcmeAS@N?(olHy`uVBq!ia0vp^x**KK1|+Sd9?b$$oCO|{#S9GGLLkg|>2BR0px|du
z7srr@*0(b+@-{gLxVTGS5PIR@y@2JdgY`i^okk&@gM3?9-Y{reY(9CnUGC2bBg;vZ
zC;#Pee7_N+P`t*8V@9J^82^Kpb=8y0)&>7q_BHNs^`&SA*@m<J|9KXiUH5PD*5!r`
ze;YOgrp|3zqUkZKbx9;Laa3t(aLdMyE3Kb)F58is`FNtO@6MQ<Y8f$=oGY&-K8v^J
z_HSf~)jD3%l90Lc;Fl{o%r{bFABeIWx7x`$-`UhWp)<69PrcOn(l3RHikV`Q(ol$d
wm%h&kYWtOU#xT?SyXPO-|JQzbGXG$hapq;-8$~k-p!XR(UHx3vIVCg!0E$tD+yDRo

literal 0
HcmV?d00001

diff --git a/src/main/webapp/resource/css/images/logo.png b/src/main/webapp/resource/css/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..b582c5572efdeef9e81274387e10187d1c9ac701
GIT binary patch
literal 1104
zcmV-W1h4yvP)<h;3K|Lk000e1NJLTq004gg001Ef1^@s6@Hupp00009a7bBm000XT
z000XT0n*)m`~Uz10!c(cRCt{2S-ox(K@k2Nr9>i^Cx|XB5<&I@q_9(`F*OCUDbv{v
z6jV+}2X+-&r-2fjB0aVe2`ZGcc!C5-3Cf~1Gs&<w=ku93O0@e)tGnBsot?S)+1b02
zF$MvCVky}DR-z7IK-Yyqi~MbBYv$vl9RN=NYyj9PZ5<s?5hMc8pcVr-1F#RE2Vf-V
zc)>P+-4vGq`Ht*6TwT-~Sr+%!z<U55;`cesmlwA0NQ|$fW?!L9o*Ich=?oRe0RpDO
z21aMm!NJD2hCc*we`5GgPl5BVDdG%RBlqcQJ+(;@Z==6OeZla>uzM3(k@x()iQ#R&
zIeAmW@SuGuru)Zac#APPLOV5MHdvlr0H>4&hsqvkohza7gq~d(;t^3aF~7dZR1x(V
z%2e(eygmed*Wp!G)=dPhq3r0+PiTHs%&iJ}T+E_#)sbr;=&$57#%vqLub<}P!$wxy
zwDp0~1~hx9jA@P0QpUKIjWMStjlQ56rbcx+7)grKn6983D1CCB4n0R1ysW&jvTk3|
znRzDSUdmk+b2M4<bmsZmJ4~3)M*ildC!7vbE;Iw!llJGCoB@tXyIs_5VM-aKN#qT&
zZj;7&tgJ*YX!}_wT9#Et+W}o=c8L`II+T@0f?tnlwJ5BU>^0(16+A1{YC`@j%%gKe
zvaM292Fd<6QyXIr*(EMcUS~!9w8(e8`hO$8E@<k?xQu|l)6Y>hRMx91ks%{17JX$$
zmL!K?JcZ8HGj_%zML$ixB06jHQ?lR2bABxDv$6?CfLln8obe(Ui}_XOs%45YMS4qQ
zi&$CDm2phb2+AV7Z%3(_3)Xpws{9E`Q6)t%1GIE`SK%7jHNHg0X+_YaHWr0w|EAxW
zHU7KHr_~Cud@n_m12%p+!~60)+QnErXE{`sw`WDitdPc!#m6e<CuQUP-fgp@M?BhM
zP3`?HOlNC+`_=9}ca+wjrHFFSqZb4^QgF1y<k7=|4sam&wL~gy2xs85Sr>(lHeM7m
z^>gtiqkb%$z3-%Xt>DT+SInJN*6Y`q3V{`4%<*O6_xX8|f^XW<jL}evj;w+YM6V$c
z1ya$YUS7e+twsH;k6Uz3)3ueeuH<j%c*(pLany6?|05F@eBbHF_trj?9=rtBC#Q%X
zDR0p+q9aRBq(=U>Uz@`#d*W!s*ryc9S)oGDyxy3e=PF#Bbs)Z2y8FG<m1W@~POA-E
z?9zUJKq>o7=$nUY)mi(ovqp|!f9$-X`^k6z($>+p6o-I23(fceo*?|s_ZY$W9wQjv
zV+7-Sj9`3^5sdFKg7G~@FuunK#`hS(_#Pt|-(v*hdyHUwj}eUTF@o_uMlimw0PqK7
W{qNvba0^cW0000<MNUMnLSTaOZV#9M

literal 0
HcmV?d00001

diff --git a/src/main/webapp/resource/css/images/uploadFile.png b/src/main/webapp/resource/css/images/uploadFile.png
new file mode 100644
index 0000000000000000000000000000000000000000..bee5afae6d39221c9b70d8d8543a7fdbd30e21d0
GIT binary patch
literal 519
zcmV+i0{H!jP)<h;3K|Lk000e1NJLTq001Qb001!v1^@s6UD;rc00009a7bBm000XT
z000XT0n*)m`~Uy}xk*GpR9J=WnLloWFcgP>jUv|e2)RMIL3)FB_mE^qYI=j_1Z^bt
z(t$lUC`afKI6`L@Dib?$@{;h3P4K`cG342K`UJ**9(Q$JLn6{D2Jiqslz9@BMqc^*
zkDGZa(n^XH03JzecQydt)xSRh#3HS-Jc-tvj1vHB&qC+82k<Jz&a@FGB+@Snj@YfG
zz!4il3T<LTN#UB<kW#oLHnbGZiG?7AQ?XE_V2Xt#1tm5MO-izyl8|TeBzm&V*w>x1
z7BT7TPR&JH?bHszma@;s_pB~kHX#o5;HHFzQHo2DQoi24EdY61i95b=NBEFh<w<l{
z;nkwLAiXSbeSAkk*e@$f0N<qNjiiW>##OAV)J35au`OxnNvc&yqfW#t($Ipf6kEs;
z%WTDLq^yNBwqjhV&O%+pI8tw}LK>B)b?|ef*mWf)t@$`J`j@I<{gM`=IA(IC05_8d
z0}|~ZCHWwcJ!WytL~euUB+6vmx^Nk#xQtR<T%}&r9Ckp>Q8DRhf$Mfy*53<}R=Q{}
z1v6DQA52P%{g9{w<3Q&Utd#Gqi7Q3(y-%c7^Z6?Pp)60L>>r5EgR&)!Xf^-<002ov
JPDHLkV1i_1<6{5-

literal 0
HcmV?d00001

diff --git a/src/main/webapp/resource/css/style.css b/src/main/webapp/resource/css/style.css
index ca11915..9396e4a 100644
--- a/src/main/webapp/resource/css/style.css
+++ b/src/main/webapp/resource/css/style.css
@@ -1,3 +1,12 @@
+/*웹폰트 noto-sans*/
+@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@800&family=Noto+Sans+KR:wght@400;500;700&display=swap');
+
+/*초기설정*/
+*{
+    border-style: none;
+    text-decoration: none;
+    color:#333;
+}
 
 html{
     font-size: 15px;
@@ -9,23 +18,130 @@ div.app-container{
 }
 div.app-item.nav{
     padding: 10px;
-    background-color: burlywood;
+    /*background-color: burlywood;*/
+    background-color: #4989e8;
     width: 14rem;
     flex-grow: 0;
 
 }
 div.app-item.article{
     padding: 10px;
-    background-color: whitesmoke;
+    /*background-color: whitesmoke;*/
+    background-color: #eff2f9;
     width: 50%;
     flex-grow: 1;
 
 }
-
+.app-container h1{
+    font-family: 'Noto Sans KR', sans-serif;
+    font-weight: 800;
+    padding-left: 10px;
+    margin: 0px;
+    padding-top: 16px;
+}
 details {
     margin: 10px;
+    display: inline-block;
+    font-family: 'Noto Sans KR', sans-serif;
+    font-weight: 400;
+    cursor: pointer;
 }
+details > summary{color: #898989;}
 details > summary:hover {
+    transition: all 0.3s;
+    color:#333333;
+}
+details .box{
+    border-radius: 6px;
+    padding: 10px 35px;
+    background:#f5f7fd;;
+}
+details ul li{color:#777777;}
+details ul span{color:#686868;}
+
+
+.nav{
+    padding: 0px 0px 0px 5px;
+    list-style: none;
+}
+.nav .logo{
+    height: 30px;
+    background-image: url(./images/logo.png);
+    background-size: 128px;
+    background-repeat: no-repeat;
+    border-bottom: 1px solid #fff;
+    margin-bottom: 10px;
+}
+.dp1 a{
+    color:#fff;
+    font-family: 'Noto Sans KR', sans-serif;
+    font-weight: 500;
+    font-size: 18px;
+    padding-left: 15px;
+}
+.box_group{
+    background: #fff;
+    border-radius: 10px;
+    margin: 10px;
+    padding-left: 26px;
+}
+#grid{
+    margin: 10px;
+}
+
+.content input{
+    border-style: none;
+    background: #c1c1c1;
+    width: 130px;
+    padding: 8px 8px 8px 27px;
+    color: #fff;
+
+    border-radius: 5px;
+    margin-bottom: 10px;
+    background-image: url(./images/arrow.png);
+    background-size: 13px;
+    background-repeat: no-repeat;
+    background-position: 13px 11px;
+    cursor: pointer;
+    font-family: 'Noto Sans KR', sans-serif;
+    font-weight: 500;
+}
+.content input:hover{
+    background: #777777;
+    transition: all 0.3s;
+    background-image: url(./images/arrow.png);
+    background-size: 13px;
+    background-repeat: no-repeat;
+    background-position: 13px 11px;
+}
+
+.content label{
+    border: 1px solid #c1c1c1;
+    padding: 8px;
+    color: #727272;
+    font-family: 'Noto Sans KR', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    border-width: 0px 0px 1px 0px;
+}
+
+button {
+    width: 115px;
+    padding:9px;
+    display: inline-block;
+    margin: 10px 10px 20px 10px;
+    background: #5a93f9;
+    border-style: none;
+    border-radius:50px;
+    font-family: 'Noto Sans KR', sans-serif;
+    font-weight: 500;
+    font-size:14px;
     cursor: pointer;
-    color: blue;
 }
+button span{
+    color:#fff;
+}
+button:hover{
+    transition: all 0.3s;
+    background:#4367a6;
+}
\ No newline at end of file