JSP - 확장자 별로 나누기 (2020-09-16)

JSP - 확장자 별로 나누기 (2020-09-16)

2022. 9. 19. 23:49ㆍ3층 1구역 - 개발의 장/JSP

1. 서론

여태까지 자바스크립트, css, jsp를 jsp확장자에 전부 작성했는데

이번엔 이를 각각의 확장자 별로 나눠볼 것이다.

먼저 나누어볼 코드이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex28</title>
<style type="text/css">
body{	background-color: #898989;	padding: 0; margin: 0; }
#wrap
{
	width : 950px;
	height: 1000px;
	background: white;
	margin: 0 auto;
}
a {text-decoration: none;}
ul{ list-style: none; }
header{	height : 200px; }

#login{	float : right;	margin: 10px;}
#login a { color : #333; text-decoration : none;}
#login a:hover{	color: #f90; }
#logo{	padding: 50px 0 0 50px; }
#logo a{ color: #f90; }
#logo a:hover{	color: #333; }
#header_nav {	float: right; margin-right: 50px;}
#header_nav ul li {display: inline; margin : 0 20px;}
#header_nav ul li a{	color : #333; 	font-size: 18px; }
#header_nav ul li a:hover
{
	background-image: url(/jsExam/images/blue.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}
#img_mem
{
	background-image: url(/jsExam/images/member/sub_back.png);
	width: 970px;
	height: 180px;
	position: relative;
	right: 10px;
}
#nav_sub{
	
	height: 400px;
	width: 27%;
	margin: 60px 10px 10px 10px;
	float: left;
}
#nav_sub ul li a
{
	font-size: 18px; 
	color: #333;
	display: block;
	width: 150px;
	height: 30px;
	padding: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	background-image: url(/jsExam/images/company/h_bullet.gif);
	background-repeat: no-repeat;
	background-position: right center;
}
#nav_sub ul li a:hover
{
	color: #f90;
	background-image: url(/jsExam/images/bullet_orange.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

#article_sub .fieldset_mem
{
	width: 570px;
	padding-left: 50px;
	margin: 20px;
}
#article_sub .fieldset_mem legend{ font-size: 18px; }
#article_sub .fieldset_mem label { float: left; width: 200px; margin: 5px;}
#article_sub .fieldset_mem #check_text{all : initial;}
#article_sub .fieldset_mem input 
{ 
	width: 200px; margin: 5px;
	background-color: #D4F4FA;
}
#buttons_mem
{
	margin: 20px;
	position: relative;
	left: 30px;
}
#buttons_mem .submit_mem, #buttons_mem .cancel_mem
{
	font-size: 16px;
	width: 270px;
	height: 40px;
	margin: 0px 10px;
}
#buttons_mem .submit_mem
{
	background-image: url(/jsExam/images/member/submit_back.jpg);
}
#buttons_mem .cancel_mem
{
	background-image: url(/jsExam/images/member/cancel_back.jpg);
}

#copy{	float : left;	font-size : 12px;}
#social{	float : right; }
#copy, #social { margin: 30px;}
footer{ margin: 20px 0px; }
</style>

<script>
function member_check(){
	id = document.getElementById('id').value;
	pw = document.getElementById('pw').value;
	confirm_pw = document.getElementById('confirm_pw').value;
	name = document.getElementById('name').value;
	
	if(id == ""){
		alert('아이디는 필수 항목입니다.');
	}else if(pw == ""){
		alert('비밀번호는 필수 항목입니다.');
	}else if(confirm_pw == ""){
		alert('비밀번호 확인은 필수 항목입니다.');
	}else if(name == ""){
		alert('이름은 필수 항목입니다.');
	}else{
		document.getElementById('f').action = 'member_check.jsp';
		document.getElementById('f').submit();
	}
}
function pw_check(){
	pw = document.getElementById('pw');
	confirm_pw = document.getElementById('confirm_pw');
	if(pw.value == confirm_pw.value){
		document.getElementById('check_text').innerHTML = '일치';
	}
	else {
		document.getElementById('check_text').innerHTML = '불일치';
		pw.value="";
		confirm_pw.value="";
		confirm_pw.focus();
	}
}
function login_check(){
	id = document.getElementById('id').value;
	pw = document.getElementById('pw').value;
	
	if(id == ""){
		alert('아이디는 필수 항목입니다.');
	}else if(pw == ""){
		alert('비밀번호는 필수 항목입니다.');
	}else{
		document.getElementById('f').action = 'login_check.jsp';
		document.getElementById('f').method = 'post';
		document.getElementById('f').submit();
	}
}

</script>
</head>
<body>
	<div id="wrap">
		<header>
			<div id="login">
				<a href="#"> Login </a> <a href="#"> Membership </a>
			</div>
			<div id="logo">
				<h1>
					<a href="#">CARE LAB</a>
				</h1>
			</div>
			<nav id="header_nav">
				<ul>
					<li><a href="#">HOME</a></li>
					<li><a href="#">COMPANY</a></li>
					<li><a href="#">SOLUTIONS</a></li>
					<li><a href="#">CUSTOMER CENTER</a></li>
				</ul>
			</nav>
		</header>
		<div id="img_mem"></div>

		<nav id="nav_sub">
			<ul>
				<li><a href="quiz3_register.jsp"> 회원 가입 </a></li>
				<li><a href="modify.jsp"> 회원 수정 </a></li>
				<li><a href="delete.jsp"> 회원 탈퇴 </a></li>
				<li><a href="quiz3_login.jsp"> 로그인 </a></li>
				<li><a href="logout.jsp"> 로그아웃 </a></li>
			</ul>
		</nav>

		<article id="article_sub">
			<h1>회원 가입</h1>
			<form id="f">

				<fieldset class="fieldset_mem">
					<legend>기본 정보</legend>
					<label>아이디</label>
					<input type="text" name="id" id="id"><br>
					<label>패스워드</label>
					<input type="password" name="pw" id="pw"><br>
					<label>패스워드 확인</label> 
					<input type="password" name="confirm_pw" id="confirm_pw" onchange="pw_check()"> 
					<label id="check_text"></label><br> 
					<label>이름</label>
					<input type="text" name="name" id="name"><br>
				</fieldset>

				<fieldset class="fieldset_mem">
					<legend>부가 정보</legend>
					<label>이메일</label><input type="text" name="email" id="email"><br>
					<label>핸드폰</label><input type="text" name="mobile" id="mobile"><br>
					<label>주소</label><input type="text" name="address" id="address"><br>
				</fieldset>

				<div id="buttons_mem">
					<input type="button" class="submit_mem" value="회원 가입"	onclick="member_check()"> 
					<input type="reset"	class="cancel_mem" value="취소">
				</div>
			</form>
		</article>
		<footer>
			<hr>
			<div id="copy">
				<p>Copyright 2022 kyes Inc. all rights reserved contact mail :
					kyes0222@gmail.com Tel: +82 010-6315-6980</p>
			</div>

			<div id="social">
				<img src="/jsExam/images/facebook.gif"> 
				<img src="/jsExam/images/twitter.gif">
			</div>
		</footer>
	</div>
	<!-- wrap end -->
</body>
</html>

2. 본론

먼저 새로운 파일을 만들어보자.

jsp에는 header, 메인부내용이 들어갈 곳(가칭 member), footer 총 3개의 jsp파일

그리고 각각의 js와 css파일을 만들자.

파일 준비가 끝났다면 분할을 시작해 보자.

먼저 css와 js파일부터

2-1. css

css파일은 쉽다. <style></style> 태그 안에 내용을 <style>태그를 제외하고 전부 잘라내기 하여

css파일에 옮기면 된다.

@charset "UTF-8";

body{	background-color: #898989;	padding: 0; margin: 0; }
#wrap
{
	width : 950px;
	height: 1000px;
	background: white;
	margin: 0 auto;
}
a {text-decoration: none;}
ul{ list-style: none; }
header{	height : 200px; }

#login{	float : right;	margin: 10px;}
#login a { color : #333; text-decoration : none;}
#login a:hover{	color: #f90; }
#logo{	padding: 50px 0 0 50px; }
#logo a{ color: #f90; }
#logo a:hover{	color: #333; }
#header_nav {	float: right; margin-right: 50px;}
#header_nav ul li {display: inline; margin : 0 20px;}
#header_nav ul li a{	color : #333; 	font-size: 18px; }
#header_nav ul li a:hover
{
	background-image: url(/jsExam/images/blue.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}
#img_mem
{
	background-image: url(/jsExam/images/member/sub_back.png);
	width: 970px;
	height: 180px;
	position: relative;
	right: 10px;
}
#nav_sub{
	
	height: 400px;
	width: 27%;
	margin: 60px 10px 10px 10px;
	float: left;
}
#nav_sub ul li a
{
	font-size: 18px; 
	color: #333;
	display: block;
	width: 150px;
	height: 30px;
	padding: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	background-image: url(/jsExam/images/company/h_bullet.gif);
	background-repeat: no-repeat;
	background-position: right center;
}
#nav_sub ul li a:hover
{
	color: #f90;
	background-image: url(/jsExam/images/bullet_orange.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

#article_sub .fieldset_mem
{
	width: 570px;
	padding-left: 50px;
	margin: 20px;
}
#article_sub .fieldset_mem legend{ font-size: 18px; }
#article_sub .fieldset_mem label { float: left; width: 200px; margin: 5px;}
#article_sub .fieldset_mem #check_text{all : initial;}
#article_sub .fieldset_mem input 
{ 
	width: 200px; margin: 5px;
	background-color: #D4F4FA;
}
#buttons_mem
{
	margin: 20px;
	position: relative;
	left: 30px;
}
#buttons_mem .submit_mem, #buttons_mem .cancel_mem
{
	font-size: 16px;
	width: 270px;
	height: 40px;
	margin: 0px 10px;
}
#buttons_mem .submit_mem
{
	background-image: url(/jsExam/images/member/submit_back.jpg);
}
#buttons_mem .cancel_mem
{
	background-image: url(/jsExam/images/member/cancel_back.jpg);
}

#copy{	float : left;	font-size : 12px;}
#social{	float : right; }
#copy, #social { margin: 30px;}
footer{ margin: 20px 0px; }

2-2. js

js파일도 마찬가지 <script></script> 사이에 있는 코드를 전부 잘라내어

js파일에 옮기면 된다.

function member_check(){
	id = document.getElementById('id').value;
	pw = document.getElementById('pw').value;
	confirm_pw = document.getElementById('confirm_pw').value;
	name = document.getElementById('name').value;
	
	if(id == ""){
		alert('아이디는 필수 항목입니다.');
	}else if(pw == ""){
		alert('비밀번호는 필수 항목입니다.');
	}else if(confirm_pw == ""){
		alert('비밀번호 확인은 필수 항목입니다.');
	}else if(name == ""){
		alert('이름은 필수 항목입니다.');
	}else{
		document.getElementById('f').action = 'member_check.jsp';
		document.getElementById('f').submit();
	}
}
function pw_check(){
	pw = document.getElementById('pw');
	confirm_pw = document.getElementById('confirm_pw');
	if(pw.value == confirm_pw.value){
		document.getElementById('check_text').innerHTML = '일치';
	}
	else {
		document.getElementById('check_text').innerHTML = '불일치';
		pw.value="";
		confirm_pw.value="";
		confirm_pw.focus();
	}
}
function login_check(){
	id = document.getElementById('id').value;
	pw = document.getElementById('pw').value;
	
	if(id == ""){
		alert('아이디는 필수 항목입니다.');
	}else if(pw == ""){
		alert('비밀번호는 필수 항목입니다.');
	}else{
		document.getElementById('f').action = 'login_check.jsp';
		document.getElementById('f').method = 'post';
		document.getElementById('f').submit();
	}
}

2-3. jsp header 부분

먼저 header부분이다. 필자는 이 jsp에 css와 js파일을 싹다 끌어와줄 예정이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex28</title>

<!-- css 파일 가져오기 -->
<link rel = "stylesheet" href = "ex28.css">
<!-- 스크립트 파일 가져오기 -->
<script src = "ex28.js"></script>

</head>
<body>
	<div id="wrap">
		<header>
			<div id="login">
				<a href="#"> Login </a> <a href="#"> Membership </a>
			</div>
			<div id="logo">
				<h1>
					<a href="#">CARE LAB</a>
				</h1>
			</div>
			<nav id="header_nav">
				<ul>
					<li><a href="#">HOME</a></li>
					<li><a href="#">COMPANY</a></li>
					<li><a href="#">SOLUTIONS</a></li>
					<li><a href="#">CUSTOMER CENTER</a></li>
				</ul>
			</nav>
		</header>

2-4. jsp footer 부분

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
		<footer>
			<hr>
			<div id="copy">
				<p>Copyright 2022 kyes Inc. all rights reserved contact mail :
					kyes0222@gmail.com Tel: +82 010-6315-6980</p>
			</div>

			<div id="social">
				<img src="/jsExam/images/facebook.gif"> 
				<img src="/jsExam/images/twitter.gif">
			</div>
		</footer>
	</div>
	<!-- wrap end -->
</body>
</html>

2-5. jsp member부분

이제 남은 것은 member에 header와 footer를 연결하는 것.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%@ include file = "ex28_header.jsp" %>
<div id="img_mem"></div>

		<nav id="nav_sub">
			<ul>
				<li><a href="ex28_member.jsp"> 회원 가입 </a></li>
				<li><a href="modify.jsp"> 회원 수정 </a></li>
				<li><a href="delete.jsp"> 회원 탈퇴 </a></li>
				<li><a href="ex28_login.jsp"> 로그인 </a></li>
				<li><a href="logout.jsp"> 로그아웃 </a></li>
			</ul>
		</nav>

		<article id="article_sub">
			<h1>회원 가입</h1>
			<form id="f">

				<fieldset class="fieldset_mem">
					<legend>기본 정보</legend>
					<label>아이디</label>
					<input type="text" name="id" id="id"><br>
					<label>패스워드</label>
					<input type="password" name="pw" id="pw"><br>
					<label>패스워드 확인</label> 
					<input type="password" name="confirm_pw" id="confirm_pw" onchange="pw_check()"> 
					<label id="check_text"></label><br> 
					<label>이름</label>
					<input type="text" name="name" id="name"><br>
				</fieldset>

				<fieldset class="fieldset_mem">
					<legend>부가 정보</legend>
					<label>이메일</label><input type="text" name="email" id="email"><br>
					<label>핸드폰</label><input type="text" name="mobile" id="mobile"><br>
					<label>주소</label><input type="text" name="address" id="address"><br>
				</fieldset>

				<div id="buttons_mem">
					<input type="button" class="submit_mem" value="회원 가입"	onclick="member_check()"> 
					<input type="reset"	class="cancel_mem" value="취소">
				</div>
			</form>
		</article>
		
		<%@ include file = "ex28_footer.jsp" %>

이렇게 분할하여 합치게 될 경우 header와 footer가 다른 페이지에서 동일하게 적용이 된다면 그 다른 페이지만 손 봐서 header와 footer를 합치면 된다.

3. 결론

지금까지 하면서 자바스크립트를 하며 재미 좀 본 거 같다. 아마 저번 javaFX 팀프로젝트 진행하면서

마음가짐이 이게 되나? 보단 일단 해보자 라고 바뀐게 큰 듯 하다.

저작자표시

'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글

JSP - 기본문법 (2022-09-21) (1)	2022.09.21
JS - 네이버 회원가입 페이지 베끼는 퀴즈(2022-09-21) (0)	2022.09.20
JSP - JavaScript 비밀번호 길이 검사하는 퀴즈 (2020-09-16) (0)	2022.09.18
JSP - JavaScript window.open, close (2020-09-16) (0)	2022.09.18
JSP - JavaScript Alert과 confirm (2020-09-16) (0)	2022.09.18

상이태상의 도서관