Merge pull request #1 from minkyu1128/design

[반영승인]DesignCSS 전반 수정
  1. 반응형 Menubar 적용
  2. 로고 추가
  3. 첨부파일 Drag&Drop CSS 수정

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">
+			<div class="box_group">
-				<h1>CI 변환</h1>
+				<div class="app-container" style="align-items: center; display: block;">
-				<details>
+					<h1>CI 변환</h1>
-					<summary>메뉴 세부정보</summary>
+					<details>
-					<ul>
+						<summary>메뉴 세부정보</summary>
-						<li>주민번호에 대한 CI 값을 취득 합니다.</li>
+						<ul class="box">
-						<li>첨부파일은 엑셀문서(xls,xlsx)만 가능 합니다.</li>
+							<li>주민번호에 대한 CI 값을 취득 합니다.</li>
-						<li>첨부파일의 시트에는 `A열:성명, B:주민번호` 가 작성되어 있어야 합니다.</li>
+							<li>첨부파일은 엑셀문서(xls,xlsx)만 가능 합니다.</li>
-						<span style="font-weight: bold;">[첨부파일 작성방법]</span>
+							<li>첨부파일의 시트에는 `A열:성명, B:주민번호` 가 작성되어 있어야 합니다.</li>
-						<ul>
+							<span style="font-weight: bold;">[첨부파일 작성방법]</span>
-							<li>1행: 컬럼명(A열:성명, B열:주민번호)</li>
+							<ul>
-							<li>2~xxx행: 데이터</li>
+								<li>1행: 컬럼명(A열:성명, B열:주민번호)</li>
+								<li>2~xxx행: 데이터</li>
+							</ul>
 						</ul>
-					</ul>
+					</details>
-				</details>
+				</div>
-			</div>
+				<div class="content">
-			<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;"/>
+					<input type="file" id="fExcel" name="fExcel" style="display: none;"/>
-				<div class="file-drag-and-drop">
+					<div class="file-drag-and-drop">
-					<p>첨부파일(xls,xlsx)을 이곳에 올려주세요</p>
+						<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,9 +13,25 @@
 
 <div>
     <ul class="nav">
+        <a href="/"><li class="logo"></li></a>
         <li class="dp1">
             <a href="/">CI 변환</a>
         </li>
+
+        <li class="m-dp1">
+            <input type="checkbox" id="menuicon">
+            <label for="menuicon">
+                <span></span>
+                <span></span>
+                <span></span>
+            </label>
+            <div class="m-sidebar">
+                <h3>Menu</h3>
+                <ul>
+                    <li><a href="/">· CI 변환</a></li>
+                </ul>
+            </div>
+        </li>
     </ul>
 </div>
 

src/main/webapp/resource/css/file-drag-and-drop.css

@@ -1,12 +1,13 @@
 
 .file-drag-and-drop{
-    outline: 2px dashed #92b0b3 ;
+    outline: 2px dashed #c1c1c1 ;
-    outline-offset:-10px;
+    outline-offset:-1px;
     text-align: center;
     transition: all .15s ease-in-out;
     width: 350px;
-    height: 100px;
+    height: 150px;
-    background-color: #cccccc;
+    background-color: #f9f9f9 !important;
+    border-radius: 4px;
 
     display: flex;
     flex-direction: row;
@@ -14,5 +15,19 @@
     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{
+    background-color: #f9f9f9 !important;
+    margin-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,218 @@ 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{
+    width: 214px;
+    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;
+}
+.m-dp1{display: none;}
+
+.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;
-    color: blue;
+    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;
+}
+button span{
+    color:#fff;
+}
+button:hover{
+    transition: all 0.3s;
+    background:#4367a6;
+}
+
+/* 미디어쿼리 */
+@media only screen and (max-width : 500px){
+    div.app-item.nav{
+        width: 100%;
+    }
+    .nav{
+        display: flex;
+    }
+    .nav .logo{
+        border: none;
+        margin: 0px;
+        background-image: url(./images/m_logo.png);
+        background-size: 52px;
+        background-position: 7px 3px;
+    }
+    .dp1 a{
+        display: none;
+    }
+    .m-dp1{
+        display: block;
+    }
+    /*인풋에 체크되기 전*/
+    #menuicon {display: none;}
+    #menuicon + label {
+        display: block;
+        /*margin: 30px;*/
+        width: 33px;
+        height: 28px;
+        /*z-index: 9999;*/
+        position: relative;
+        cursor: pointer;
+        right: -180px;
+        top: 3px;
+    }
+    #menuicon + label span{
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 4px;
+        border-radius: 30px;
+        background: #fff;
+        transition: all .35s;
+    }
+    #menuicon + label span:nth-child(1){top:0;}
+    #menuicon + label span:nth-child(2){top:50%; transform: translateY(-50%);}
+    #menuicon + label span:nth-child(3){bottom: 0;}
+
+    /*인풋에 체크 후*/
+    #menuicon:checked + label{z-index: 17;}
+    #menuicon:checked + label span{background: #fff;}
+    #menuicon:checked + label span:nth-child(1){top:50%; transform: translateY(-50%) rotate(45deg);}
+    #menuicon:checked + label span:nth-child(2){opacity:0;}
+    #menuicon:checked + label span:nth-child(3){bottom:50%; transform: translateY(50%) rotate(-45deg);}
+
+    .m-sidebar{
+        width: 200px;
+        height: 100%;
+        background: #182e49;
+        position: fixed;
+        top: 0;
+        right: -300px;
+        z-index: 16;
+        transition: all .35s;
+        margin-top: 8px;
+    }
+    .m-sidebar ul{list-style: none;}
+    .m-sidebar h3{
+        color:#fff;
+        padding-top: 50px;
+        padding-left: 23px;
+        font-family: 'Noto Sans KR', sans-serif;
+        font-weight: 500;
+    }
+    .m-sidebar a{
+        color: #fff;
+        display:inline-block;
+        border: 0px solid red;
+        list-style: none;
+        font-family: 'Noto Sans KR', sans-serif;
+        font-weight: 400;
+    }
+    #menuicon:checked + label +div {right:0;}
+
+}/*삭제조심*/