Spring
12.08.(목) Spring Framework(4): Header/Footer
콜라든포비
2022. 12. 10. 22:57
Header/Footer
저번에 액션태그 include를 이용해서 상하단 메뉴바를 만들었다.
include를 이용하면 include된 jspf파일의 html문 실행결과를 포함시킬 수 있다.
include시켜줄 .jspf파일을 담아줄 include폴더를 만들고, servlet-context.xml에 가서 리소스 매핑을 해준다.
<resources mapping="/include/**" location="/include/" />web.xml에서도 jsp-config를 추가해서 모든 .jsp파일에 상하단 메뉴바가 include되도록 설정하자.
<!-- include -->
<jsp-config>
<jsp-property-group>
<url-pattern>.jsp</url-pattern>
<include-prelude>/include/top.jspf</include-prelude>
</jsp-property-group>
</jsp-config>top.jspf - 상단메뉴바
상단 메뉴바의 구성은 홈, 로그인/회원가입, 로그아웃/회원정보수정, 게시판, 자료실 이렇게 5개이다.
/webapp/include폴더 안에 top.jspf를 만들자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="topMenu">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">로그인/회원가입</a></li>
<li><a href="#">로그아웃/회원정보수정</a></li>
<li><a href="#">게시판</a></li>
<li><a href="#">자료실</a></li>
</ul>
</div>아래부분에 있는 </body>와 </html>태그를 지워주자. 이 파일의 실행결과가 포함되기 때문에 필요가 없다.
style.css를 불러오는 명령어와 jQuery를 불러오는 명령어를 한번 해주면, 모든 .jsp파일에 적용이 된다. 그리고 닫는 body태그와 닫는 html태그를 지우자.
bottom.jspf - 하단메뉴바
하단메뉴바도 추가하고 web.xml에 매핑하자.
<!-- include -->
<jsp-config>
<jsp-property-group>
<url-pattern>*.jsp</url-pattern>
<include-prelude>/include/top.jspf</include-prelude>
<include-coda>/include/bottom.jspf</include-coda>
</jsp-property-group>
</jsp-config>include폴더 안에 bottom.jspf를 생성하자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="bottomMenu">
@copyright Poby.
</div>
</body>
</html>여기서는 반대로 윗 부분을 날리면 된다.
CSS로 다듬기
top.jspf에서 불러온 style.css을 열어서 메뉴바를 다듬어주자.
/********************TOP**********************/
.topMenu>ul{
/* height:50px; */
overflow:auto;
background-color:orange;
}
.topMenu>ul>li{
float:left;
height:50px;
line-height:50px;
font-size:1.2em;
padding:0 80px;
list-style-type:none;
}
/*******************BOTTOM********************/
.bottomMenu{
text-align:center;
height:100px;
line-height:100px;
background-color:#ddd;
}