[JSP] Layout

Gabriela·2023년 9월 15일

JSP

목록 보기

11/20

Layout

Jsp 액션 태그

스크립트릿(Scriptlet)에 작성하는 자바 코드 대신 사용할 수 있는 Jsp 태그

웹 디자이너들의 입장에서 좀 더 쉬운 형태로 자바 기능을 제공하는 개념

prefix로 'jsp'를 사용함

주요 Jsp 액션 태그

태그	의미
<jsp:include>	다른 Jsp를 현재 Jsp에 포함시키는 태그
<jsp:param>	<jsp:include> 태그의 하위 태그로 포함할 Jsp에 파라미터를 전달하는 태그
<jsp:forward>	RequestDispatcher 클래스의 forward 기능을 수행하는 태그
<jsp:useBean>	객체 생성(new) 태그
<jsp:setProperty>	Setter
<jsp:getProperty>	Getter

기본 경로(web root 경로) : context path까지를 web root 경로로 본다.
- 예)

프로젝트 속성에서 Assembly 확인하는 방법

/ : 최상위 경로, context path를 의미

‣ 활용 예제

Header 출력 예시

<%@page import="java.util.Optional"%>
<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%-- request : 선언을 하지 않고 사용 가능한 9가지 JSP 내장 객체 중 하나 --%>
<% 
  request.setCharacterEncoding("UTF-8"); 
  Optional<String> opt = Optional.ofNullable(request.getParameter("title"));
  String title = opt.orElse("환영합니다!");
 
  // ContextPath(/JSP)를 변수처리
  String contextPath = request.getContextPath();
%>
<title><%=title%></title> 
<!-- 스크립트 추가 순서 1.jQuery 2.스크립트 3.링크 -->
<script src="<%=contextPath%>/resource/js/lib/jquery-3.7.1.min.js"></script> <!-- jQuery 라이브러리를 추가 (jQuery기반의 코드가 많기 때문에 항상 jQuery를 먼저 포함) -->
<script src="<%=contextPath%>/resource/js/header.js?dt=<%=System.currentTimeMillis()%>"></script>  <!-- header.js 추가 -->
<link rel="stylesheet" href="<%=contextPath%>/resource/css/header.css?dt=<%=System.currentTimeMillis()%>">  <!-- 맨 뒤에 물음표(?) : 사용하진 않지만 캐싱을 회피하는 방법 / dt=타임스탬프로 자동화 (ver과 dt를 제일 많이 사용) -->
<link rel="stylesheet" href="<%=contextPath%>/resource/css/main.css?dt=<%=System.currentTimeMillis()%>">
<link rel="stylesheet" href="<%=contextPath%>/resource/css/footer.css?dt=<%=System.currentTimeMillis()%>">
</head>
<body>  
  <nav class="gnb">  <!-- <nav> 태그 : 메뉴를 만드는 <div> -->
    <div class="logo"></div>
    <ul>
      <li><a href="main1.jsp">main1</a></li>
      <li><a href="main2.jsp">main2</a></li>
      <li><a href="main3.jsp">main3</a></li>
    </ul>
  </nav>

(캐싱 ‣ 완성 이후엔 지우고 배포)

Main

main1 출력 예시

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<% request.setCharacterEncoding("UTF-8"); %>
   
<%-- header.jsp로 값을 보내줄 수 있는 jsp액션 태그 --%>    
<jsp:include page="header.jsp">
  <jsp:param value="정치" name="title"/>
</jsp:include>

  <div class="main">
    <h1>정치</h1>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in lobortis lorem, quis vehicula est. 
    </div>
  </div>

<%-- include 지시어 --%>  
<%@ include file="footer.jsp" %>

footer 출력 예시

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

  <div class="footer">
    <div>
      Copyright NAVER
    </div>
  </div>

</body>
</html>