Languages/jsp

[JSP] 프로젝트로 배우는 자바 웹 프로그래밍 번외 페이지 모듈화

환테크 2021. 10. 26. 17:19
반응형

 

 

 

 

 

 

 

 

페이지 모듈화를 통한 효과적인 개발 방법

 

 

 

 

 

 

 

 

 

필요한 jsp

 

 

 

 

 

 

05main.jsp

 

 

 

<%@ page contentType = "text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>main</title>
	<link rel="stylesheet" href="05style.css">
</head>
<body>


<header>
	<%@ include file="05top.jsp"%> 
</header>

<section>
	<a>main</a>
</section>

<footer>
	<jsp:include page="05footer.jsp" flush="false" />
</footer>
</body>
</html>

 

 

 

 

05footer.jsp

 

 

<%@ page contentType = "text/html; charset=utf-8"%>

<p>
Copyright DONGYANG ALL Rights Reserved.
</p>

 

 

 

05top.jsp

 

 

<%@ page contentType = "text/html; charset=utf-8"%>

<h4> 메뉴 : 홈 <a href="05sub.jsp">학과소개</a> 커뮤니티 오시는 길 </h4>

 

 

 

05style.jsp

 

 

@charset "UTF-8";
header {height : 100px;
		background-color:yellow;}
section {height: 700px;
		background-color:green;}
footer {height: 100px;
		background-color:orange;}

 

 

05sub.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>
<link rel="stylesheet" href="05style.css">
</head>
<body>

<header>
	<jsp:include page="05top.jsp" flush="false" />
</header>

<section>
	<h2> sub page </h2>
	<img src="img/blue.jpg">
</section>

<footer>
	<jsp:include page="05footer.jsp" flush="false" />
</footer>
</body>
</html>0

 

 

 

 

페이지 모듈화를 하지 않은 05main2.jsp

 

 

 

<%@ page contentType = "text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>main</title>
	<link rel="stylesheet" href="05style.css">
</head>
<body>


<header>
	<h4> 메뉴 : 홈 <a href="05sub.jsp">학과소개</a> 커뮤니티 오시는 길 </h4>
</header>

<section>
	<h2> main page</h2>
</section>

<footer>
	<p>
	Copyright DONGYANG ALL Rights Reserved.
	</p>
</footer>
</body>
</html>

 

 

 

 

실행결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ye!!!!!~~~~~~~~~~

앞으로 손 쉬운 코딩~~

 

 

반응형