[JSP] header와 footer를 jsp파일로 나누어 관리하기

IT/JSP

[JSP] header와 footer를 jsp파일로 나누어 관리하기

D아노말리 2021. 5. 12. 21:14

웹페이지 작업을 하다 보면 header와 footer를 다른 파일에서도 동일하게 작업하게 될 때가 있다.

그럴 때 <jsp:include> 태그를 이용하면 좀 더 수월하게 관리할 수 있다.

수정 전 : index.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>
		<h1>HEADER영역 타이틀</h1>
		<nav>
			<ul>
				<li>프블로그</li>
				<li>블로그</li>
				<li>방명록</li>
			</ul>		
		</nav>
	</header>
	<section>
		<p>페이지 내용</p>
	</section>
	<footer>
		<hr>
		<h4>FOOTER 내용</h4>
	</footer>
</body>
</html>

위의 코드에서 <header>와 <footer>는 다른 페이지에서 작업할때 동일한 <header>와 <footer>는 동일하게 필요한 경우가 생긴다. 이 때, 위 <header>태그 부분과 <footer>태그 부분을 jsp파일로 분리하여 <jsp:include>를 이용하여 유지보수가 쉽도록 만들 수 있다.

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<header>
	<h1>HEADER영역 타이틀</h1>
	<nav>
		<ul>
			<li>프블로그</li>
			<li>블로그</li>
			<li>방명록</li>
		</ul>		
	</nav>
</header>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<footer>
	<hr>
	<h4>FOOTER 내용</h4>
</footer>

수정 후 : index.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>
	<jsp:include page="header.jsp"></jsp:include>
	<section>
		<p>페이지 내용</p>
	</section>
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

header.jsp와 footer.jsp로 분리하고 나면 위와 같이 중복 되는 header와 footer를 어디에서든 불러와 사용할 수 있으며 분리된 header와 footer를 추후 수정하기 쉬워지므로 유지보수면에서도 좋다고 할 수 있다.