Learn/KH정보교육원

[KH정보교육원 당산] 40일차(CSS 연습)

Dahoon06 2021. 5. 4. 21:42
728x90
반응형

 

 

 

 

 

1. register.html과 myform.css

 

2.memberInsert.jsp와 sytle.css

..=> style인데 오타..

 

css연습을 하기 위함이라 아직 기능적인 요소들은 뺐다.

 

 

 

 

 

html파일에 css

 

register.html

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS 적용</title>
<link rel="stylesheet" href="./myform.css">
</head>

<body>
<form>
	<fieldset>
		<legend>로그인 정보</legend>
		<ol>
			<li>
				<label for="userID">아이디</label>
				<input type="text" id="userID" required="required" autofocus="autofocus" name="userID" />
			</li>
			<li>
				<label for="userPW">비밀번호</label>
				<input type="password" id="userPW" required="required" name="userPW" />
			</li>
			<li>
				<label for="userPW_check">비밀번호 확인</label>
				<input type="password" name="userPW_check" required="required" id="userPW_check" />
			</li>
			<li>
				<label for="level">회원등급</label>
				<input type="text" value="준회원" name="userLevel" id="level" readonly="readonly" />
			</li>	
		</ol>
	</fieldset>
	<fieldset>
		<legend>개인정보</legend>
			<ol>
				<li>
					<label for="userName">이름</label>
					<input type="text" name="userName" id="userName" placeholder="다섯자미만 공백없이" required="required" />				</li>
				<li>
					<label for="uesrEamil">메일주소</label>
					<input type="email" name="userEmail" id="userEmail" placeholder="asdf@asdf.com" required="required" />
				</li>
				<li>
					<label for="userPhone">연락처</label>
					<input type="tel" name="userPhone" id="userPhone" required="required" />
				</li>
			</ol>
	</fieldset>
	<fieldset>
		<legend>코딩 숙련도(상,중,하)</legend>
			<ol>
				<li>
					<input type="range" name="userSkil" id="userSkil" min="1" max="3" step="1" />
				</li>
			</ol>
	</fieldset>
	<fieldset>
		<button type="submit">제출</button>
	</fieldset>
</form>
</body>
</html>

 

 

사용된 CSS

 

더보기

@charset "UTF-8";

 

html, body, form, fieldset, legend, ol, li {

margin: 0;

padding: 0;

}

 

body {

background: #ffffff;

color: #111111;

font-family: 맑은고딕,굴림,돋움;

padding: 20px;

}

 

form{

background: #9cbc2c;

-moz-border-radius: 5px;

-webkit-border-radius:5px;

-khrml-border-radius:5px;

border-radius: 5px;

counter-reset: fieldsets;

padding:20px;

width: 400px;

}

 

form fieldset{

border: none;

margin-bottom: 0;

}

 

form fieldset:last-of-type {

margin-bottom:0;

 

}

 

legend{

color: #384313;

font-size: 16px;

font-weight: bold;

padding-bottom: 10px;

text-shadow: 0 1px 1px #c0d576;

}

 

form > fieldset > legend:before {

content: "Step " counter(fieldsets) ": ";

counter-increment: fieldsets;

 

}

 

form fieldset fieldset legend{

color: #111111;

font-size: 13px;

font-weight: normal;

padding-bottom: 0;

}

 

form ol li {

background: #b9cf6a;

background: rgba(255,255,255,0.3);

border-color: #e3ebc3;

border-color:rgba(255,255,255,.6);

border-style: solid;

border-width: 2px;

-moz-border-radius: 5px;

-webkit-border-radius:5px;

-khrml-border-radius:5px;

border-radius: 5px;

line-height: 30px;

list-style: none;

padding: 5px;

margin-bottom: 2px;

}

 

form ol ol li {

background: none;

border: none;

float:left;

}

 

form label{

float:left;

width: 110px;

font-size: 13px;

}

 

form fieldset fieldset label{

background: none no-repeat left 50%;

line-height: 20px;

padding: 0 0 0 30px;

width: auto;

}

 

form fieldset fieldset label:hover{

cursor: pointer;

}

 

form input:not([type=radio]){

background: #ffffff;

border: none;

-moz-border-radius: 3px;

-webkit-border-radius:3px;

-khrml-border-radius:3px;

border-radius: 3px;

outline: none;

padding: 5px;

width: 200px;

font: italic 13px 맑은고딕,굴림,돋움;

}

 

form input:not([type=submit]):focus{

background: #eaeaea;

}

 

form button {

background: #384313;

border: none;

-moz-border-radius: 20px;

-webkit-border-radius:20px;

-khrml-border-radius:20px;

border-radius: 20px;

color: #ffffff;

display: block;

font: 16px 맑은고딕,굴림,돋움;

margin: auto;

padding: 7px 25px;

letter-spacing: 1px;

text-shadow: 0 1px 1px #000000;

}

 

form button:hover {

background: #1e2506;

cursor: pointer;

}

 

 

 

 

jsp파일에 css

 

memberInsert.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JSP에서 CSS 적용</title>
<link rel="stylesheet" href="./sytle.css">
</head>

<body bgcolor="#996000">
	<table width="500" align="center" cellspacing="0" cellpadding="5">
		<tr>
			<td bgcolor="#ffffcc">
				<table border="1" cellspacing="0" cellpadding="5" align="center">
					<form action="#" method="get">
						<tr align="center" bgcolor="#996600">
							<td colspan="3"><font color="#ffffff"><b>회원가입</b></font></td>
						</tr>
						<tr>
							<td width="100">아이디</td>
							<td width="200"><input type="text" name="userID" size="15" /></td>
							<td width="200">아이디를 입력해주세요.</td>
						</tr>
						<tr>
							<td>비밀번호</td>
							<td><input type="password" name="userPW" size="15" /></td>
							<td>비밀번호를 입력해주세요.</td>
						</tr>
						<tr>
							<td>비밀번호 확인</td>
							<td><input type="password" name="userPW_check" size="15" /></td>
							<td>비밀번호를 확인합니다.</td>
						</tr>
						<tr>
							<td>이름</td>
							<td><input type="text" name="userName" size="15" /></td>
							<td>이름을 입력해주세요.</td>
						</tr>
						<tr>
							<td>생년월일</td>
							<td><input type="text" name="userBirth" size="15" /></td>
							<td>생년월일을 입력해주세요.</td>
						</tr>
						<tr>
							<td>이메일</td>
							<td><input type="email" name="userEmail" size="15" /></td>
							<td>이메일을 입력해주세요.</td>
						</tr>
						<tr>
							<td colspan="3" align="center">
								<input type="submit" value="가입하기" />
								<input type="reset" value="다시 입력" />
							</td>
						</tr>
					</form>
				</table>
			</td>
		</tr>
	</table>

</body>
</html>

 

 

 

사용된 CSS

 

더보기

@charset "UTF-8";

 

body{

font-size: 9pt;

color: black;

line-height: 160%;

font-family: 굴림,tahoma,verdana;

}

 

td {

font-size: 9pt;

color: black;

line-height: 160%;

font-family: 굴림,tahoma,verdana;

 

}

 

form {

font-size: 9pt;

color: black;

line-height: 160%;

font-family: 굴림,tahoma,verdana;

}

 

input {

border-right: 1px solid #999999;

border-top: 1px solid #999999;

border-left: 1px solid #999999;

border-bottom: 1px solid #999999;

font-size: 9pt;

color: black;

height: 19px;

background-color: white;

font-family: 굴림,verdana,tahoma; 

}

 

 

 

 

 

간단한 CSS디자인을 통해서 

 

쇼핑몰을 만들 것이다.

 

이번엔 페이지 수가 많아진다...

 

먼저 기능적인 요소를 빼고 디자인 먼저 

 

 

 

 

 

 

 

 

 

 

 

 

 

사용된 공통 CSS

 

더보기

@charset "UTF-8";

 

body, th{

font-size: 9pt;

color: black;

line-height: 160%;

font-family: 굴림,tahoma,verdana;

}

 

 

 

td {

font-size: 9pt;

color: black;

line-height: 160%;

font-family: 굴림,tahoma,verdana;

 

}

 

form {

font-size: 9pt;

color: black;

line-height: 160%;

font-family: 굴림,tahoma,verdana;

}

 

input {

border-right: 1px solid #999999;

border-top: 1px solid #999999;

border-left: 1px solid #999999;

border-bottom: 1px solid #999999;

font-size: 9pt;

color: black;

height: 19px;

background-color: white;

font-family: 굴림,verdana,tahoma; 

}

 

a:link{

text-decoration: none;

color: #696969;

}

a:hover{

text-decoration: yes;

color:#66ccff;

}

a:visited{

text-decoration: none;

color: #330066;

}

 

 

상단(로그인 회원가입~~~) 하단(simple~~~)은 jsp의 include 사용

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Simple Shopping Mall : index.jsp</title>
<link rel="stylesheet" href="style.css">
</head>

<body bgcolor="#996600" topmargin="100">
	<%@ include file="top.jsp" %>
	
	<table width="75%" align="center" bgcolor="#ffff99" height="100%">
		<tr>
			<td align="center">로그인하신후 이용해주세요.</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>
</body>
</html>

top.jsp와 bottom.jsp

 

top.jsp

더보기

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<table width="75%" bgcolor="#ffff99"  align="center">

<tr bgcolor="#ffcc00">

<th><a href="login.jsp">로그인</a></th>

<th><a href="member.jsp">회원가입</a></th>

<th><a href="productList.jsp">상품목록</a></th>

<th><a href="cartList.jsp">장바구니</a></th>

<th><a href="orderList.jsp">구매목록</a></th>

</tr>

</table>

bottom.jsp

 

더보기

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<table width="75%" align="center" bgcolor="#ffff99">

<tr bgcolor="#ffcc00">

<th>

Simple Shopping Mall 관리자 페이지(admin/bottom.jsp)

</th>

</tr>

</table>

 

상품목록이나 장바구니나 디자인적인 요소는 다 비슷비슷하다.

그래서 코드는 하나만 올릴것이다..

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Simple Shopping Mall : productList.jsp</title>
<link rel="stylesheet" href="style.css">
</head>

<body bgcolor="#996600" topmargin="100">
	<%@ include file="top.jsp" %>
	
	<table width="75%" align="center" bgcolor="#ffff99">
		<tr>
			<td align="center" bgcolor="#ffffcc">
				<table width="95%" bgcolor="#ffff99" border="1">
					<tr align="center" bgcolor="#996600">
						<th><font color="#ffffff">이름</font></th>
						<th><font color="#ffffff">가격</font></th>
						<th><font color="#ffffff">날짜</font></th>
						<th><font color="#ffffff">재고</font></th>
						<th><font color="#ffffff">상세보기</font></th>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	
	
	<%@ include file="bottom.jsp" %>
</body>
</html>

다 이러한 구조로 되어있다.

productList.jsp

 

 

다음 admin 폴더

 

관리자 페이지도 마찬가지로 비슷한 구조로 되어있다.

다만 관리자 파일의 경우 폴더를 새로 만들어 그 안에 파일을 생성 했기 때문에 기존의 css파일을 사용하기 위해서는 

절대 경로로 ../를 하여 링크 걸어준다.

./ => 점하나 : 현재의 폴더 안에서  . . / => 점두개 : 상위 폴더에서

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Simple Shopping Mall : (admin)index.jsp</title>
<link rel="stylesheet" href="../style.css">
</head>

<body bgcolor="#996600" topmargin="100">
	<%@ include file="top.jsp" %>
	
	<table width="75%" align="center" height="100%" bgcolor="#fff99">
		<tr>
			<td height="190" align="center">관리자 페이지 입니다.</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>
</body>
</html>

 

 

 

 

로그아웃

adminLogout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script>
	alert("로그아웃 되었습니다.");
	location.href="adminLogin.jsp";
</script>

경고창을 띄운후 login페이지로 이동하게 간단하게 만들었다.

 

회원관리

memberMgr.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>memberMgr.jsp</title>
<link rel="stylesheet" href="../style.css">
</head>

<body 	bgcolor="#996600" topmargin="100">

	<%@ include file="top.jsp" %>
	
	<table width="75%" align="center" bgcolor="#ffff99">
		<tr>
			<td align="center" bgcolor="#ffffcc">
				<table width="95%" align="center" bgcolor="#ffff99" border="1">
					<tr align="center" bgcolor="#996600">
						<th><font color="#ffffff">회원이름</font></th>
						<th><font color="#ffffff">회원아이디</font></th>
						<th><font color="#ffffff">회원비밀번호</font></th>
						<th><font color="#ffffff">회원성별</font></th>
						<th><font color="#ffffff">회원생년월일</font></th>
						<th><font color="#ffffff">회원이메일</font></th>
						<th><font color="#ffffff">수정</font></th>
						<th><font color="#ffffff">메일보내기</font></th>
					</tr>
					<tr align="center">
						<td colspan="8">가입된 회원이 없습니다.</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>

</body>
</html>

 

앞에서 사용했던 코드와 크게 달라진건 없다.

 

다른 탭도 다 비슷하다.

 

다만 회원가입쪽은 전에 실습 했던거와는 조금 달라진다.

 

회원가입

member.jsp

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Simple Shopping Mall : 회원가입(member.jsp)</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>

<body bgcolor="#996600" topmargin="100">
		<%@ include file="top.jsp" %>
		
		<table width="75%" align="center" bgcolor="#ffff99">
			<tr>
				<td align="center" bgcolor="#ffffcc">
					<table width="95%" align="center" bgcolor="#ffff99" border="1">
						<form action="mamberInsert.jsp" method="post" name="regForm">
							<tr align="center" bgcolor="#996600">
								<td colspan="3"><font color="#ffffff"><b>회원가입</b></font></td>
							</tr>
							<tr>
								<td width="16%">아이디</td>
								<td width="57%">
									<input type="text" name="userID" size="15" required="required" />
									<input type="button" onclick="idCheck(this.form.userID.value)" name="userID_check" value="중복확인" />
								</td>
								<td width="27%">아이디 입력은 필수 입니다.</td>
							</tr>
							<tr>
								<td>비밀번호</td>
								<td><input type="password" name="userPW" size="15" /></td>
								<td>비밀번호 입력은 필수입니다.</td>
							</tr>
							<tr>
								<td>비밀번호 확인</td>
								<td><input type="password" name="userPW_check" size="15" /></td>
								<td>비밀번호 확인은 필수입니다.</td>
							</tr>
							<tr>
								<td>이름</td>
								<td><input type="text" name="userName" size="15" required="required"/></td>
								<td>고객님의 실명을 입력해주세요.</td>
							</tr>
							<tr>
								<td>성별</td>
								<td>
									남자<input type="radio" name="userGender" value="1" checked="checked" />
									여자<input type="radio" name="userGender" value="2"  />
								</td>
								<td>성별을 선택하세요.</td>
							</tr>
							<tr>
								<td>생년월일</td>
								<td><input type="text" name="userBrith" size="10" placeholder="ex)940617"/></td>
								<td>생년월일을 입력해주세요.</td>
							</tr>
							<tr>
								<td>이메일</td>
								<td><input type="email" name="userName" placeholder="asda@asd.com" required="required" /></td>
								<td>이메일을 입력해주세요.</td>
							</tr>
							<tr>
								<td>우편번호</td>
								<td>
									<input type="text" name="zipCode" size="5" req/>
									<input type="button" value="우편번호찾기" onclick="zipCheck()"/>
								</td>
								<td>우편번호를 입력해주세요.</td>
							</tr>
							<tr>
								<td>주소</td>
								<td><input type="text" name="userAddress" size="40" /></td>
								<td>주소를 적어주세요.</td>
							</tr>
							<tr>
								<td>직업</td>
								<td>
									<select name="job">
										<option value="0" selected>선택하세요.</option>
										<option value="회사원">회사원</option>
										<option value="연구전문직">연구전문직</option>
										<option value="교수학생">교수학생</option>
										<option value="일반자영업">일반자영업</option>
										<option value="공무원">공무원</option>
										<option value="의료인">의료인</option>
										<option value="법조인">법조인</option>
										<option value="종교,언론,에술인">종교.언론/예술인</option>
										<option value="농,축,수산,광업인">농/축/수산/광업인</option>
										<option value="주부">주부</option>
										<option value="무직">무직</option>
										<option value="기타">기타</option>
									</select>
								</td>
								<td>직업을 선택해주세요.</td>
							</tr>
							<tr>
								<td>취미</td>
								<td>
									<input type="checkbox" name="userHobby" value="인터넷" checked="checked" multiple="multiple" />인터넷
									<input type="checkbox" name="userHobby" value="운동"  multiple="multiple" />운동
									<input type="checkbox" name="userHobby" value="산책"  multiple="multiple" />산책
									<input type="checkbox" name="userHobby" value="여행"  multiple="multiple" />여행
									<input type="checkbox" name="userHobby" value="게임"  multiple="multiple" />게임
									<input type="checkbox" name="userHobby" value="맛집탐방" multiple="multiple" />맛집탐방
								</td>
								<td>취미를 선택하세요.</td>
							</tr>
							<tr>
								<td colspan="3" align="center">
									<input type="submit" value="회원가입" onclick="inputCheck()" />
									<input type="reset" value="다시작성" />
								</td>
							</tr>
						</form>
					</table>
				</td>
			</tr>
		</table>
		
		<%@ include file="bottom.jsp" %>
</body>
</html>

 

사용된 자바 스크립트

 

더보기

function idCheck(userID) {

if(userID==""){

alert("아이디를 입력해주세요.");

document.regForm.userID.focus();

} else {

url="idCheck.jsp?userID="+userID;

window.open(url,"post","width=300,height=150");

}

}

 

function win_close(){

self.close();

}

 

function inputCheck(){

if(document.regForm.userPW_check.value==""){

alert("비밀번호확인 부분이 입력되지 않았습니다.");

document.refForm.userPW_check.focus();

return;

}

 

if(document.regForm.userPW.value != document.regForm.userPW_check.value){

alert("비밀번호가 일치하지 않습니다.");

document.regForm.userPW_check.focus();

return;

}

document.regForm.submit();

}

 

function zipCheck(){

url="zipSearch.jsp?search=n";

window.open(url,"post","width=500,height=300");

}

 

아이디 확인부분이 잘못되어있다. 수정해야한다...

 

현재까지의 작업상황

2021.05.04_simple_shopping_mall.war
0.01MB

 

(05.06)목요일에 이 파일을 이용하여 데이터베이스와 연동(오라클) 시킬것이다.

 

회원가입 부분의 주소 찾기

728x90
반응형

'Learn > KH정보교육원' 카테고리의 다른 글

[KH정보교육원 당산] 42일차 (쇼핑몰 - 주문)  (0) 2021.05.07
[KH정보교육원 당산] 41일차(쇼핑몰 - 회원가입부분)  (0) 2021.05.06
[KH정보교육원 당산] 39일차(UI시작-HTML,CSS)  (0) 2021.05.03
[KH정보교육원 당산] 38일차(휴강..)  (0) 2021.05.03
로그인,회원가입 구현하기 - 1  (0) 2021.04.29

'Learn/KH정보교육원'의 다른글

  • 현재글[KH정보교육원 당산] 40일차(CSS 연습)

관련글

티스토리툴바