728x90
반응형
[ Include Action Tag ]
페이지 상에 동적인 페이지와 정적인 페이지를 구분하여, 효율을 높이기 위한 jsp tag이다.
(Tiles Framework도 이와 같은 기능을 한다.)
기본 문법
<jsp:include page="[include-page path]">
<jsp:param value="[page에 전송할 value]" name="[전송할 때 부여할 name]"/>
</jsp:include>
* include 대상 파일은 실제 필요한 부분 (html 부분) 만 기술한다. ( + jsp 선언부 )
(그렇지 않으면 '페이지 소스보기'에서 보았을 때 확인할 수 있듯, html이 header, main, footer 등 여러 개로 얽힐 수 있다.)
적용 예제 (+bootstrap nav, grid)
/header.jsp
nav 적용
<!-- jsp 선언부 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- html code -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main1.jsp">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="main1.jsp">Home</a></li>
<li><a href="main2.jsp">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
/main1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 부트스트랩 선언부 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.content {
height: 400px;
}
/*footer tag 꾸미기*/
footer {
background-color: black;
color: white;
padding: 15px;
}
</style>
<title>main1</title>
</head>
<body>
<!-- header.jsp include -->
<jsp:include page="header.jsp"></jsp:include>
<div class="content">메인1 화면입니다.</div>
<!-- footer.jsp include -->
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
/main2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 부트스트랩 선언부 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.content {
height: 400px;
}
/*footer tag 꾸미기*/
footer {
background-color: black;
color: white;
padding: 15px;
}
</style>
<title>main1</title>
</head>
<body>
<!-- footer.jsp include -->
<jsp:include page="header.jsp"></jsp:include>
<div class="content">메인2 화면입니다.</div>
<!-- footer.jsp include -->
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
/footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<footer>
<p>Footer Text</p>
</footer>
브라우저 결과 화면
728x90
반응형
'Java Web Programming > 4. JSP' 카테고리의 다른 글
| [JSP] Semi-Project | Model2 MVC 기반 고객관리 웹어플리케이션 (회원가입, 로그인) (0) | 2020.09.16 |
|---|---|
| [UML] Use Case Diagram (유즈케이스 다이어그램) (0) | 2020.09.15 |
| [JSP] Forward ActionTag 액션태그 응용 (DB 연동) (0) | 2020.09.15 |
| [JSP] Forward ActionTag 기본 (2) | 2020.09.15 |
| [부트스트랩/BootStrap] 반응형 웹, 미디어쿼리, 부트스트랩(그리드, 테이블) (0) | 2020.09.14 |
