코드일기장

[JSP] include 디렉티브 태그의 기능과 사용법 본문

JSP

[JSP] include 디렉티브 태그의 기능과 사용법

won_hyeok2 2022. 7. 21. 15:46

 

 

  include 디렉티브 태그는 현재 JSP 페이지의 특정 영역에 외부 파일의 내용을 포함하는 태그이다. 여기서 외부 파일은 HTML, JSP, 텍스트 파일 등이다. 

  include 디렉티브 태그는 JSP 페이지 어디서든 선언할 수 있다.

 

<%@ include file="파일명.파일형식" %>

 

  디렉티브에 대해 다시 설명하면 디렉티브 태그는 JSP 페이지가 서블릿 프로그램에서 서블릿 클래스로 변환될 때 JSP 페이지와 관련된 정보를 JSP 컨테이너에게 지시하는 메시지이다.  디렉티브 태그는 세 종류이며 모두 <%@  내용들 %>의 형식이다.

 

디렉티브 태그 형식 설명
page <%@ page . . . %> JSP 페이지에 대한 정보를 설정한다.
include <%@ include . . . %> JSP 페이지의 특정영역에 다른 문서를 포함한다.
teglib <%@ teglib . . . %> JSP 페이지에서 사용할 태그 라이브러리를 설정한다.

 

 

  

<%@ include file="파일명.파일형식" %>

  file 속성 값은 현재 JSP 페이지에 포함할 내용을 가진 외부 파일명이다. 만약 현재 JSP 파일의 위치와 file 속성 값은 파일이 같은 디렉터리에 존재하면 파일명만 적으면 된다. 그렇지 않으면 전체 URL (또는 상대 경로)를 설정해야 한다.

 

 

<%@ include file="loop.jsp" %>
<%@ include file="../JSPFiles/user_inputnumber.jsp" %>

  두 번째 줄 코드는 상대경로(내 파일이 있는 위치를 기준)를 지정해 user_inputnumber.jsp 파일을 찾은 것이다.

 

 

 

 

 

 

  include 디렉티브 태그를 왜 사용할까? 

 

  만약 100개의 JSP 페이지에서 꼭 사용하는 바닥글 형식이 있다고 치면, 100개의 JSP페이지를 공통된 코드를 하나하나 복사 붙이기를 하기 번거롭고, 시간낭비이다. 또 공통된 바닥글 형식의 파일이 에러가 생겨 수정해야 하는 경우가 생기면 100개의 JSP 페이지에 복사 붙여 넣기 한 부분을 다 수정해야 한다. 위와 같은 문제를 해결하기 위해 include를 사용하는 것이다. include를 사용하면 단 한 번만 수정, 1줄의 코드로 100개의 JSP페이지에 모두 적용시킬 수 있다.

 

  이처럼 include 디렉티브 태그를 사용해 코드의 재사용성 향상할 수 있다. 또 웹 페이지를 모듈화 할 수 있어 유지 보수 측면에서 매우 유용하다.

 

 

 

 

 

 

[그림 1.] include 디렉티브 태그 실행 과정

 

 

 

 

 

[jspPage.jsp]

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

<body>
	<p>jspPage.jsp입니다.</p>
	<%@ include file="includeTest.jsp"%>
	<hr>
	<p>---현재 페이지---</p>
</body>

</html>

 

 

 

 

[includeTest.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" 
	trimDirectiveWhitespaces="true" info="jsp inclued test" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<strong>이 부분은 includeTest.jsp페이지의 내용입니다.</strong>

</body>
</html>

 

jspPage 실행 결과

 

 

 

  이런 식으로 사용하면 된다. 사용하는 방법은 매우 쉽다. 

 

 

 

 

 

 

 

웹 페이지 모듈화 예시)

더보기

[jspPage.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<header>
		<%@ include file="jspHeader.jsp" %>
	</header>
	<article>
		<%@ include file="article.jsp" %>
		<h2>안녕하세요!</h2>
	</article>
</body>
</html>

 

 

 

 [jspHeader.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	*{
		margin: 0;
		padding:0;
	}
	header{
		background-color: #354259;
		display:flex;
		justify-content: center;
		align-items: center;
		height:150px;
		width:100%;
		color:white;
	}
	ul{
		color:white;
		width:100%;
		display:flex;
		justify-content: space-evenly;
		
	}
</style>
</head>
<body>

	<header>	
			<ul>
				<li>문서</li>
				<li>홈</li>
				<li>로그인</li>
			</ul>
	</header>

</body>
</html>

 

 

 

 [article.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		height: 500px;
		width: 100%;
		background-color: #C2DED1;
	}
</style>
</head>

<body>



</body>
</html>

 

 

   이처럼 웹 문서를 모듈화 시켜 header는 header에서만 관리 본문은 본문에서만 관리 등 유지보수 측면과 코드의 가독성이 증가한다.

 

 

 

 

 

 

 

 

 

커버사진

<a href="https://www.flaticon.com/kr/free-icons/" title="자바 아이콘">자바 아이콘  제작자: Freepik - Flaticon</a>

https://www.flaticon.com/kr/free-icon/jsp-open-file-format-with-java-logo_28968

 

 

 

'JSP' 카테고리의 다른 글

[JSP] forward, include 액션 태그  (0) 2022.08.04
[JSP] request 기본 객체  (0) 2022.03.07
[JSP] 스크립트 요소  (0) 2022.03.01
[JSP] page 디렉티브  (0) 2022.02.28
[JSP] JSP에서 HTML 문서 생성하는 기본 구조  (0) 2022.02.28
'JSP' Related Articles more
Comments