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; - } + }*/ @@ -235,45 +235,49 @@ let findData = ()=>{
-
-

CI 변환

-
- 메뉴 세부정보 -
    -
  • 주민번호에 대한 CI 값을 취득 합니다.
    • -
  • 첨부파일은 엑셀문서(xls,xlsx)만 가능 합니다.
    • -
  • 첨부파일의 시트에는 `A열:성명, B:주민번호` 가 작성되어 있어야 합니다.
    • - [첨부파일 작성방법] -
      -
    • 1행: 컬럼명(A열:성명, B열:주민번호)
      • -
    • 2~xxx행: 데이터
      • +
      +
      +

      CI 변환

      +
      + 메뉴 세부정보 +
        +
      • 주민번호에 대한 CI 값을 취득 합니다.
        • +
      • 첨부파일은 엑셀문서(xls,xlsx)만 가능 합니다.
        • +
      • 첨부파일의 시트에는 `A열:성명, B:주민번호` 가 작성되어 있어야 합니다.
        • + [첨부파일 작성방법] +
          +
        • 1행: 컬럼명(A열:성명, B열:주민번호)
          • +
        • 2~xxx행: 데이터
          • +
      -
    -
-
-
+ +
+
- + - -
-

첨부파일(xls,xlsx)을 이곳에 올려주세요

+ +
+

첨부파일(xls,xlsx)을 이곳에 올려주세요

+
+ + + + + + + + +
+
+
- - - - - - - - -
-
-
+ <%--box_group 종료--%>
diff --git a/src/main/webapp/WEB-INF/jsp/nav.jsp b/src/main/webapp/WEB-INF/jsp/nav.jsp index 43b585a..e4e5b0c 100644 --- a/src/main/webapp/WEB-INF/jsp/nav.jsp +++ b/src/main/webapp/WEB-INF/jsp/nav.jsp @@ -13,9 +13,25 @@
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..7669625 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 !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; } 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 0000000..a0e2361 Binary files /dev/null and b/src/main/webapp/resource/css/images/arrow.png differ 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 0000000..b582c55 Binary files /dev/null and b/src/main/webapp/resource/css/images/logo.png differ diff --git a/src/main/webapp/resource/css/images/m_logo.png b/src/main/webapp/resource/css/images/m_logo.png new file mode 100644 index 0000000..e488026 Binary files /dev/null and b/src/main/webapp/resource/css/images/m_logo.png differ 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 0000000..bee5afa Binary files /dev/null and b/src/main/webapp/resource/css/images/uploadFile.png differ diff --git a/src/main/webapp/resource/css/style.css b/src/main/webapp/resource/css/style.css index ca11915..631a3ea 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,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;} + +}/*삭제조심*/ \ No newline at end of file