최신글
hyeonga_code
reProject_02_ input 태그 간단한 css, 로그인 페이지, 아이디 찾기/ 비밀번호 찾기 페이지 구현하기 본문
Project_WEATHERWEAR
reProject_02_ input 태그 간단한 css, 로그인 페이지, 아이디 찾기/ 비밀번호 찾기 페이지 구현하기
hyeonga 2023. 12. 13. 05:59반응형
reProject_01_프로젝트 재정비
2023-12-08 - 프로젝트 기간이 종료되었지만 프로젝트가 완벽하지 않은 상태로 마무리되었으므로 다시 보완하기로 결정 - 부족한 점 - 화면이 일관성 없이 각자 진행하여 충돌하는 css - 일관되지 않
hyeonga493.tistory.com
2023.12.12
input 태그 css 정리
> css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
input[type="text"],
input[type="submit"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="reset"],
input[type="email"],
input[type="tel"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="button"],
textarea {
width: 200px;
border-radius: 0; /* 테두리 모서리 */
box-shadow: none; /* 그림자 효과 */
-webkit-appearance: none; /* 기본 외관 제거 */
border: 1px solid #ddd; /* 테두리 */
height: 36px; /* 높이 */
box-sizing: border-box; /* 테두리 포함한 크기 */
padding: 0 20px; /* 왼쪽,오른쪽 값 지정 */
font-size: 15px; /* 폰트 크기 */
color: #111; /* 색상: 검은색 */
letter-spacing: -0.2px; /* 글자 간격 */
font-weight: 500; /* 글짜 두께 */
font-family: "Roboto","Noto",sans-serif; /* 폰트 */
}
/* 파일 업로드 버튼 */
input[type=file]::file-selector-button {
width: 100px;
height: 36px;
background: #fff;
border: 1px solid #ddd; /* 테두리 */
border-radius: 10px;
cursor: pointer;
&:hover {
background: rgb(77,77,77);
color: #fff;}
}
/* <select> styles */
.select {
/* Reset */
appearance: none; /* 기본 외관 제거 */
border: 0;
outline: 0;
font: inherit;
/* Personalize */
width: 200px; /* 요소 너비 설정 */
height: 36px;
text-align: center;
color: black;
border: 1px solid #ddd; /* 테두리 */
border-radius: 0.25em; /* 모서리 둥글림 */
cursor: pointer;
/* Remove IE arrow */
&::-ms-expand {
display: none;
}
/* Remove focus outline */
&:focus {
outline: none;
}
/* <option> colors */
option {
color: inherit;
background-color: var(--option-bg);
}
|
> html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" placeholder="text"> <br>
<input type="submit" value="submit"> <br>
<input type="password" placeholder="password"> <br>
<input type="search" placeholder="search"> <br>
<input type="number" placeholder="number"> <br>
<input type="reset" value="reset"> <br>
<input type="email" placeholder="email"> <br>
<input type="tel" placeholder="tel"> <br>
<input type="email" placeholder="email"> <br>
<input type="tel" placeholder="tel"> <br>
<input type="date" placeholder="date"> <br><br>
<input type="file" placeholder="file"> <br><br>
<select class="select">
<option selected value="0">option 1</option>
<option value="1">option 2</option>
<option value="2">option 3</option>
<option value="3">option 4</option>
</select>
</body>
</html>
|
>> 실
1. 로그인 페이지 구현하기
1) client_login_style.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.client {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.btn_form{
width: 100% !important;
}
.form_t {
padding: 10px;
height: 30px;
}
|
2) client_login.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEATHERWEAR</title>
<link rel="stylesheet" href="/w2/resources/client/client_css/client_base_style.css">
<link rel="stylesheet" href="/w2/resources/client/client_css/client_login_style.css">
</head>
<body>
<div class="container">
<%@ include file="/WEB-INF/views/client/base/client_header.jspf" %>
<div class="body">
<div class="client">
<h2>Login</h2>
<form action="#" method="post">
<table class="client_table">
<tr>
<th class="form_t">아이디 : </th>
<td class="form_t"><input type="text" name="clientId" placeholder="아이디"></td>
</tr>
<tr>
<th class="form_t">비밀번호 : </th>
<td class="form_t"><input type="password" name="clientPwd" placeholder="비밀번호"></td>
</tr>
<tr>
<td colspan="2" class="form_t">
<input type="submit" class="btn_form" value="로 그 인">
</td>
</tr>
<tr>
<td colspan="2" class="form_t">
<input type="button" value="아이디/비밀번호 찾기" onclick="location.href='findInfo.do'">
<input type="button" value="회 원 가 입">
</td>
</tr>
</table>
</form>
</div>
</div>
<%@ include file="/WEB-INF/views/client/base/client_footer.jspf" %>
</div>
</body>
</html>
|
3) 페이지를 호출할 주소 설정
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
package com.w2.client.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class ClientGetController {
@RequestMapping("main.do")
public String main() {
return "client_main";
}
@RequestMapping("login.do")
public String login() {
return "client_login";
}
}
|
4) client_header.jspf > login <a>태그에 login.do 연결
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<header class="header clear">
<img src='/w2/resources/client/client_image/logo_pull.png' class="header_img" onclick="location.href='main.do'">
<!-- 익명의 사용자 -->
<nav class="user_menu">
<ul>
<li><a href="login.do">LOGIN</a></li>
<li><a href="#">JOIN</a></li>
<li><a href="#">CART</a></li>
</ul>
</nav>
<!-- 로그인한 사용자 -->
<nav class="user_menu">
<ul>
<li><a href="#">CART</a></li>
<li><a href="#">MYPAGE</a></li>
<li><a href="#">LOGOUT</a></li>
</ul>
</nav>
<div class="clear_con"></div>
<nav class="main_menu">
<ul>
<li><a class="main_menu_a" href="#"><strong>ALL</strong></a></li>
<li><a class="main_menu_a" href="#"><strong>OUTER</strong></a></li>
<li><a class="main_menu_a" href="#"><strong>TOP</strong></a></li>
<li><a class="main_menu_a" href="#"><strong>PANTS</strong></a></li>
<li><a class="main_menu_a" href="#"><strong>SKIRTS</strong></a></li>
<li><a class="main_menu_a" href="#"><strong>DRESS</strong></a></li>
<li><a class="main_menu_a" href="#"><strong>COMMUNITY</strong></a></li>
</ul>
</nav>
</header>
|
>> 실행하기
2. 정보 찾기 페이지 구현하기
-- 구현하고 싶었던 목표
---- 정보찾기에서 아이디 찾기 클릭 시 아이디 찾는 form이 보여짐
---- 정보찾기에서 비밀번호 클릭 시 비밀번호 찾는 form이 보여짐
---- 전화번호로 찾기/이메일로 찾기 따로 구현
-- 클릭하면 화면에 특정 내용만 보여지게 하고 싶어 jquery 책을 열었다.
---- jquery가 스크립트를 단순하게 사용할 수 있도록 한 언어라는 것을 알았다.
---- 스크립트 : 지시한 내용을 브라우저에 전달하는 역할
> 스크립트
document.getElementByTagName("태그 이름")[0].innerHTML = "태그 안의 내용에 넣고 싶은 내용";
> css
선택자 {
text-align: center;
}
.클래스 {
position: absolute;
}
#아이디 {
color: black;
}
>> Jquery
$("태그 이름").html("태그 안의 내용에 넣고 싶은 내용");
$(".클래스").html("태그 안의 내용에 넣고 싶은 내용");
$("#아이디").html("태그 안의 내용에 넣고 싶은 내용");
1) client_findInfo_style.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
@charset "UTF-8";
.client {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.client_table {
width: 400px;
}
.btn_form{
width: 100% !important;
}
.form_th {
padding: 10px;
width: 30%;
}
.form_td {
padding: 10px;
height: 30px;
}
.findInfo_ul {
list-style: none;
display: inline-block;
padding-left: 0px;
}
.findInfo_ul > li {
display: inline;
margin: 5px;
}
.findInfo_ul > li > a{
text-decoration: none;
color: grey;
}
#findInfo_id_num {
display: none;
}
#findInfo_id_email {
display: none;
}
#findInfo_pwd_email {
display: none;
}
#findInfo_pwd_num {
display: none;
}
|
2) client_findInfo.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
$(document).ready(function(){
const findId = document.querySelector('#findId');
const findPwd = document.querySelector('#findPwd');
const findId_num = document.querySelector('#findId_num');
const findPwd_num = document.querySelector('#findPwd_num');
const findId_email = document.querySelector('#findId_email');
const findPwd_email = document.querySelector('#findPwd_email');
const findInfo_id_num = document.querySelector('#findInfo_id_num');
const findInfo_id_email = document.querySelector('#findInfo_id_email');
const findInfo_pwd_num = document.querySelector('#findInfo_pwd_num');
const findInfo_pwd_email = document.querySelector('#findInfo_pwd_email');
const showForm = (target) => {
findInfo_id_num.style.display = 'none';
findInfo_id_email.style.display = 'none';
findInfo_pwd_num.style.display = 'none';
findInfo_pwd_email.style.display = 'none';
target.style.display = 'flex';
}
const select = (target) => {
findId.style.color="dimgrey";
findId.style.fontWeight="normal";
findPwd.style.color="dimgrey";
findPwd.style.fontWeight="normal";
target.style.color="dimgrey";
target.style.fontWeight="bold";
}
findId.addEventListener('click', () => {
showForm(findInfo_id_num);
select(findId);
});
findId_num.addEventListener('click', () => {
showForm(findInfo_id_num);
select(findId);
});
findId_email.addEventListener('click', () => {
showForm(findInfo_id_email);
select(findId);
});
findPwd.addEventListener('click', () => {
showForm(findInfo_pwd_num);
select(findPwd);
});
findPwd_num.addEventListener('click', () => {
showForm(findInfo_pwd_num);
select(findPwd);
});
findPwd_email.addEventListener('click', () => {
showForm(findInfo_pwd_email);
select(findPwd);
});
});
|
3) client_findInfo.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEATHERWEAR</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/w2/resources/client/client_js/client_findInfo.js"></script>
<link rel="stylesheet" href="/w2/resources/client/client_css/client_base_style.css">
<link rel="stylesheet" href="/w2/resources/client/client_css/client_findInfo_style.css">
</head>
<body>
<div class="container">
<%@ include file="/WEB-INF/views/client/base/client_header.jspf" %>
<div class="body">
<div class="client">
<h2>정보 찾기</h2>
<ul class="findInfo_ul">
<li><a id="findId">아이디 찾기</a></li>
<li>|</li>
<li><a id="findPwd">비밀번호 찾기</a></li>
</ul>
<!-- 전화번호로 아이디 찾기 -->
<div id="findInfo_id_num">
<form action="#" method="post" autocapitalize="none">
<table class="client_table">
<tr>
<th class="form_th">이름 : </th>
<td class="form_td"><input type="text" name="clientName" placeholder="이름"></td>
</tr>
<tr>
<th class="form_th">전화번호 : </th>
<td class="form_td"><input type="text" name="clientNum" placeholder="전화번호"></td>
</tr>
<tr>
<td colspan="2" class="form_t">
<input type="submit" class="btn_form" value="아이디 찾기">
</td>
</tr>
<tr>
<td colspan="2" class="form_t">
<a id="findId_email">이메일로 아이디 찾기</a>
</td>
</tr>
</table>
</form>
</div>
<!-- 이메일로 아이디 찾기 -->
<div id="findInfo_id_email">
<form action="#" method="post" autocapitalize="none">
<table class="client_table">
<tr>
<th class="form_th">이름 : </th>
<td class="form_td"><input type="text" name="clientName" placeholder="이름"></td>
</tr>
<tr>
<th class="form_th">이메일 : </th>
<td class="form_td"><input type="text" name="clientEmail" placeholder="이메일"></td>
</tr>
<tr>
<td colspan="2" class="form_t">
<input type="submit" class="btn_form" value="아이디 찾기">
</td>
</tr>
<tr>
<td colspan="2" class="form_t">
<a id="findId_num">전화번호로 아이디 찾기</a>
</td>
</tr>
</table>
</form>
</div>
<!-- 전화번호로 비밀번호 찾기 -->
<div id="findInfo_pwd_num">
<form action="#" method="post" autocapitalize="none">
<table class="client_table">
<tr>
<th class="form_th">이름 : </th>
<td class="form_td"><input type="text" name="clientName" placeholder="이름"></td>
</tr>
<tr>
<th class="form_th">아이디 : </th>
<td class="form_td"><input type="text" name="clientId" placeholder="아이디"></td>
</tr>
<tr>
<th class="form_th">전화번호 : </th>
<td class="form_td"><input type="text" name="clientNum" placeholder="전화번호"></td>
</tr>
<tr>
<td colspan="2" class="form_t">
<input type="submit" class="btn_form" value="비밀번호 찾기">
</td>
</tr>
<tr>
<td colspan="2" class="form_t">
<a id="findPwd_email">이메일로 비밀번호 찾기</a>
</td>
</tr>
</table>
</form>
</div>
<!-- 이메일로 비밀번호 찾기 -->
<div id="findInfo_pwd_email">
<form action="#" method="post" autocapitalize="none">
<table class="client_table">
<tr>
<th class="form_th">이름 : </th>
<td class="form_td"><input type="text" name="clientName" placeholder="이름"></td>
</tr>
<tr>
<th class="form_th">아이디 : </th>
<td class="form_td"><input type="text" name="clientId" placeholder="아이디"></td>
</tr>
<tr>
<th class="form_th">이메일 : </th>
<td class="form_td"><input type="text" name="clientEmail" placeholder="이메일"></td>
</tr>
<tr>
<td colspan="2" class="form_t">
<input type="submit" class="btn_form" value="비밀번호 찾기">
</td>
</tr>
<tr>
<td colspan="2" class="form_t">
<a id="findPwd_num">전화번호로 비밀번호 찾기</a>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<%@ include file="/WEB-INF/views/client/base/client_footer.jspf" %>
</div>
</body>
</html>
|
4) 페이지 호출할 주소
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
package com.w2.client.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class ClientGetController {
// 사용자 메인페이지
@RequestMapping("main.do")
public String main() {
return "client_main";
}
// 사용자 로그인 페이지
@RequestMapping("login.do")
public String login() {
return "client_login";
}
// 사용자 정보 찾기 페이지
@RequestMapping("findInfo.do")
public String findInfo() {
return "client_findInfo";
}
}
|
5) login페이지의 아이디/비밀번호 찾기 태그에 연결
>>> 실행
> 아이디 찾기 클릭
> 이메일로 아이디 찾기 클릭
> 비밀번호 찾기 클릭
> 이메일로 비밀번호 찾기 클릭
반응형
'Project_WEATHERWEAR' 카테고리의 다른 글
| reProject_04_ajax 알아보기 (0) | 2023.12.15 |
|---|---|
| reProject_03_jquery 알아보기, 회원가입 페이지 구현하기(약관동의, Form 작성) (0) | 2023.12.14 |
| reProject_01_프로젝트 재정비 (1) | 2023.12.12 |
| Project_Spring, MVC 프로젝트_비밀번호 암호화 (0) | 2023.11.21 |
| Project_Git_깃허브 리포지토리 생성하기 (0) | 2023.11.15 |
'Project_WEATHERWEAR' Related Articles
more
