반응형
- 메인페이지 이름은? : index.jsp (index라는 이름은 기본적으로 클라가 웹문서를 요청하지 않아도 응답할 수 있음)
- 공통적으로 사용하는 부분은 외부파일로 만들어 불러와서 포함시킴 (header.jsp, footer.jsp)
index.jsp 요청 - @inlcude 지시어 이용
company.jsp 요청 - @inlcude 지시어 이용
product.jsp 요청 - @inlcude 지시어 이용
review.jsp 요청 - @inlcude 지시어 이용
event.jsp 요청 - @inlcude 지시어 이용
01. index.jsp(메인페이지)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<!--
<%--
<style type="text/css">
div { margin: 5px; padding: 5px;}
#header { height: 200px; border: 1px solid red;}
#header h1 { text-align: center;}
#menu { font-size: 1.5em; text-align: right;}
#menu a, #menu a:visited { text-decoration: none; color: black;}
#menu a:hover { color: orange;}
#content { min-height: 500px; border: 1px solid green; text-align: center;}
#footer { height: 150px; border: 1px solid blue; text-align: center; font-size: 1.2em;}
</style>
--%>
-->
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--
<%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
<%--
<div id="header">
<h1><a href="index.jsp">쇼핑몰</a></h1>
<div id="menu">
<a href="company.jsp">회사소개</a>
<a href="product.jsp">제품소개</a>
<a href="review.jsp">사용후기</a>
<a href="event.jsp">이벤트</a>
</div>
</div>
--%>
-->
<%@include file="header.jspf"%>
<!--
<%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
-->
<div id="content">
<h2>메인 페이지</h2>
</div>
<!--
<%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
<%--
<div id="footer">
<p>Copyright ©itwill Corp. All rights reserved.</p>
</div>
--%>
-->
<%@include file="footer.jspf" %>
</body>
</html>header.jspf
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="header">
<h1><a href="index.jsp">쇼핑몰</a></h1>
<div id="menu">
<a href="company.jsp">회사소개</a>
<a href="product.jsp">제품소개</a>
<a href="review.jsp">사용후기</a>
<a href="event.jsp">이벤트</a>
</div>
</div>footer.jspf
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="footer">
<p>Copyright ©itwill Corp. All rights reserved.</p>
</div>style.css
@charset "UTF-8";
/* 프로그램마다 공통적인 스타일 속성 적용하는 스타일 시트 */
div{ margin: 5px; padding: 5px; }
#header{ height: 200px; border: 1px solid red; }
#header h1{ text-align: center; }
#menu{ font-size: 1.5em; text-align: right; }
#menu a, #menu a:visited{ text-decoration: none; color: black; }
#menu a:hover { color: lime; }
#content { min-height: 500px; border: 1px solid green; text-align: center; }
#footer{ height: 150px; border: 1px solid blue; text-align: center; font-weight: 1.2em; }02. company.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
// <%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
<%@include file="header.jspf"%>
// <%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
<div id="content">
<h2>회사소개 페이지</h2>
</div>
// <%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
<%@include file="footer.jspf" %>
</body>
</html>03. product.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
// <%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
<%@include file="header.jspf"%>
// <%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
<div id="content">
<h2>제품소개 페이지</h2>
</div>
// <%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
<%@include file="footer.jspf" %>
</body>
</html>04. review.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
// <%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
<%@include file="header.jspf"%>
// <%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
<div id="content">
<h2>사용후기 페이지</h2>
</div>
// <%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
<%@include file="footer.jspf" %>
</body>
</html>05. event.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
// <%-- Header 영역 : 로고, 메뉴 등 출력하기 위한 영역 --%>
<%@include file="header.jspf"%>
// <%-- Content 영역 : 요청에 대한 처리결과를 출력하기 위한 영역 --%>
<div id="content">
<h2>이벤트 페이지</h2>
</div>
// <%-- Footer 영역 : 저작권, 약관, 개인정보 보호정책 등을 출력하기 위한 영역 --%>
<%@include file="footer.jspf" %>
</body>
</html>반응형
'jsp' 카테고리의 다른 글
| [jsp] 6. JSP 내장객체의 사용범위(Scope) (0) | 2024.07.06 |
|---|---|
| [jsp] 5. JSP 내장객체 (0) | 2024.07.05 |
| [jsp] 4. 커스텀 태그 클래스 등록해 사용하는 법 (taglib Directive) (0) | 2024.07.05 |
| [jsp] 2. JSP구성요소 (스크립팅요소 | 지시어 | 표준액션태그) (0) | 2024.07.04 |
| [jsp] 1. JSP(Java Server Page)의 개념 (0) | 2024.07.04 |
