금백조의 개발 블로그

[Spring]타일즈(Tiles) 페이지별 CSS 동적으로 적용하기 본문

Web/Spring

[Spring]타일즈(Tiles) 페이지별 CSS 동적으로 적용하기

금백조 2021. 11. 21. 17:53
반응형

서론

 

기존에 진행하던 Spring 사이드 프로젝트에 jsp페이지별 소스 재활용도를 높이기 위해 타일즈(Tiles)를 적용했습니다. 그러던 중 페이지별로 css를 다르게 적용하기 위한 방법을 찾아야 했습니다. 오늘은 그 방법에 대해 포스팅해볼까 합니다.

 

본론

 

1. tiles.xml에 css를 동적으로 적용할 put-attribute 태그의 속성을 설정합니다.

(name = "dynamic_css", value = "/resources/assets/css/{2}.css")

 

home.jsp로 예시를 들면 home.jsp가 /WEB-INF/views/board 경로에 있고 HomeController의 리턴 값이 "board/home" 이므로 {1} 에는 board, {2}에는 home 이 들어가게 됩니다. home.css 는 /resources/assets/css 경로에 위치하게 됩니다.

 

[tiles.xml]

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
    <definition name="default_main" templateExpression="/WEB-INF/views/tiles/layout.jsp">
        <put-attribute name="css" expression="/WEB-INF/views/tiles/css.jsp" />
        <put-attribute name="script" expression="/WEB-INF/views/tiles/script.jsp" />
        <put-attribute name="header" expression="/WEB-INF/views/tiles/header.jsp" />
        <put-attribute name="footer" expression="/WEB-INF/views/tiles/footer.jsp" />
    </definition>
    <definition name="*/*" extends="default_main">
    	<put-attribute name="dynamic_css" value="/resources/assets/css/{2}.css"/>
    	<put-attribute name="title" value="{2}"/>
        <put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp"/>
    </definition>
</tiles-definitions>

 

[home.css 경로]

 

 

[HomeController.java]

@Controller
public class HomeController {
	
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home() {
		return "board/home";
	}
}

 

2. 적용할 layout.jsp 페이지에 아래 코드를 추가합니다.

 

<link rel="stylesheet" href="${contextpath}<tiles:getAsString name = "dynamic_css"/>"/>

 

[layout.jsp]

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<c:set var = "contextpath" value = "<%=request.getContextPath()%>"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<tiles:insertAttribute name="css" />
<link rel="stylesheet" href="${contextpath}<tiles:getAsString name = "dynamic_css"/>"/>
<title><tiles:getAsString name = "title"/></title>
</head>
<body>
    <tiles:insertAttribute name="header" />
    <div id="content">
    	<tiles:insertAttribute name="body" />
    </div>
    <tiles:insertAttribute name="footer" />
</body>
<tiles:insertAttribute name="script" />
</html>

 

이 방법을 사용하면 홈 화면인 home.jsp에는 home.css가 다른 화면인 other.jsp 에는 other.css를 적용할 수 있습니다. 따라서 각 페이지별로 원하는 css를 다르게 적용할 수 있습니다.

 

결론

 

위 방법을 사용하면 css 뿐만 아니라 다른 것들도 (javascript, html 태그 값 등...) 페이지 별로 동적으로 적용할 수 있습니다. Spring에서 Tiles Library를 사용하신다면 언젠가는 사용하게 될 유용한 방법이라고 생각합니다! 위 예시의 자세한 코드는 아래 Github 프로젝트 링크에서 확인하실 수 있습니다.

 

https://github.com/GoldSwan/PictureRepository

 

GitHub - GoldSwan/PictureRepository: Web Side Project with Spring

Web Side Project with Spring. Contribute to GoldSwan/PictureRepository development by creating an account on GitHub.

github.com

 

Reference

 

[Spring + tiles 설정]

https://matchless.tistory.com/6

 

Spring + tiles 설정

이번 포스팅은 Spring에 Tiles를 적용입니다! # Tiles 란? 보통 한 화면을 구성할 때 jsp에 공통적으로 들어가는 부분은 공통파일 header.jsp와 footer.jsp를 include 시켜주는 방식으로 화면을 출력하죠. Tiles

matchless.tistory.com

[[Spring] 스프링 tiles 사용하기!]

https://baessi.tistory.com/2

 

[Spring] 스프링 tiles 사용하기!

안녕하세요~ 오늘은 스프링 프레임워크에서 tiles 설정을 해보겠습니다~ tiles 란? - 웹 페이지의 상단, 하단, Header, Footer, left 등 반복적으로 사용되는 부분들에 대한 정보를 모아서 관리 - 반복되

baessi.tistory.com

[[Spring/Tiles] Apache Tiles3, CSS, JS 페이지별 동적로딩 구현하기]

https://everyflower.tistory.com/211

 

[Spring/Tiles] Apache Tiles3, CSS, JS 페이지별 동적로딩 구현하기

Apache Tiles3 는 View 구성시에 템플릿을 통해서 정말 편리하게 View를 관리하게 해준다. 어떤 주소 형식인가에 따라서 반환을 어떻게 할지 등을 정할 수 있다. 이러한 Tiles 를 통해서 layout을 짯을 때 

everyflower.tistory.com

 

반응형
저작자표시 비영리 변경금지

'Web > Spring' 카테고리의 다른 글

[Spring]CSRF 토큰이 Multipart 이미지 전송에서 인식되지 않는 이슈 해결 방법(Error Message : Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-CSRF-TOKEN'.)  (0) 2021.12.18
[Spring]Spring에서 PUT, DELETE Method 사용하기  (0) 2021.12.04
[Spring]이동 화면(페이지)에서 이미지 로드 실패 문제 해결(feat.<img> 태그 src 경로 설정)  (0) 2021.09.11
[Spring]Tomcat에서 'Port 8080 required by Tomcat v8.5 Server at localhost is alerady in use.'에러 해결 방법  (0) 2021.06.06
[Spring]Tomcat에서 'The server cannot be started because one of more of the posts are invalid.' 에러 해결 방법  (0) 2021.06.06
'Web/Spring' Related Articles more