이제 페이지 구성이 어떻게 되는지 실험을 해 보았다.
일단 레이아웃 폴더의 위치는 아래와 같다.
앞서 지정한 타일즈 폴더 안에 해당 파일들이 존재한다.
연습용으로 파일들의 입력해보았다.
각각 파일들을 살펴 보면 아래와 같다.
[위치 : 폴더\src\main\webapp\WEB-INF\jsp\tiles\layout.js]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="<c:url value='/css/test.css'/>"/> </head> <body>
<tiles:insertAttribute name="header" /> <tiles:insertAttribute name="content" />
<tiles:insertAttribute name="footer" /> </body> </html>
|
html5 jsp를 적용하고(html5 템플릿을 기본으로 적용하는 것은 인터넷을 찾아보도록 한다.)
header에 css 파일을 가지고 오고(테스트를 위해 css를 적용하였다.)
body에 각각의 파일들을 어트리 뷰트로 추가했다.
test.css
@CHARSET "UTF-8"; div{height: 100px; border: 1px solid; clear: both;} .content{height: 50px; background-color: green;} |
header.jsp
<div> header </div> |
content.jsp
<div class="content"> content </div> |
footer.jsp
<div> footer </div> |
각각의 파일을 작성한 후 프로그램을 실행해 보았다.
위에서 보는 것과 같이 css까지도 잘 먹혀 동작하는 것을 볼 수 있다.
여러 파일에서 중복적으로 코드가 들어가지 않도록 구분을 하는 것과
다양한 테스트가 필요하겠지만
일단 코드를 분리하고 레이아웃 구성대로 작업을 할 수 있을 것이라는 생각은 든다.
이것을 가지고 차차 egov의 페이지를 변경해도록 해야 겠다.
'egovframework' 카테고리의 다른 글
| [egov] 타일즈(tiles) 적용 - 2 (0) | 2014.07.24 |
|---|---|
| [egov] 타일즈(tiles) 적용 - 1 (0) | 2014.07.24 |
| [egov] 포탈 사이트 화면 분석 - 3 (0) | 2014.07.17 |
| [egov] 포탈 사이트 화면 분석 - 2 (0) | 2014.07.17 |
| [egov] 포탈 사이트 화면 분석 - 1 (0) | 2014.07.17 |