layout(info,main,menu,title)
info.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div style="font-size: 12pt; line-height: 25px;">
<span class="glyphicon glyphicon-user">쌍용교육센터</span><br>
<span class="glyphicon glyphicon-phone-alt">02-1111-7895</span><br>
<span class="glyphicon glyphicon-map-marker">서울시 강남구</span><br>
<span class="glyphicon glyphicon-envelope">sist@gmail.com</span><br>
<span class="glyphicon glyphicon-barcode" style="font-size: 20px;"></span>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
img.mainimg {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<!-- indexd에서 main을 가져왔기에 ../image할 필요가 없다 -->
<img alt="" src="image/logo.png" class="mainimg">
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
menu.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<title>Insert title here</title>
</head>
<%
//프로젝트 경로구하기
String root=request.getContextPath();
%>
<body>
<a href="<%=root%>/">메인</a>
<a href="<%=root%>/">로그인</a>
<a href="<%=root%>/index.jsp?main=member/memberform.jsp">회원</a>
<a href="<%=root%>/">방명록</a>
<a href="<%=root%>/">Q&A</a>
<a href="<%=root%>/">답변형게시판</a>
<a href="<%=root%>/">상품등록게시판</a>
</body>
</html> --%>
<!DOCTYPE html>
<html class="csstransforms no-csstransforms3d csstransitions"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Responsive Drop Down Menu jQuery CSS3 Using Icon Symbol</title>
<link rel="stylesheet" type="text/css" href="menu/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="menu/css/menu.css">
<script type="text/javascript" src="menu/js/jquery.js"></script>
<script type="text/javascript" src="menu/js/function.js"></script>
</head>
<%
//프로젝트 경로구하기
String root=request.getContextPath();
%>
<body>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="http://www.freshdesignweb.com"><img src="menu/images/logo.png" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item"><a href="http://www.freshdesignweb.com">Home</a></li>
<li class="parent">
<a href="#">Member</a>
<ul class="sub-menu">
<li><a href="<%=root%>/index.jsp?main=member/memberform.jsp"><i class="icon-wrench"></i> 회원가입</a></li>
<li><a href="<%=root%>/index.jsp?main=member/memberlist.jsp"><i class="icon-credit-card"></i> 회원명단</a></li>
</ul>
</li>
<li><a href="#">로그인</a></li>
<li class="parent">
<a href="#">방명록</a>
<ul class="sub-menu">
<li><a href="#">방명록</a></li>
<li><a href="#">Q&A</a></li>
</ul>
</li>
<li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">고객게시판</a>
<ul class="sub-menu">
<li><a href="#"><i class="icon-wrench"></i> 게시판</a></li>
<li><a href="#"><i class="icon-credit-card"></i> 고객의 소리 </a></li>
</ul>
</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</div>
</body></html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
title.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
</head>
<%
//프로젝트 경로 구하기
String root=request.getContextPath();
%>
<body>
<a href="<%=root%>/index.jsp">
<img alt="" src="<%=root%>/image/a02.png" hspace="20" width="70">
JSP Mini Project</a>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
div.layout {
border: 0px solid gray; /* 겹치는지 확인,, 안 겹치면 0px로 */
position: absolute;
}
div.title {
width: 100%;
height: 80px;
line-height: 80px;
font-size: 30px;
font-family: 'Do Hyeon';
text-align: center;
}
div.menu {
width: 100%;
height: 80px;
line-height: 80px;
font-size: 20px;
font-family: 'Do Hyeon';
text-align: center;
top: 80px;
}
div.info {
width: 170px;
height: 200px;
line-height: 10px;
font-size: 15pt;
font-family: 'Do Hyeon';
left: 30px;
top: 300px;
padding: 20px 10px;
border: 5px groove lightgray;
border-radius: 30px;
}
div.main {
width: 1200px;
height: 700px;
font-size: 14pt;
font-family: 'Do Hyeon';
left: 300px;
top: 200px;
}
a,a:hover {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<%
//프로젝트 경로 구하기
String root=request.getContextPath();
String mainPage="layout/main.jsp"; //기본페이지
//url을 통해서 main값을 읽어서 출력
if(request.getParameter("main")!=null){
mainPage=request.getParameter("main");
}
%>
<div class="layout title">
<jsp:include page="layout/title.jsp"/>
</div>
<div class="layout menu">
<jsp:include page="layout/menu.jsp"/>
</div>
<div class="layout info">
<jsp:include page="layout/info.jsp"/>
</div>
<div class="layout main">
<jsp:include page="<%=mainPage%>"/>
</div>
</body>
</html>