구리

TIL_210504_CSS 연습 및 예제 (simple_shop 기본 틀) 본문

HTML,CSS

TIL_210504_CSS 연습 및 예제 (simple_shop 기본 틀)

guriguriguri 2021. 5. 4. 23:54

예제1

register.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link href="myform.css" rel="stylesheet" type="text/css">
</head>

<body>
	<form action="#">
		<fieldset>
			<legend>로그인 정보</legend>
				<ol>
					<li>
						<label for="user_id">아이디</label>
						<input id="user_id" type="text" value="user_id" name="user_id" required="required" autofocus="autofocus" />
					</li>
					<li>
						<label for="pwd1">비밀번호</label>
						<input id="pwd1" type="password" name="pwd1" required="required" />
					</li>
					<li>
						<label for="pwd2">비밀번호 확인</label>
						<input id="pwd2" type="password" name="pwd2" required="required" />
					</li>
					<li>
						<label for="level">회원등급</label>
						<input id="level" type="text" value="준회원" name="level" readonly="readonly" />
					</li>
				</ol>
		</fieldset>
	
		<fieldset>
			<legend>개인정보</legend>
			<ol>
				<li>
					<label for="fullname">이름</label>
					<input id="fullname" type="text" name="fullname" placeholder="5자미만 공백없이"   required="required"/>
				</li>
				<li>
					<label for="email">메일주소</label>
					<input type="email" id="email" name="email" placeholder="abcd@domain.com" required="required" />
				</li>
				<li>
					<label for="tel">연락처</label>
					<input type="tel" id="tel" name="tel" required="required" />
				</li>
			</ol>
		</fieldset>
		
		<fieldset>
			<legend>코딩 숙련도(상,중,하)</legend>
			<ol>
				<li>
					<input type="range" name="skill" id="skill" min="1" max="3" step="1" />
				</li>
			</ol>
		</fieldset>
		
		<fieldset>
			<button type="submit">제출</button>
		</fieldset>
	</form>
</body>
</html>
myform.css

@charset "UTF-8";
html, body, form, fieldset, legend, ol, lo {
	margin: 0;
	padding: 0;
}

body{
	background: #ffffff;
	color: #111111;
	font-family: 맑은고딕,굴림,돋움; /* 첫번째 글씨체 없으면 두번째 , 두번째도 엇으면 세번째 */
	padding: 20px;
}
form{
	background: #9cbc2c;
	-moz-border-radius: 5px; /* 어떤걸 사용하는지에 따라서 radius 설정*/
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px; 		/* 위에 명시한 것중에도 없으면 radius 설정*/
	counter-reset: fieldset; /* css 변화 없고 필드들 count 하고 싶을 때 */
	padding: 20px;
	width: 400px; /* 옆으로 얼마나 늘릴지 조절 */
}

form fieldset {
	border: none;  /*fieldset 테투리 제거*/
	margin-bottom: 0; /*아래쪽 마진 0으로 설정*/
}

form fieldset:last-of-type {
	margin-bottom: 0;
}

form legend{
	color: #384313;
	font-size: 16px;
	font-weight: bold;				/* 글자 굵기 지정*/
	padding-bottom: 10px;
	text-shadow: 0 1px 1px #c0d576;  /*글씨에 그림자 처리, left right bottom은 생략*/
}

form > fieldset > legend:before{ /*counter(fieldsets) css가 제공하는 함수 */
	content: "Step " counter(fieldset) ": "; /*왜 난 숫자 적용안되지?*/
	counter-increment: fieldset;
} 

form fieldset fieldset legend{
	color: #111111;
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 0;
}

form ol li{
	background: #b9cf6a;
	background: rbga(255, 255, 255, .3);  /*rbga 투명도 지정*/
	border-color: #e3ebc3;
	border-color:  rbga(255, 255, 255, .6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;  	/*li태그에 있는 문장들에 대한 간격*/
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
}

form ol ol li{
	background: none;
	border: none;
	float: left; /*기존의 리스트 스타일 제거*/
}

form label{
	float: left;
	font-size: 13px;
	width: 110px;
}

form fieldset fieldset label {
	background: none no-repeat left 50%;
	line-height: 20px;
	padding: 0 0 0 30px; /*lefr -top -right- bottom*/
	width: auto;
}

form fieldset fieldset label:hover{
	cursor: pointer;
}

form input:not([type=radio]){ /*타입이 다양해 일일이 지정하기 번거로워서 이렇게 명시*/
	background: #ffffff;
	border: none;
	-mox-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	font: italic 13px 맑은고딕,굴림,돋움;
	outline: none;
	padding: 5px;
	width: 200px;
}

form input:not([type=submit]):focus{
	background: #eaeaea;
}

form button{
	background: #384313;
	border: none;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
	border-radius: 20px;
	color: #ffffff;
	display: block;
	font: 16px 맑은고딕,굴람,돋움;
	letter-spacing: 1px;		/*글자 사이 간격 지정*/
	margin: auto;
	padding: 7px 25px;
	text-shadow: 0 1px 1px #000000;
	text-transform: uppercase; /*text 모두 대문자로 출력*/
}

form button:hover{
	backgorund: #1e2506;
	cursor: pointer;
}

 

예제2

style.css

@charset "UTF-8";
body{
	font-size: 9pt;
	color: black;
	line-height: 160%;
	font-famaily: 굴림,verdana,tahoma; /*이거 적용했는데 회원가입 글씨는 왜 흰색? style 우선적용 떄문에 그래*/
}
td{
	font-size: 9pt;
	color: black;
	line-height: 160%;
	font-family: 굴림,verdana,tahoma;
	/*background: #ffffcc;*/ /*표 색과 회원가입 색을 다르게 하기위해 아예 jsp에서 적용 여기서 해버리면 td가 표를 다 묶고 있으므로 다르게 적용할 수 없음*/
}
form{
	font-size: 9pt;
	color: black;
	line-height: 160%;
	font-family: 굴림,verdana,tahoma;
}
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;
}
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 href="style.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#996600">
	<table width="500" align="center" cellspacing="10" cellpadding="5">
		<tr>
			<td bgcolor="#ffffcc">
				<table border="1" cellspacing="1" cellpadding="5" align="center"> <!-- cellspacing 셀간의 간격. cellpadding : 셀과 글자 사이의 간격 -->
					<form method="get" action="#">
						<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" required="required" name="id" size="15" /></td>
							<td width="200">아이디를 적어주세요</td>
						</tr>
						<tr>
							<td>패스워드</td>
							<td><input type="password" required="required" name="pwd" size="15" /></td>
							<td>패스워드를 적어주세요</td>
						</tr>
						<tr>
							<td>패스워드 확인</td>
							<td><input type="password" required="required" name="repwd" size="15" /></td>
							<td>패스워드를 확인합니다</td>
						</tr>
						<tr>
							<td>이름</td>
							<td><input type="text" size="15" name="name" required="required" /></td>
							<td>고객실명을 적어주세요</td>
						</tr>
						<tr>
							<td>생년월일</td>
							<td><input type="text" size="27" name="birthday" /></td>
							<td>생년월일을 입력해주세요</td>
						</tr>
						<tr>
							<td>이메일</td>
							<td><input type="email" size="20" name="email" /></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>

 

 

 

예제3

style.css

@charset "UTF-8";
body{
	font-size: 9pt;		/*화면 상하단 (top,bottom.jsp)의 글자 크기만 변경 */
	color: black;
	line-height: 160%;		/
	font-famaoly: 굴림,verdana,tahoma; 
}
td{
	font-size: 9pt; /* body 가운데 (top, bottom.jsp제외) 글씨 크기 변경 */
	color: black;
	line-height: 160%;
	font-family: 굴림,verdana,tahoma;
	/*background: #ffffcc;*/ /*표 색과 회원가입 색을 다르게 하기위해 아예 jsp에서 적용 여기서 해버리면 td가 표를 다 묶고 있으므로 다르게 적용할 수 없음*/
}
form{
	font-size: 9pt;
	color: black;
	line-height: 160%;
	font-family: 굴림,verdana,tahoma;
}
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;
}

 

 

index.jsp / top.jsp / bottom.jsp

index.jsp

더보기 
index.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:index.jsp</title>
	<link href="style.css" rel="stylesheet" type="text/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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<table width="75%" align="center" bgcolor="#ffff99">
	<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%" bgcolor="#ffff99" align="center">
	<tr bgcolor="ffcc00">
		<th width="90%">Simple Shopping Mall에 오신 것을 환영합니다</th>
		<th><a href="admin/index.jsp">관리자</a></th>
	</tr>
</table>

 

login.jsp

더보기 
login.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: 로그인(login.jsp)</title>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#996600" topmargin="100">
	<%@ include file="top.jsp" %>
	
	<form action="loginProc.jsp" method="post">
		<table width="75%" align="center" bgcolor="#ffff99">
			<tr bordercolor="#ffff99">
				<td height="190">
				
					<table width="50%" border="1" align="center">
						<tr bordercolor="#ffff66">
							<td colspan="2" align="center">로그인</td>
						</tr>
						
						<tr align="center">
							<td width="43%">아이디</td>
							<td width="57%"><input type="text" name="id" value="aaa" required="required" /></td>
						</tr>
						
						<tr align="center">
							<td>비밀번호</td>
							<td><input type="password" name="pwd" value="1234" required="required" /></td>
						</tr>
						
						<tr>
							<td colspan="2" align="center">
								<input type="submit" value="로그인" />
								<input type="reset" value="취소" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</form>
	
	<%@ include file="bottom.jsp" %>

</body>
</html>

 

member.jsp

더보기 
member.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"> <!-- meta태그는 항상 처음에... -->
	<title>Simple Shopping Mall : 회원가입(member.jsp)</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="script.js?ver=0504"></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="memberInsert.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="id" size="15" required="required" />
								<input type="button" value="아이디 중복확인"  onclick="idCheck(this.form.id.value)" />
							</td>
							<td width="27%">아이디 입력은 필수 입니다.</td>
						</tr>
						
						<tr>
							<td>비밀번호</td>
							<td><input type="password" name="pwd" size="15" required="required" /></td>
							<td>비밀번호 입력은 필수입니다.</td>
						</tr>
						
						<tr>
							<td>비밀번호 확인</td>
							<td><input type="password" name="repwd" size="15" required="required" /></td>
							<td>비밀번호 확인 입력은 필수입니다.</td>
						</tr>
						
						<tr>
							<td>이름</td>
							<td><input type="text" name="name" size="15" required="required" /></td>
							<td>고객님의 실명을 입력해주세요</td>
						</tr>
				
						<tr>
							<td>성별</td>
							<td>
								남<input type="radio"  name="gender"  value="1" checked="checked" />
								여<input type="radio"  name="gender"  value="2" checked="checked" />
							</td>
							<td>성별을 선택하세요</td>
						</tr>
						
						<tr>
							<td>생년월일</td>
							<td><input type="text" name="birthday" size="10" placeholder="ex)880912" required="required" /></td>
							<td>생년월일을 입력해주세요</td>
						</tr>
				
						<tr>
							<td>이메일주소</td>
							<td><input type="email" name="email" size="27" placeholder="abcd@domain.com" required="required" /></td>
							<td>이메일을 입력해주세요</td>
						</tr>
						
						<tr>
							<td>우편번호</td>
							<td>
								<input type="text" name="zipcode" size="5" required="required" />
								<input type="button" value="우편번호찾기" />
							</td>
							<td>우편번호를 검색하세요</td>
						</tr>
						
						<tr>
							<td>주소</td>
							<td><input type="text" name="address" 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="hobby" value="인터넷" checked="checked" />인터넷
								<input type="checkbox" name="hobby" value="여행" />여행
								<input type="checkbox" name="hobby" value="게임" />게임
								<input type="checkbox" name="hobby" value="영화" />영화
								<input type="checkbox" name="hobby" value="운동" />운동
								<input type="checkbox" name="hobby" value="음악" />음악
							</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>

 

productList.jsp

더보기 
productList.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: 상품목록(productList.jsp)</title>
	<link href="style.css" rel="stylesheet" type="text/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>
					<!-- DB에서 조회 결과 값 출력  -->
				</table>
			
			</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>
</body>
</html>

 

cartList.jsp

더보기 
cartList.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: 장바구니(cartList.jsp)</title>
	<link href="style.css" rel="stylesheet" type="text/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" bgcololr="#ffff99" border="1">
					<tr align="center" bgcolor="#996600">
						<td><font color="#ffffff">제품</font></td>
						<td><font color="#ffffff">수량</font></td>
						<td><font color="#ffffff">가격</font></td>
						<td><font color="#ffffff">수정/삭제</font></td>
						<td><font color="#ffffff">조회</font></td>
					</tr>
					
					<tr>
						<td colspan="5" align="center">장바구니가 비었습니다.</td>
					</tr>
				</table>
			
			</td>
		</tr>
	
	</table>
	
	
	<%@ include file="bottom.jsp" %>
</body>
</html>

 

orderList.jsp

더보기 
orderList.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: 주문내역(orderList.jsp)</title>
	<link href="style.css" rel="stylesheet" type="text/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 bgcolor="#996600" align="center">
					<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="5">주문하신 내역이 없습니다</td>
				</tr>
			</table>
			
			</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>
</body>
</html>

 

관리자화면 시작

 

 

admin/index.jsp

더보기 
admin/index.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: 장바구니(admin/index.jsp)</title>
	<link href="../style.css" rel="stylesheet" type="text/css"> <!-- 상대경로 주의 -->
</head>

<body bgcolor="#996600" topmargin="100">
	<%@ include file="top.jsp" %> <!--  admin/top.jsp -->
	
	<table width="75%" align="center" bgcolor="#ffff99">
		<tr bordercolor="#ffff99">
			<td height="190" align="center">
				관리자 화면입니다
			</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %> <!--  admin/bottom.jsp -->
</body>
</html>

 

admin/logout.jsp

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

 

admin/adminLogin.jsp

더보기 
adminLogin.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>adminLogin.jsp</title>
	<link href="../style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#996600" topmargin="100">
	<%@ include file="top.jsp" %>
	
	<table width="75%" align="center" bgcolor="#ffff99" >
		<tr bordercolor="#ffff99">
			<td height="200">
			
				<form action="adminLoginPrac.jsp" method="post">
					<table width="50%" border="1" align="center">
						<tr bordercolor="ffff99">
							<td colspan="2" align="center">관리자 로그인</td>
						</tr>
						
						<tr align="center">
							<td width="47%">관리자 아이디</td>
							<td width="53%"><input type="text" name="admin_id" value="admin" required="required" /></td>
						</tr>
						
						<tr align="center">
							<td>관리자 비밀번호</td>
							<td><input type="password" name="admin_pwd" value="1234" required="required"></td>
						</tr>
						
						<tr>
							<td colspan="2" align="center">
								<input type="submit" value="로그인" />
								<input type="reset" value="취소" />
							</td>
						</tr>
					</table>
				</form>
			
			</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>
</body>
</html>

 

admin/memberMgr.jsp

더보기 
adminLogin.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>adminLogin.jsp</title>
	<link href="../style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#996600" topmargin="100">
	<%@ include file="top.jsp" %>
	
	<table width="75%" align="center" bgcolor="#ffff99" >
		<tr bordercolor="#ffff99">
			<td height="200">
			
				<form action="adminLoginPrac.jsp" method="post">
					<table width="50%" border="1" align="center">
						<tr bordercolor="ffff99">
							<td colspan="2" align="center">관리자 로그인</td>
						</tr>
						
						<tr align="center">
							<td width="47%">관리자 아이디</td>
							<td width="53%"><input type="text" name="admin_id" value="admin" required="required" /></td>
						</tr>
						
						<tr align="center">
							<td>관리자 비밀번호</td>
							<td><input type="password" name="admin_pwd" value="1234" required="required"></td>
						</tr>
						
						<tr>
							<td colspan="2" align="center">
								<input type="submit" value="로그인" />
								<input type="reset" value="취소" />
							</td>
						</tr>
					</table>
				</form>
			
			</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>
</body>
</html>

 

admin/productMgr.jsp

더보기 
productMgr.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>productMgr.jsp</title>
	<link href="../style.css" rel="stylesheet" type="text/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">
						<td><font color="#ffffff">이름</font></td>
						<td><font color="#ffffff">가격</font></td>
						<td><font color="#ffffff">날짜</font></td>
						<td><font color="#ffffff">재고</font></td>
						<td><font color="#ffffff">기타</font></td>
					</tr>
					
					<tr>
						<td colspan="5" align="center">등록된 제품이 없습니다</td>
					</tr>
					
					<tr>
						<td colspan="5" align="center">
							<a href="productInsert.jsp">상품등록하러가기</a>
						</td>
					</tr>
				</table>
			
			</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>

</body>
</html>

 

admin/orderMgr.jsp

더보기 
orderMgr.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>orderMgr.jsp</title>
	<link href="../style.css" rel="stylesheet" type="text/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">
						<td><font color="#ffffff">주문번호</font></td>
						<td><font color="#ffffff">주문고객</font></td>
						<td><font color="#ffffff">주문제품</font></td>
						<td><font color="#ffffff">주문수량</font></td>
						<td><font color="#ffffff">주문날짜</font></td>
						<td><font color="#ffffff">주문상태</font></td>
						<td><font color="#ffffff">상세보기</font></td>
					</tr>
					
					<tr>
						<td colspan="7" align="center">주문 내역이 없습니다</td>
					</tr>
					
					<tr>
						<td colspan="7" align="center">
							<a href="#">상세보기</a>
						</td>
					</tr>
				</table>
			
			</td>
		</tr>
	</table>
	
	<%@ include file="bottom.jsp" %>


</body>
</html>

 

 

'HTML,CSS' 카테고리의 다른 글

TIL_210525_CSS_고급 선택자, 미디어 쿼리, Grid  (0) 2021.05.25
TIL_210524_CSS 관련(border, image,float,box) 예시  (0) 2021.05.24
HTML - input 태그 date 타입 관련 예시  (0) 2021.05.21
TIL_210506_프로젝트 문제 해결(simple_shop 회원가입 완료)  (0) 2021.05.06
TIL_210503_웹 UI 관련 기본지식, HTML 태그2, CSS 기초  (0) 2021.05.04
'HTML,CSS' Related Articles more