JSP를 사용하여 레이아웃 구성하기
큰틀만 만들어 두고, 그 틀에 해당하는 내용은 문서화시킨다.
header, aside, content, footer등 레이아웃의 구성요소를 폴더에 문서화하여 사용하면 추후에 유지보수가 용이합니다.
<%@include file=" ~~~ "%> 이와 같은 형식으로 문서를 불러온다. html에서는 불가능하고, jsp에서만 지원한다.
main_company.jsp -> 전체 레이아웃의 큰 틀 잡기
header.jsp -> 폴더화해서 include로 main_menu폴더내 header영역에 포함시킨다.
menu.jsp -> header영역에 표현되므로, 파일을 폴더화해서 include로 header파일에 포함시킨다.
이렇게 영역별로 문서화시켜서 분리하고, include 명령으로 하나의 파일에 문서자체를 포함시키면 원본 파일의 위치는 다르지만 결론적으로 하나의 문서로 조립되는 것입니다. 따라서 css를 한 군데에(메인파일 main_company.jsp) 모아서 사용해도 적용이 됩니다.
a태그에 href속성을 사용하여 페이지를 이동하는 효과를 받을 수 있습니다.
위의 main_company.jsp의 내용을 복사해서 aside에 나타나는 sub_menu.jsp내용만 수정하면, 새로운 페이지를 불러오면서 내용이 바뀌는 효과를 볼 수 있습니다.
[전체 레이아웃]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/main.css"> <!-- 전체 CSS -->
<link rel="stylesheet" href="css/main_menu.css"> <!-- 메뉴 CSS --> <!-- 실제 menu파일은 다른 곳에 문서화되어 저장되어 있지만, include로 조립하면서 한 문서로 만들었기 때문에 여기에 link를 걸어도 css가 적용됩니다. -->
<link rel="stylesheet" href="css/sub_menu.css"> <!-- 메뉴 CSS -->
</head>
<body>
<div id="main_box">
<div id="header">
<!-- 외부파일을 포함시킨다. -->
<!-- include 명령을 수행하면 한 문서로 결합되는 것이다. -->
<%@include file="header/header.jsp" %> <!-- html에서는 안됨, 자바에서 제공하는 명령어 기능이다. -->
</div> <!-- <header></header> -->
<div id="aside">
<%@include file="menu/submenu_company.jsp" %>
</div> <!-- <nav></nav> -->
<div id="content"></div> <!-- <article></article> -->
<div id="footer">
<%@include file="footer/footer.jsp" %>
</div> <!-- <footer></footer> -->
</div>
</body>
</html>
|
cs |
id속성으로 구분해놓은 영역에 문서화시킨 파일들을 include하여 조립시키면 하나의 문서에서 조작할 수 있습니다.
[전체적인 구성] - 영역별로 include된 파일들을 기준으로 정리했습니다.
- main_company.jsp, main_product.jsp, main_customer.jsp (aside 영역의 서브메뉴를 제외한 나머지의 내용은 동일)
- header.jsp (헤더 영역의 제목)
- main_menu.jsp (메인 수평 메뉴)
- submenu_company.jsp, submenu_product.jsp, submenu_customer.jsp (aside영역의 서브 수직 메뉴)
- footer.jsp (footer영역의 내용)
- header.jsp (헤더 영역의 제목)
'BackEnd > WEB' 카테고리의 다른 글
| JDBC 미니프로젝트 2일차 (0) | 2022.05.05 |
|---|---|
| JSP_국비_DAY46 (0) | 2022.05.04 |
| 국비_DAY44 (0) | 2022.05.02 |
| CSS_국비_DAY43 (0) | 2022.04.29 |
| HTML_FORM_TAG_국비_DAY42 (0) | 2022.04.28 |
