본문 바로가기
학원/복기

[JSP] 지시어(Directive) - include

조가루 2023. 6. 22. 22:30

include 디렉티브 

 

include 디렉티브는 현재 서버에 존재하는 자원의 소스코드를 제공받아 JSP 문서에 포함하는 지시어이다. (정적포함)

JSP 페이지에서 다른 파일의 내용을 포함시키는 기능을 제공한다.

include 디렉티브를 사용하면 JSP 페이지에 다른 JSP 파일, HTML 파일, 텍스트 파일 등을 포함시킬 수 있다.

 

형식)

<%@ include file="파일경로" %>

 

file 속성에는 포함시킬 파일의 경로를 지정한다. 파일 경로는 상대 경로나 절대 경로로 지정할 수 있다.

상대 경로를 사용하는 경우 현재 JSP 페이지를 기준으로 파일의 위치를 지정하며, 절대 경로를 사용하는 경우 파일의 전체 경로를 지정한다.

 

include 디렉티브는 주로 반복적으로 사용되는 헤더, 푸터, 네비게이션 메뉴 등과 같은 공통 요소를 여러 개의 JSP 페이지에서 재사용하기 위해 활용된다. 이를 통해 코드의 중복을 줄이고 유지보수성을 높일 수 있다.

 

JSPF 파일

: 클라이언트 요청에 의한 실행이 아닌 다른 JSP 문서에 소스코드를 제공할 목적의 파일 (JSP 소스파일)

JSPF 파일은 클라이언트 요청에 의해 서블릿으로 변환되지 않는다.

주의) JSP 파일과 JSPF 파일에 선언된 page 디렉티브의 contentType 속성값이 반드시 동일해야한다. 

 

예제1)

 

[include_sub.jspf]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>
<p>클라이언트에게 응답될 아주 중요한 내용입니다.</p>

 

 

 

include 디렉티브의 file 속성에 현재 서버 자원의 URL 주소를 속성값으로 설정해준다.

만약 file 속성값으로 설정된 파일이 없는 경우 에러가 발생한다.

→  파일의 소스코드를 제공받아 include 디렉티브의 명령 위치에 포함한다.

 

[include_main.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
</head>
<body>
	<h1>include Directive</h1>
	<hr>
	<%@include file="include_sub.jspf" %> 
</body>
</html>

 

예제2)

 

[header.jspf] - Header 영역 

<%@ 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="login.jsp">로그인</a>&nbsp;&nbsp;
		<a href="join.jsp">회원가입</a>&nbsp;&nbsp;
		<a href="cart.jsp">장바구니</a>&nbsp;&nbsp;
		<a href="review.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 ©garu 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: 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;
}

 

[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>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
	<%-- Header 영역 : 페이지 머릿부 - 로고, 메뉴 등 --%>
	<div id="header">
		<%@include file="header.jspf" %>
	</div>
	
	<%-- Contents 영역 : 페이지 몸체부 - 요청에 의한 실행 결과 --%>
	<div id="content">
		<h2>메인페이지 - 제품목록</h2>
	</div>
	
	<%-- Footer 영역 : 페이지 꼬릿부 - 저작권, 약관, 개인정보 보호정책 등 --%>
	<div id="footer">
		<%@include file="footer.jspf" %>
	</div>
</body>
</html>

 

[login.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>
	<div id="header">
		<%@include file="header.jspf" %>
	</div>
	
	<div id="content">
		<h2>회원가입 페이지 - 회원정보 입력</h2>
	</div>
	 
	<div id="footer">
		<%@include file="footer.jspf"%>
	</div>
</body>
</html>

 

 

[join.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>
	<div id="header">
		<%@include file="header.jspf" %>
	</div>
	
	<div id="content">
		<h2>회원가입 페이지 - 회원정보 입력</h2>
	</div>
	 
	<div id="footer">
		<%@include file="footer.jspf"%>
	</div>
</body>
</html>

 

[cart.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>
	<div id="header">
		<%@include file="header.jspf" %>
	</div>
	
	<div id="content">
		<h2>장바구니 페이지 - 장바구니에 담긴 제품 목록</h2>
	</div>
	 
	<div id="footer">
		<%@include file="footer.jspf"%>
	</div>
</body>
</html>

 

[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>
	<div id="header">
		<%@include file="header.jspf" %>
	</div>
	
	<div id="content">
		<h2>리뷰 페이지 - 제품후기 목록</h2>
	</div>
	 
	<div id="footer">
		<%@include file="footer.jspf"%>
	</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'학원 > 복기' 카테고리의 다른 글

[JSP] 내장객체(Implicit Object)  (0) 2023.06.23
[JSP] 지시어(Directive) - taglib  (0) 2023.06.22
[JSP] 지시어(Directive) - page  (0) 2023.06.21
[JSP] 스크립트 요소(Script Element)  (0) 2023.06.20
[JSP] JSP란?  (0) 2023.06.20

'학원/복기' Related Articles

티스토리툴바