jsp

[jsp] 3. Include Directive를 통한 사이트 구축 (중형사이트에 최적)

jeri 2024. 7. 4. 22:23
반응형
  • 메인페이지 이름은? : index.jsp (index라는 이름은 기본적으로 클라가 웹문서를 요청하지 않아도 응답할 수 있음)
  • 공통적으로 사용하는 부분은 외부파일로 만들어 불러와서 포함시킴 (header.jsp, footer.jsp)

 

index.jsp 요청 - @inlcude 지시어 이용

company.jsp 요청 - @inlcude 지시어 이용

product.jsp 요청 - @inlcude 지시어 이용

review.jsp 요청 - @inlcude 지시어 이용

event.jsp 요청 - @inlcude 지시어 이용

 

01. index.jsp(메인페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<!--
<%-- 
<style type="text/css">
div { margin: 5px; padding: 5px;}
#header { height: 200px; border: 1px solid red;}
#header h1 { text-align: center;}
#menu { font-size: 1.5em; text-align: right;}
#menu a, #menu a:visited { text-decoration: none; color: black;}
#menu a:hover { color: orange;}
#content { min-height: 500px; border: 1px solid green; text-align: center;}
#footer { height: 150px; border: 1px solid blue; text-align: center; font-size: 1.2em;}
</style>
--%>
-->
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--
	<%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
	<%-- 
	<div id="header">
		<h1><a href="index.jsp">쇼핑몰</a></h1>
		<div id="menu">
			<a href="company.jsp">회사소개</a>&nbsp;&nbsp;
			<a href="product.jsp">제품소개</a>&nbsp;&nbsp;
			<a href="review.jsp">사용후기</a>&nbsp;&nbsp;
			<a href="event.jsp">이벤트</a>&nbsp;&nbsp;
		</div>
	</div>
	--%>
-->
	<%@include file="header.jspf"%>
<!--	
	<%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
-->
	<div id="content">
		<h2>메인 페이지</h2>
	</div>
<!--	
	<%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
	<%-- 
	<div id="footer">
		<p>Copyright ©itwill Corp. All rights reserved.</p>
	</div>
	--%>
-->
	<%@include file="footer.jspf" %>
</body>
</html>
header.jspf
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="header">
	<h1><a href="index.jsp">쇼핑몰</a></h1>
	<div id="menu">
		<a href="company.jsp">회사소개</a>&nbsp;&nbsp;
		<a href="product.jsp">제품소개</a>&nbsp;&nbsp;
		<a href="review.jsp">사용후기</a>&nbsp;&nbsp;
		<a href="event.jsp">이벤트</a>&nbsp;&nbsp;
	</div>
</div>
footer.jspf
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="footer">
	<p>Copyright ©itwill Corp. All rights reserved.</p>
</div>
style.css
@charset "UTF-8";
/* 프로그램마다 공통적인 스타일 속성 적용하는 스타일 시트 */
div{ margin: 5px; padding: 5px; }
#header{ height: 200px; border: 1px solid red; }
#header h1{ text-align: center; }
#menu{ font-size: 1.5em; text-align: right; }
#menu a, #menu a:visited{ text-decoration: none; color: black; }
#menu a:hover { color: lime; }
#content { min-height: 500px; border: 1px solid green; text-align: center; }
#footer{ height: 150px; border: 1px solid blue; text-align: center; font-weight: 1.2em; }

02. company.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
//	<%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
	<%@include file="header.jspf"%>
	
//	<%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
	<div id="content">
		<h2>회사소개 페이지</h2>
	</div>
	
//	<%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
	<%@include file="footer.jspf" %>
</body>
</html>

03. product.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
//	<%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
	<%@include file="header.jspf"%>
	
//	<%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
	<div id="content">
		<h2>제품소개 페이지</h2>
	</div>
	
//	<%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
	<%@include file="footer.jspf" %>
</body>
</html>

04. review.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
//	<%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
	<%@include file="header.jspf"%>
	
//	<%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
	<div id="content">
		<h2>사용후기 페이지</h2>
	</div>
	
//	<%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
	<%@include file="footer.jspf" %>
</body>
</html>

05. event.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
//	<%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
	<%@include file="header.jspf"%>
	
//	<%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
	<div id="content">
		<h2>이벤트 페이지</h2>
	</div>
	
//	<%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
	<%@include file="footer.jspf" %>
</body>
</html>
반응형