본문 바로가기
Spring

230207 Spring 타일즈 뷰 템플릿

주영재 2023. 2. 7.

<%@ include file=""%>
대신
템플릿 사용

header, content, footer를 나누고 content영역만 변경


타일즈 뷰 템플릿

타일즈란?
-JSP는 만약 50개의 페이지에 상단 메뉴가 include 되어있는데, 
 페이지명이 바뀌면 50개 파일을 전부 수정해주어야 한다.


-타일즈는 웹 페이지의 상단이나 하단 메뉴와 같이 반복적으로 사용되는 부분들에 대한 코드를 분리해서 
 한 곳에서 관리를 가능하게 해주는 프레임워크이다.

타일즈 라이브러리-구조화된 형태로 사용할 수 있게 해주는 템플릿 라이브러리.
타일즈 dependency가 3개 필요.
jstl이 필요.
리졸버 뷰 변경 필요.

리졸버 실행되면 xml을 실행

xml에서
컨트롤러에서 다른 값이 넘어오면 만들어놓은 header, body, footer가 있고
body가 변경되며 
그게 다시 템플릿에 들어가
템플릿을 화면에 뿌려줌.

*자리에 value가 들어가는 것


직접 경로를 설정하면 템플릿에 들어가지 않고 실행시킬 수 있음

설치

porm.xml에

<!-– 타일즈 (jstl이 반드시 필요합니다)-->
<dependency>
	<groupId>org.apache.tiles</groupId>
	<artifactId>tiles-extras</artifactId>
	<version>3.0.8</version>
</dependency>
<dependency>
	<groupId>org.apache.tiles</groupId>
	<artifactId>tiles-servlet</artifactId>
	<version>3.0.8</version>
</dependency>
<dependency>
	<groupId>org.apache.tiles</groupId>
	<artifactId>tiles-jsp</artifactId>
	<version>3.0.8</version>
</dependency>


추가하고,
maven update


servlet-content.xml

<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
  <beans:property name="definitions">
    <beans:list>
    <beans:value>/WEB-INF/tiles/tiles.xml</beans:value>
    </beans:list>
  </beans:property>
</beans:bean>

 

추가

 



WEB-INF에 tiles폴더 만들고 tiles.xml파일 생성

<!DOCTYPE tiles-definitions PUBLIC
  "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
  "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">


 추가

 

servlet-context.xml에 주입

<beans:bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
	<beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
	<beans:property name="order" value="1" />
</beans:bean>


기존 뷰리졸버에 <beans:property name="order" value="2" /> 추가.
없어도 된다. 타일즈로 사용할 것이기 때문.

tilesViewResolver가 받아서 tiles.xml로.

index.jsp가 header, 몸체, footer, 사이드가 있다.
4개 필요. 생성.

위에 선언된 base템플릿을 상속, body부분을 동적으로 처리
이름이 같으면 오버라이딩.


template.jsp파일 생성. xml에 만든 4가지(header, 몸체, footer, 사이드)가 전부 있어야 한다.

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>

를 사용하여 라이브러리 사용할 수 있게.



<tiles:importAttribute name=""/>

으로 4가지 만들어 줌.
이때, 뷰(지금은 index.jsp)와 모양을 동일하게 만들어줘야 한다.
뷰는 wrap이라는 id를 가진 div로 header 몸체 footer를 감싸고 있으므로 template.jsp도 똑같이 해주고,
사이드가 div 밖에 있으니 여기서도 빼준다.

 


타일즈는 선택임. 페이지가 공통적으로 들어가는 게 많을 때 유용하다.

servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans
	xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<annotation-driven />

	<resources mapping="/resources/**" location="/resources/" />
	<resources mapping="/img/**" location="/resources/img/" />
	<resources mapping="/js/**" location="/resources/js/" />
	<resources mapping="/css/**" location="/resources/css/" />

	<!-- 타일즈 설정파일 위치 -->
	<beans:bean id="tilesConfigurer"
		class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<beans:property name="definitions">
			<beans:list>
				<beans:value>/WEB-INF/tiles/tiles.xml</beans:value>
			</beans:list>
		</beans:property>
	</beans:bean>

	<!-- 뷰리졸버의 상위 클래스 UrlbasedViewResolver클래스의 뷰로 사용할 tilesView클래스를 주입 -->
	<beans:bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
		<beans:property name="order" value="1" />
	</beans:bean>


	<!-- <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
		<beans:property name="order" value="2" />
	</beans:bean> -->

	<context:component-scan base-package="com.cordhistory.myweb.*" />



</beans:beans>

tiles.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
  "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
  "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">

<tiles-definitions>
	<!-- 템플릿의 모형을 정의 -->
	<!-- 공통화면(메뉴 표시) -->
	<!-- name은 컨트롤러에서 반환되는 값. template은 파일의 위치 -->
	<definition name="base" template="/WEB-INF/tiles/template.jsp">
		<put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />
		<put-attribute name="body" value="" />
		<put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
		<put-attribute name="left" value="/WEB-INF/tiles/left.jsp" />
	</definition>

	<!-- 위에 선언된 base템플릿을 상속, body부분을 동적으로 처리 -->
	<definition name="*" extends="base">
		<put-attribute name="body" value="/WEB-INF/views/{1}.jsp" />
	</definition>
	<definition name="*/*" extends="base">
		<put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" />
	</definition>
	<definition name="*/*/*" extends="base">
		<put-attribute name="body" value="/WEB-INF/views/{1}/{2}/{3}.jsp" />
	</definition>
	
	<!-- 템플릿을 사용하지 않을 경로 -->
	<definition name="user/login" template="/WEB-INF/views/user/login.jsp"/>


</tiles-definitions>

*가 경로.=> 경로가 trip/notice_list면 */*로 들어간다는 뜻!

 

template.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html>
<head>
<title>투어리스트인투어</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/swiper.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/common.css">
	<script src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.min.js"></script>
	<script src="${pageContext.request.contextPath}/resources/js/rollmain.js"></script>
	<script src="${pageContext.request.contextPath}/resources/js/jquery.easing.js"></script>
	<script src="${pageContext.request.contextPath}/resources/js/common.js"></script>
	<script src="${pageContext.request.contextPath}/resources/js/jquery.smooth-scroll.min.js"></script>

</head>
<body>
	<!-- 타일즈 뷰에서 정의한 name값이 들어갑니다. -->
	<div id="wrap">
		<tiles:insertAttribute name="header" />
		<tiles:insertAttribute name="body" />
		<tiles:insertAttribute name="footer" />
	</div>
	<tiles:insertAttribute name="left" />
</body>
</html>

 

 

 

 

 

header.jsp, footer.jsp, left.jsp

더보기

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>



<header id="header">
	<div class="header_area box_inner clear">
		<h1>
			<a href="javascript:;">Tourist in tour</a>
		</h1>
		<p class="openMOgnb">
			<a href="#"><b class="hdd">메뉴열기</b> <span></span><span></span><span></span></a>
		</p>
		<!-- header_cont -->
		<div class="header_cont">
			<ul class="util clear">
				<li><a href="javascript:;">로그인</a></li>
				<li><a href="javascript:;">회원가입</a></li>
			</ul>
			<nav>
				<ul class="gnb clear">
					<li><a href="javascript:;" class="openAll1">여행정보</a>

						<div class="gnb_depth gnb_depth2_1">
							<ul class="submenu_list">
								<li><a href="javascript:;">국내</a></li>
								<li><a href="javascript:;">해외</a></li>
							</ul>
						</div></li>
					<li><a href="javascript:;" class="openAll2">고객센터</a>
						<div class="gnb_depth gnb_depth2_2">
							<ul class="submenu_list">
								<li><a href="javascript:;">공지사항</a></li>
								<li><a href="javascript:;">문의하기</a></li>
							</ul>
						</div></li>
					<li><a href="javascript:;" class="openAll3">상품투어</a>
						<div class="gnb_depth gnb_depth2_3">
							<ul class="submenu_list">
								<li><a href="javascript:;">프로그램 소개</a></li>
								<li><a href="javascript:;">여행자료</a></li>
							</ul>
						</div></li>
					<li><a href="javascript:;" class="openAll4">티켓/가이드</a>
						<div class="gnb_depth gnb_depth2_4">
							<ul class="submenu_list">
								<li><a href="javascript:;">항공</a></li>
								<li><a href="javascript:;">호텔</a></li>
							</ul>
						</div></li>
				</ul>
			</nav>
			<p class="closePop">
				<a href="javascript:;">닫기</a>
			</p>
		</div>
		<!-- //header_cont -->
	</div>
</header>

 

 

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <footer>
		<div class="foot_area box_inner">
			<ul class="foot_list clear">
				<li><a href="javascript:;">이용약관</a></li>
				<li><a href="javascript:;">개인정보취급방침</a></li>
			</ul>
			<h2>투어리스트인투어</h2>
            <p class="addr">서울특별시 종로구 혜화동 9길 청운빌딩 5층 <span class="gubun">/</span>        
				<span class="br_line">대표전화 <span class="space0">02-1234-5678</span> <span class="gubun">/</span>        
					<span class="br_line">E-mail : <span class="space0"> titour@touristintour.com</span></span>
				</span>
			</p>
			<p class="copy box_inner">Copyright(c) TouristInTour all right reserved</p>
			<ul class="snslink clear">
				<li><a href="javascript:;">blog</a></li>
				<li><a href="javascript:;">facebook</a></li>
				<li><a href="javascript:;">instargram</a></li>
			</ul>
		</div>
	</footer>

 

 

left.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!-- 사이드 메뉴 -->
<h2 class="hdd">빠른 링크 : 전화 문의,카카오톡,오시는 길,꼭대기로</h2>
<div class="quick_area">
	<ul class="quick_list">
		<li><a href="tel:010-7184-4403"><h3>전화 문의</h3><p>010-1234-5678</p></a></li>
		<li><a href="javascript:;"><h3>카카오톡 <em>상담</em></h3><p>1:1상담</p></a></li>
		<li><a href="javascript:;"><h3 class="to_contact">오시는 길</h3></a></li>
	</ul>
	<p class="to_top"><a href="#layout0" class="s_point">TOP</a></p>
</div>

각각 나타내는 부분과, 그곳에서만 사용하는 script만 남긴다.

 

 

 

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
		var swiper = new Swiper('.swiper-container', {
			loop: true,
			autoplay:5500,
		    autoplayDisableOnInteraction: false,
			pagination: '.swiper-pagination',
            paginationClickable: true
		});
	});
</script>


	<div id="container">
        <div class="main_rolling_pc">
            <div class="visualRoll">
                <ul class="viewImgList">
                    <li class="imglist0">
                        <div class="roll_content">
                            <a href="javascript:;">
                            <img src="img/img_slidecontents01.png" alt="TRUST & INFORMATION 믿을 수 있는 여행정보, 여행... 어디로 가세요?"></a>
                            <p class="roll_txtline">BE TOURIST FOR BETTER LIFE</p>
                        </div>
                    </li>
                    <li class="imglist1">
                        <div class="roll_content">
                            <a href="javascript:;">
                            <img src="img/img_slidecontents02.png" alt="TRUST & INFORMATION 믿을 수 있는 여행정보, 여행... 어디로 가세요?"></a>
                            <p class="roll_txtline">BE TOURIST FOR BETTER LIFE</p>
                        </div>
                    </li>
                    <li class="imglist2">
                        <div class="roll_content">
                            <a href="javascript:;">
                            <img src="img/img_slidecontents03.png" alt="TRUST & INFORMATION 믿을 수 있는 여행정보, 여행... 어디로 가세요?"></a>
                            <p class="roll_txtline">BE TOURIST FOR BETTER LIFE</p>
                        </div>
                    </li>
                </ul>

                <div class="rollbtnArea">
                    <ul class="rollingbtn">
                        <li class="seq butt0"><a href="#butt"><img src="img/btn_rollbutt_on.png" alt="1번" /></a></li>
                        <li class="seq butt1"><a href="#butt"><img src="img/btn_rollbutt_off.png" alt="2번" /></a></li>
                        <li class="seq butt2"><a href="#butt"><img src="img/btn_rollbutt_off.png" alt="3번" /></a></li>
                        <li class="rollstop"><a href="#" class="stop"><img src="img/btn_roll_stop.png" alt="멈춤" /></a></li>
                        <li class="rollplay"><a href="#" class="play"><img src="img/btn_roll_play.png" alt="재생" /></a></li>
                    </ul>
                </div><!-- //rollbtnArea -->

            </div><!-- //visualRoll -->
        </div><!-- //main_rolling_pc -->
        
        <div class="main_rolling_mobile">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="javascript:;"><img src="img/mainslide_mob01.jpg" alt="TRUST & INFORMATION 믿을 수 있는 여행정보, 여행... 어디로 가세요?" /></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="javascript:;"><img src="img/mainslide_mob02.jpg" alt="TRUST & INFORMATION 믿을 수 있는 여행정보, 여행... 어디로 가세요?" /></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="javascript:;"><img src="img/mainslide_mob03.jpg" alt="TRUST & INFORMATION 믿을 수 있는 여행정보, 여행... 어디로 가세요?" /></a>
                    </div>
                </div>						
                <div class="swiper-pagination"></div>
                <!-- <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div> -->
                
            </div><!--//swiper-container-->
        </div><!--//main_rolling_mobile -->
	
		<!-- about_area -->
		<div class="about_area">
			<h2>다시 찾는 인기 여행지 <b>TOP 3</b></h2>
			<div class="about_box">
				<ul class="place_list box_inner clear">
					<li><a href="#" onclick="$('.popup_base').css('height',$(document).height());$('.contact_pop').show();">
							<img class="img_topplace" src="img/img_topplace01.jpg" alt="다리를 높이 들어 운동" />
							<h3>성패트릭 대성당</h3>
							<p class="txt">바쁜 뉴욕 안에서 정교하면서도 웅장한 기운에 침묵하게 되는 기도의 시간!</p>
							<span class="view">VIEW</span></a>
					</li>
					<li><a href="#" onclick="$('.popup_base').css('height',$(document).height());$('.space_pop').show();">
							<img class="img_topplace" src="img/img_topplace02.jpg" alt="바닷가에서 스트레칭" />
							<h3>원주 뮤지엄 '산'</h3>
							<p class="txt">전시된 유산들을 담아낸 건물에 신비로운 돌과 물의 테마가 담겨 있다.</p>
							<span class="view">VIEW</span></a>
					</li>
					<li><a href="#" onclick="$('.popup_base').css('height',$(document).height());$('.program_pop').show();">
							<img class="img_topplace" src="img/img_topplace03.jpg" alt="앉아서 스트레칭" />
							<h3>일본 만국박람회 기념공원</h3>
							<p class="txt">오사카 센리 반파쿠에는 드넓은 대지에 정원과 들, 물과 함께 하는 문화가 있다.</p>
							<span class="view">VIEW</span></a>
					</li>
				</ul>
			</div>
		</div>
		<!-- //about_area -->

		<!-- app_area -->
		<div class="appbbs_area">
			<div class="appbbs_box box_inner clear">
				<h2 class="hdd">상담과 최근게시물</h2>
				<p class="app_line">
					<a href="javascript:;">카카오톡 1:1 상담</a>
					<a href="javascript:;">전화 상담 신청</a>
				</p>
				<div class="bbs_line">
					<h3>NOTICE</h3>
					<ul class="notice_recent">
						<li><a href="javascript:;">이번 여름 휴가 제주 갈까? 미션 투어 (여행경비 50만원 지원)</a></li>
						<li><a href="javascript:;">박물관 미션 투어 응모 당첨자 발표</a></li>
						<li><a href="javascript:;">추석 연휴 티켓/투어 배송 및 직접 수령 안내</a></li>
						<li><a href="javascript:;">하롱베이 서비스 OPEN! (여행정보, 가이드북, 가이드맵)</a></li>
						<li><a href="javascript:;">투어리스트인투어 서비스 점검 안내</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- //app_area -->

	</div>
	<!-- //container -->

header, footer, left와 template에 있는 모든 화면을 그리는 태그들과 js, css 스크립트/링크들이 원래 index.jsp에 있었다.

 

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

	
	<div id="container">
		<!-- location_area -->
		<div class="location_area member">
			<div class="box_inner">
				<h2 class="tit_page">TOURIST <span class="in">in</span> TOUR</h2>
				<p class="location">MEMBER <span class="path">/</span> 회원가입</p>
				<ul class="page_menu clear">
					<li><a href="javascript:;" class="on">회원가입</a></li>
				</ul>
			</div>
		</div>	
		<!-- //location_area -->

		<!-- bodytext_area -->
		<div class="bodytext_area box_inner">
			<!-- appForm -->
			<form action="#" class="appForm">
				<fieldset>
					<legend>상담문의 입력 양식</legend>
					<p class="info_pilsoo pilsoo_item">필수입력</p>
					<ul class="app_list">
						<li class="clear">
                            <label for="email_lbl" class="tit_lbl pilsoo_item">이메일</label>
                            <div class="app_content email_area">
                                <input type="text" class="w160" id="email_lbl" title="이메일 주소" />
                                <span class="ico_space">@</span>
                                <input type="text" class="w160" title="이메일 제공업체 입력" />										
                                <div class="select_common">
                                    <select title="이메일 제공업체 목록">
                                        <option value="">직접입력</option>
                                        <option value="">naver.com</option>
                                        <option value="">hanmail.net</option>
                                    </select>
                                </div>										
                            </div>
						</li>
						<li class="clear">
							<label for="name_lbl" class="tit_lbl pilsoo_item">작성자명</label>
							<div class="app_content"><input type="text" class="w100p" id="name_lbl" placeholder="이름을 입력해주세요"/></div>
						</li>
						<li class="clear">
							<label for="pwd_lbl" class="tit_lbl pilsoo_item">비밀번호</label>
							<div class="app_content"><input type="password" class="w100p" id="pwd_lbl" placeholder="비밀번호를 입력해주세요"/></div>
						</li>
						<li class="clear">
							<label for="pwd2_lbl" class="tit_lbl pilsoo_item">비밀번호 확인</label>
							<div class="app_content"><input type="password" class="w100p" id="pwd2_lbl" placeholder="비밀번호를 다시 한번 입력해주세요"/></div>
						</li>
						<li class="clear">
							<label for="phone_lbl" class="tit_lbl pilsoo_item">연락처</label>
							<div class="app_content"><input type="tel" class="w100p" id="phone_lbl" placeholder="휴대폰”-”없이 숫자만 입력하세요"/></div>
						</li>
						<li class="clear">
							<span class="tit_lbl">성별</span>
							<div class="app_content radio_area">
								<input type="radio" class="css-radio" id="mmm_lbl" name="gender"><label for="mmm_lbl">남</label>
								<input type="radio" class="css-radio" id="www_lbl" name="gender"><label for="www_lbl">여</label>
							</div>
						</li>
						<li class="clear">
                            <span class="tit_lbl">SNS 수신동의</span>
							<div class="app_content checkbox_area">
								<input type="checkbox" class="css-checkbox" id="agree_lbl" name="agree1"><label for="agree_lbl">동의함</label>
							</div>
						</li>
						<li class="clear">
                            <span class="tit_lbl">이메일 수신동의</span>
							<div class="app_content checkbox_area">
								<input type="checkbox" class="css-checkbox" id="agree_lb2" name="agree2"><label for="agree_lb2">동의함</label>
							</div>
						</li>
						<li class="clear">
							<label for="content_lbl" class="tit_lbl">문의내용</label>
							<div class="app_content"><textarea id="content_lbl" class="w100p" placeholder="간단한 상담 요청 사항을 남겨주시면 보다 상세한 상담이 가능합니다.
전화 상담 희망시 기재 부탁드립니다."></textarea></div>
						</li>
					</ul>
					<p class="btn_line"><a href="javascript:;" class="btn_baseColor">등록</a></p>	
				</fieldset>
			</form>
			<!-- //appForm -->
			
		</div>
		<!-- //bodytext_area -->

	</div>
	<!-- //container -->

마찬가지로 템플릿으로 들어간다. 때문에 header, footer, left가 모두 있다.

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 로그인 | 투어리스트인투어 </title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/common.css">
<script src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/common.js"></script>  
<script src="${pageContext.request.contextPath}/resources/js/jquery.smooth-scroll.min.js"></script> 

<script type="text/javascript">
// 현재 페이지에만 적용
$(document).ready(function(){
	$('.switch').click(function(){			// 로그인 유지 작동
		$(this).toggleClass("switchOn");
	});
	$('.quick_area').hide();				// 우측 빠른 실행 메뉴 숨김 
});
</script>
</head>

<body>

<!-- wrap -->
<div id="wrap" class="s_point">
	
	<div id="container" id="layout0">
		
		<!-- bodytext_area -->
		<div class="bodytext_area box_inner">
			<!-- login-wrap -->
			<div class="login_wrap">
				<h1 class="loginTit"><a href="#"><img src="${pageContext.request.contextPath}/resources/img/tit_login.png" alt="TOURIST IN TOUR" /></a></h1>

				<ul class="login_list">
					
					<li style="padding: 0;"><input type="text" placeholder="아이디" style="width:100%;"></li>
					<li style="padding: 0;"><input type="password" placeholder="비밀번호" style="width:100%;"></li>
					<li style="padding: 0; display: flex; justify-content: center;" >
						<a href="#" style="color:#000; padding: 0 10px;">회원가입</a>
						<a href="#" style="color:#000;  padding: 0 10px;">로그인</a>
					
					</li>
				</ul>
				
				<ul class="login_list">

					<li class="kakao"><a href="javascript:;"><strong>카카오톡</strong> 로그인</a></li>
					<li class="naver"><a href="javascript:;"><strong>네이버</strong> 로그인</a></li>
					<li class="facebook"><a href="javascript:;"><strong>페이스북</strong> 로그인</a></li>
					<li class="cellphone"><a href="javascript:;"><strong>이메일 주소</strong> 로그인</a></li>
				</ul>
				<div class="btnonoff_line">
					<div class="switch"></div>
					<p>
					    <a href="#" class="btn_onoff" onclick="return false;">로그인 유지</a>
					    
					</p>

				</div>
        				
			</div>
			<!-- //login-wrap -->

		</div>
		<!-- //bodytext_area -->

	</div>
	<!-- //container -->

	<footer>
		<div class="foot_area box_inner">
			<ul class="foot_list clear">
				<li><a href="javascript:;">이용약관</a></li>
				<li><a href="javascript:;">개인정보취급방침</a></li>
			</ul>
			<h2>투어리스트인투어</h2>
            <p class="addr">서울특별시 종로구 혜화동 9길 청운빌딩 5층 <span class="gubun">/</span>        
				<span class="br_line">대표전화 <span class="space0">02-1234-5678</span> <span class="gubun">/</span>        
					<span class="br_line">E-mail : <span class="space0"> titour@touristintour.com</span></span>
				</span>
			</p>
			<p class="copy box_inner">Copyright(c) TouristInTour all right reserved</p>
			<ul class="snslink clear">
				<li><a href="javascript:;">blog</a></li>
				<li><a href="javascript:;">facebook</a></li>
				<li><a href="javascript:;">instargram</a></li>
			</ul>
		</div>
	</footer>

</div>
<!-- //wrap -->

</body>
</html>

tiles.xml에서 definition으로 지정해주었다. 따라서 템플릿을 사용하지 않고 독자적으로 작동한다.

 

처음에 나눌 화면, tiles.xml, template.xml에 주목!

저작자표시

'Spring' 카테고리의 다른 글

230208 Spring myweb 기능구현 다음글-이전글  (0) 2023.02.08
230208 Spring myweb 기능구현-등록-목록-상세, 수정, 삭제  (0) 2023.02.08
230207 Spring 경로 맞추기  (0) 2023.02.07
230206 Spring mybatis 실습  (0) 2023.02.06
230206 Spring 예제 dao mybatis로 바꾸기  (0) 2023.02.06

'Spring' 관련글

티스토리툴바