inlcude
top.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>
<style>
header{
height:100px;
background-color: pink;
}
</style>
<header>
<h1>TOP</h1>
</header>
<%
String name="코코";
%>
</body>
</html>
footer.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>
<style>
footer{
height:50px;
background-color: lightblue;
}
</style>
<footer>
FOOTER
</footer>
</body>
</html>
include_jsp_main.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>
section{
width:70%;
background-color:aqua;
margin:0 auto;
}
</style>
</head>
<body>
<!-- top.jsp파일 include하기 -->
<!-- 액션태그 -->
<jsp:include page="top.jsp"/>
<section>
<!-- top.jsp에 있는 변수 name을 사용할 수 없음
<%//=name //top.jsp의 데이터 호환X%>
-->
<img src="../img/coco.jpg" style="width:400px"/>
</section>
<jsp:include page="footer.jsp"/>
</body>
</html>
jsp 파일 iclude하기
<jsp:include page="top.jsp"/>
<jsp:include page="footer.jsp"/>
include_jsp_main.jsp를 실행시켜 소스코드를 확인해 보면
top.jsp와 footer.jsp의 html이 그대로 들어가있는 것을 볼 수 있다.
한 파일에 작성한 것 처럼 보이기 위해 body, html 태그들은 모두 지워주고
필요한 태그만 남겨두어 include 해준다. (지시부 <@% %>는 남겨두기!)
또한 top, footer 파일에 작성한 style 코드를 (header, footer)
include_jsp_main.jsp의 stylesheet에 작성해도 스타일 적용이 된다.
외부 css 파일에 작성해서 링크를 걸어줘도 상관 없다.
<style>
header{
height:100px;
background-color: pink;
}
section{
width:70%;
background-color:aqua;
margin:0 auto;
}
footer{
height:50px;
background-color: lightblue;
}
</style>
jspf
jspf 조각 파일을 데이터를 호환한다.
top.jspf에서 선언한 name, tel 변수를 사용할 수 있음
top.jspf
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String name = "박코코";
String tel = "010-1111-2222";
%>
<div id="topDiv">
<h1>JSPF TOP</h1>
</div>
footer.jspf
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<style>
#footerDiv{
height:100px;
background-color: lightblue;
}
</style>
<div id="footerDiv">
FOOTER<br/>
이름 : <%=name %>, 연락처 : <%=tel %>
</div>
include_jspf_main.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>
#container{
width:800px;
margin:0 auto;
background-color: #ddd;
}
</style>
</head>
<body>
<!-- top include -->
<%@ include file = "top.jspf" %>
<div id="container">
<h1>메인 페이지</h1>
이름 : <%=name %><br/>
연락처 : <%=tel %>
</div>
<!-- footer include -->
<%@ include file="footer.jspf" %>
</body>
</html>
jspf 파일을 사용하면 이름, 연락처 데이터 모두 호환이 가능한 것을 볼 수 있다.
jspf include 방법
<jsp:include page="top.jsp"/>
<jsp:include page="footer.jsp"/>
'Backend > JSP' 카테고리의 다른 글
| [JSP] JSTL - redirect (0) | 2022.03.07 |
|---|---|
| [JSP] JSTL - forEach, forTokens, url (0) | 2022.03.07 |
| [JSP] JSTL - if, choose(when, otherwise) (0) | 2022.03.07 |
| [JSP] JSTL - set, remove (0) | 2022.03.03 |
| [JSP] Session (0) | 2022.03.03 |
