decorator.sjp
<?xml version="1.0" encoding="UTF-8" ?>
<decorators defaultdir="/WEB-INF/decorator">
<decorator name="main" page="decorator.jsp">
<pattern>/*</pattern>
</decorator>
<excludes>
<pattern>/Login.jsp</pattern>
<pattern>/signupForm.jsp</pattern>
</excludes>
</decorators>
sitemesh.xml
<?xml version="1.0" encoding="UTF-8"?>
<sitemesh>
<property name="decorators-file" value="/WEB-INF/decorators.xml" />
<excludes file="${decorators-file}" />
<page-parsers>
<parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
<parser content-type="text/html;charset=UTF-8" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
</page-parsers>
<decorator-mappers>
<mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
<param name="config" value="${decorators-file}" />
</mapper>
</decorator-mappers>
</sitemesh>
decorator 파일 안에 decorator.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="decorator"
uri="http://www.opensymphony.com/sitemesh/decorator"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/decorator.css">
</head>
<body>
<nav>
<div class="logo">
<h4>이쥐 물류</h4>
</div>
<ul class="nav-links">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Work</a>
</li>
<li>
<a href="#">Projects</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<decorator:body/>
</nav>
<script >
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
//처음에 누르면 anumation 이 없어서 animation 이 실행, 열린 상태에서 닫으려고 한번 더 누르면 있으니깐 초기화 됨
}
else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();
</script>
</body>
</html>
decorator.css
@charset "UTF-8";
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
/* div 와 ul 이 가로정렬 */
nav{
display:flex;
justify-content: space-around;
align-items: center;
min-height: 10vh;
background-color: #5d4954;
}
.logo{
color:rgb(226,226,226);
letter-spacing: 2px;
font-size:20px;
}
.nav-links{
display:flex;
width: 30%;
justify-content: space-around;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color:rgb(226,226,226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size:16px;
}
.burger{
display:none;
cursor: pointer;
}
.burger div{
width:25px;
height:3px;
background-color:rgb(226,226,226) ;
margin:5px;
transition:all 0.3s ease ;
}
@media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
@media screen and (max-width:768px){
body{overflow-x: hidden;}
.nav-links{
position:absolute;
right:0px;
height:92vh;
top:8vh;
background-color: #5d4954;
display:flex;
flex-direction: column;
align-items:center;
width:50%;
transform:translate(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity:0;
}
.burger{
display: block;
}
}
.nav-active{
transform:translate(0%);
}
@keyframes navLinkFade{
from{
opacity: 0;
/* home, about, work, projects 가 움직이는 거리 */
transform: translate(150px);
}
to{
opacity: 1;
transform: translate(0px);
}
}
.toggle .line1{
transform:rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity:0;
}
.toggle .line3{
transform:rotate(45deg) translate(-5px,-6px);
}
WorkOutDispatcherServlet.java
package com.seoulIt.cont;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.seoulIt.action.Action;
import com.seoulIt.action.ActionForward;
import com.seoulIt.control.JoinAction;
import com.seoulIt.control.LoginAction;
/**
* Servlet implementation class WorkoutController
*/
public class WorkOutDispatcherServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public WorkOutDispatcherServlet() {
super();
// TODO Auto-generated constructor stub
}
@Override
public void init(ServletConfig config) throws ServletException {
// TODO Auto-generated method stub
super.init(config);
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub.
response.setContentType("text/html; charset=UTF-8");
request.setCharacterEncoding("utf-8");
//넘어온 url 자르기
String requestURI =request.getRequestURI();
int cmdIdx =requestURI.lastIndexOf("/")+1;
String command = requestURI.substring(cmdIdx);
System.out.println(command);
//System.out.println("requestURI : " + requestURI);
//System.out.println("cmdIdx : " + cmdIdx);
System.out.println("command : " + command);
//화면에 보여줄 url
ActionForward forward = null;
Action action = null;
String form =request.getContextPath();
System.out.println("form : " + form );
try{
if(command.equals("LoginAction.do")) {
action = new LoginAction();
forward = action.execute(request, response);
}
else if(command.equals("login.do")) {
forward = new ActionForward();
forward.setRedirect(true);
forward.setNextPath(form +"/Login.jsp");
}else if(command.equals("JoinAction.do")) {
action = new JoinAction();
forward = action.execute(request, response);
}else if(command.equals("signupForm.do")) {
forward = new ActionForward();
forward.setRedirect(true);
forward.setNextPath(form +"/signupForm.jsp");
}else if(command.equals("Main.do")) {
forward = new ActionForward();
forward.setRedirect(true);
forward.setNextPath(form +"/main/Main.jsp");
}
if(forward != null) {
if(forward.isRedirect()) {
response.sendRedirect(forward.getNextPath());
}else {
RequestDispatcher dispatcher = request.getRequestDispatcher(forward.getNextPath());
dispatcher.forward(request, response);
}
}
}catch(Exception e) {e.printStackTrace();}
}
}