Spring 프로젝트에 Bootstrap Themes 적용하기

2018년 7월 26일


Spring 개발환경 설정하기(1) - 프로젝트 생성하기~톰캣 설정
Spring 개발환경 설정하기(2) - 라이브러리 다운로드~DB연동
Spring 개발환경 설정하기(3) - Spring+MyBatis 연동하기
Spring 개발환경 설정하기(4) - Spring + MyBatis 설계(Mapper, DAO)

오늘은 Spring 개발환경 설정이 완료된 프로젝트에 Bootstrap 테마를 적용해보려 합니다.
한동안 서버개발만 하다보니 화면 작업은 오랫만이네요.

1. 원하는 부트스트랩 테마를 찾아서 다운받습니다.
저는 Start Bootstrap에서 제공하는 Agency 테마를 선택했습니다.
구글에 free bootstrap을 검색하면 많이 나와요~
참고) https://startbootstrap.com/template-categories/all/

2. 다운받은 테마의 압축을 풉니다.
내용은 아래와 같습니다.

 3. 리소스 파일들이 들어갈 자리를 만들어줍니다.
src/main/webapp 디렉토리 아래에 resources 폴더를 추가

4. 다운받은 테마의 폴더들만 resources 폴더에 복사-붙여넣기 합니다.
※추후 bootstrap 테마의 css, js만 따로 관리하고 싶다면 resources/boostrap 안에 넣어주세요.

5. src/main/webapp/WEB-INF/views에 index.jsp 파일을 만듭니다.
다운받은 테마의 index.html파일을 편집기로 열고 내용을 index.jsp 파일로 복사한 후,
제일 위에 아래의 코드를 추가해주세요.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
cs

6. 기존 컨트롤러에 아래의 코드를 추가합니다.
4장에서 사용했던 home 메소드는 주석처리 하거나, Mapping url을 바꿔주세요.
혹은 아래 코드의 Mapping url을 다른걸로 변경할 수도 있습니다.
@GetMapping("/")
public String index(HttpServletRequest request) {
    logger.debug("###INDEX PAGE###");
    String rtnPage = "index";
    String ipAddress = request.getHeader("X-FORWARDED-FOR");
    if (ipAddress == null) {
        ipAddress = request.getRemoteAddr();
    }
    logger.info(ipAddress + " : " + rtnPage);
    return rtnPage;
}
cs

7. 서버를 실행하고 http://localhost:8080/web에 접속하면, 완전히 무너져있는 것을 볼 수 있습니다.

8. index.jsp 파일에서 불러오는 리소스 파일의 경로들을 아래의 코드처럼 상대경로로 변경합니다.
- before
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
cs
- after
<link href="../resources/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
cs

모두 변경했다면, 새로고침 혹은 Ctrl+Shift+R 후에 테마가 적용된 것을 확인할 수 있습니다.


Tags:

Share:

1 개의 댓글

  1. Unknown2020년 1월 7일 오후 7:44

    7번 단계까지 확인하고 8번처럼 경로 설정을 한 다음 서버에서 실행을 했는데 안됩니다 ㅠㅠ

    답글삭제