🌟include Directive
→ 웹서버에 존재하는 문서파일의 소스코드를 현재 JSP 문서에 포함다는 지시어 - 정적포함
📌 include Directive의 file 속성값으로 동일 서버에 저장된 문서파일의 URL 주소 설정
→ file 속성값으로 설정된 문서파일이 없는 경우 에러 발생
→ 문서파일의 소스코드를 include Directive 명령 위치에 포함하여 실행<%@include file="include_sub.jspf" %>📃include_main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSP</title> </head> <body> <h1>include Directive</h1> <hr> <p>웹서버에 존재하는 문서파일의 소스코드를 현재 JSP 문서에 포함다는 지시어 - 정적포함</p> <hr> <%-- <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> --%> <%-- include Directive의 file 속성값으로 동일 서버에 저장된 문서파일의 URL 주소 설정 --%> <%-- → file 속성값으로 설정된 문서파일이 없는 경우 에러 발생 --%> <%-- → 문서파일의 소스코드를 include Directive 명령 위치에 포함하여 실행 --%> <%@include file="include_sub.jspf" %> </body> </html>
◈확장자명을 jspf로 생성
📌 JSPF 파일 : 클라이언트 요청에 의한 실행이 목정이 아닌 다른 JSP 문서에 소스코드를 제공하기 위한 파일
주의) JSP 파일과 JSPF 파일에 선언된 page Directive의 contentType 속성값이 반드시 동일📃include_sub.jspf
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%-- JSPF 파일 : 클라이언트 요청에 의한 실행이 목정이 아닌 다른 JSP 문서에 소스코드를 제공하기 위한 파일 --%> <%-- 주의) JSP 파일과 JSPF 파일에 선언된 page Directive의 contentType 속성값이 반드시 동일 --%> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p> <p>클라이언트에게 응답되는 아주 중요한 내용입니다.</p>
🎨include Directive로 간단한 사이트 만들기
🔊 link 태그를 위용하여 style.css 불러오기
🔊 include Directive를 이용하여 Header.jspf/footer.jspf 파일 불러오기
📃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>
📃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>📃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>📃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>📃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>📃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: 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; }📃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>
