티스토리 뷰
홈페이지를 만들어보면 시멘틱 형식으로 만드는 경우가 굉장히 많다. 그렇기 때문에 헤더, 섹션, 푸터로 구성이 되는데 이때 헤더와 푸터는 거의 늘 같은 정보를 출력하기 때문에 페이지를 만들때마다 복붙을 하려면 여간 번거로운일이 아닐 수 없다. 그래서 헤더와 푸터는 그냥 냅두고 내용만 바뀔 섹션부분만 수정할 수 있는 환경을 만들어 보려고 한다.
우선 헤더파일이다. header.jsp
|
1
2
3
4
5
6
7
8
9
10
11
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.model.vo.Member"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css">
<meta charset="UTF-8">
<title>HelloMyPage</title>
</head>
<body>
|
cs |
위와 같이 웹문서의 윗 부분만 작성을 한다. 어디서 자를지는 본인이 잘 생각해서 약간 변경도 가능하다. body같은 경우는 굳이 여기에 안넣어도 되긴 할것이다.
두번째로는 푸터파일이다. footer.jsp
|
1
2
3
4
5
6
7
8
9
10
11
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<footer>
<p>
<CopyRight 2019. <strong>SMU_지훈이 사이트</strong>. All rights reserved.
>
</p>
</footer>
</div>
</body>
</html>
|
cs |
이렇게 닫히는 태그들이 즐비하는 푸터의 내용이다.
이제 가운데 섹션부분은 어찌 들어가나 살펴보자!
index.jsp
|
1
2
3
4
5
6
7
8
9
10
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file ="views/common/header.jsp" %>
<section id="content">
<h2 align="center" style="margin-top: 200px;">안녕하세요 MVC입니다.</h2>
</section>
<%@include file ="views/common/footer.jsp" %>
|
cs |
가운데 섹션만 저렇게 작성해주었고 헤드와 푸터 부분은 include file을 사용해 추가하였다. <%@ page language....> 부분을 제거하고 헤더, 섹션, 푸터부분을 합치면 하나의 웹문서가 탄생하게 된다. 그러면 나는 코드를 복잡하게 할 필요없이 깔끔하게 섹션의 컨텐츠 부분만 구성하면 보기좋게 만들 수 있다.
2번째 팁!!
저렇게 아주아주 간소화시켰지만 헤더와 푸터를 매번 저렇게 추가해주기가 귀찮을 수 있기 때문에 아예 저걸 템플릿으로 만들어 버려서 기본셋팅으로 시작할 수도 있다.
1. 원래 jsp파일 만드는것 처럼 들어가서 이름 정하고 next를 한번 해준다.
2. 두번째 사진처럼 JSP Templates을 클릭!
3. 템플릿을 만들것이라 new를 눌러준 후 이름과 설명은 자유롭게 작성하고 옆에는 New JSP로 해줘야한다.
4. 밑에 있는 패턴에는 이제 어떤 형식으로 불러올 것인지 작성하는것이다.
(사진은 한번에 보여줄려고 다닥다닥 붙였지만 실제로 만들땐 엔터로 좀 띄워주는게 좋음)
5.껐다가 다시 접속해보면 내가 올림 템플릿을 골라 피니쉬 해주면된다. 혹시 사용하다가 원래 템플릿을 사용하고 싶으면
마지막 사진에서 창을 좀더 늘려 Description에 JSP with html markup을 찾아 고르면 된다.
해당 게시글이 도움이 되셨다면
광고 클릭한번 부탁드립니다 ㅎㅎ
'Back-end > Servlet & JSP' 카테고리의 다른 글
| 웹 사이트 아이디 저장 (0) | 2019.01.10 |
|---|---|
| MVC1 패턴 웹서버에 첨부파일 올리기 (5) | 2019.01.09 |
| MVC1 패턴 페이징 처리하기 (0) | 2019.01.08 |
| 비밀번호(password) 암호화 하기 (6) | 2019.01.05 |
| MVC모델로 로직 작성하기 (0) | 2018.12.27 |