2022.03.23 박소영 메인디자인커밋

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>

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>

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;
 }
 

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;
+}