xit-java
/
xit-app-ci
21
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2022.03.23 박소영 메인디자인커밋

Browse Source
design
psy 3 years ago
parent c4f1f0211c
commit 41ea9fcb94
7 changed files with 178 additions and 43 deletions
Show Stats Download Patch File Download Diff File

74
src/main/webapp/WEB-INF/jsp/index.jsp
Unescape Escape View File

@ -209,7 +209,7 @@ let findData = ()=>{
div.content{ div.content{
margin: 10px; margin: 10px;
} }
button { /* button {
height:27px; height:27px;
padding: 10px 15px 30px 15px; padding: 10px 15px 30px 15px;
margin: 10px; margin: 10px;
@ -223,7 +223,7 @@ let findData = ()=>{
border-color: #6a5a64; border-color: #6a5a64;
text-shadow: none; text-shadow: none;
box-shadow: none; box-shadow: none;
} }*/
</style> </style>
@ -235,45 +235,49 @@ let findData = ()=>{
</div> </div>
<div class="app-item article"> <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>
</ul> </details>
</details> </div>
</div> <div class="content">
<div class="content">
<span> <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> <label id="lbFile" for="fExcel">선택된 파일이 없습니다</label>
</span> </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> </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> </div>
<%--box_group 종료--%>
<div id="grid" class="tuigrid"></div> <div id="grid" class="tuigrid"></div>
</div> </div>

1
src/main/webapp/WEB-INF/jsp/nav.jsp
Unescape Escape View File

@ -13,6 +13,7 @@
<div> <div>
<ul class="nav"> <ul class="nav">
<a href="/"><li class="logo"></li></a>
<li class="dp1"> <li class="dp1">
<a href="/">CI 변환</a> <a href="/">CI 변환</a>
</li> </li>

22
src/main/webapp/resource/css/file-drag-and-drop.css
Unescape Escape View File

@ -1,12 +1,13 @@
.file-drag-and-drop{ .file-drag-and-drop{
outline: 2px dashed #92b0b3 ; outline: 2px dashed #c1c1c1 ;
outline-offset:-10px; outline-offset:-1px;
text-align: center; text-align: center;
transition: all .15s ease-in-out; transition: all .15s ease-in-out;
width: 350px; width: 350px;
height: 100px; height: 150px;
background-color: #cccccc; background-color: #f9f9f9;
border-radius: 4px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -14,5 +15,18 @@
justify-content: center; justify-content: center;
align-content: center; align-content: center;
flex-wrap: wrap; 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;
} }

BIN
src/main/webapp/resource/css/images/arrow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 321 B

BIN
src/main/webapp/resource/css/images/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/main/webapp/resource/css/images/uploadFile.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 519 B

124
src/main/webapp/resource/css/style.css
Unescape Escape View File

@ -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{ html{
font-size: 15px; font-size: 15px;
@ -9,23 +18,130 @@ div.app-container{
} }
div.app-item.nav{ div.app-item.nav{
padding: 10px; padding: 10px;
background-color: burlywood; /*background-color: burlywood;*/
background-color: #4989e8;
width: 14rem; width: 14rem;
flex-grow: 0; flex-grow: 0;
} }
div.app-item.article{ div.app-item.article{
padding: 10px; padding: 10px;
background-color: whitesmoke; /*background-color: whitesmoke;*/
background-color: #eff2f9;
width: 50%; width: 50%;
flex-grow: 1; 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 { details {
margin: 10px; margin: 10px;
display: inline-block;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 400;
cursor: pointer;
} }
details > summary{color: #898989;}
details > summary:hover { 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; cursor: pointer;
color: blue;
} }
button span{
color:#fff;
}
button:hover{
transition: all 0.3s;
background:#4367a6;
}
Write Preview
Loading…
Cancel
Save