[Spring Framework] 부트 스트랩 적용하기

1.부트스트랩이란?

오늘은 트위터에서 만든 오픈소스인 부트스트랩을 스프링 프레임워크에 적용하는법에 대해서 알아보겠습니다. 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크입니다. 하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동합니다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다. 

 

2. 스프링과 부트스트랩 연동하기

 - 부트스트랩 오픈소스 사이트

Free Bootstrap Themes & Templates - Start Bootstrap

 - 부트스트랩 오픈소스 사이트

오픈 예제

위의 사이트에서 자신이 적용할 부트스트랩을 다운 받습니다. 다음과 같이 템플릿을 하나 고르고, Free Download를 클릭합니다.

다운 받은 파일의 html 파일을 크롬 웹브라우저에 드래그 해서 열고 소스 보기를 클릭합니다.

이렇게 나온 소스를 복사해서 자신의 스프링 프로젝트에 붙여 넣기를 합니다. 밑에 네모 박스를 쳐준 부분은 복사할 때 따로 바꿔주어야합니다.

저의 폴더 구조는 다음과 같습니다. resources 폴더 밑에 다운받은 부트스트랩 템플릿의 css와 vendor 폴더를 가지고 왔습니다. 

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"%>

css와 scrpit 부분은 다음과 같이 변경을 합니다. 루트폴더가 webapp폴더이므로 그 아래에 있는 폴더에서 파일을 찾을 수 있도록 변경해줍니다.

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/shop-homepage.css" rel="stylesheet">

->

<link rel="stylesheet" type="text/css" href="/resources/vendor/bootstrap/css/bootstrap.css">        
<link rel="stylesheet" type="text/css" href="/resources/css/shop-homepage.css">

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

->

<script src="<c:url value="/resources/vendor/jquery/jquery.min.js" />">
<script src="<c:url value="/resources/vendor/bootstrap/js/bootstrap.bundle.min.js" />">

마지막으로 Controller에서 페이지로 이동할 수 있도록 코드를 작성하겠습니다. 로컬에서 실행하는 경우 localhost를 주소창에 입력하면 최종 결과 화면을 볼 수 있습니다.

/*
 ** 메인 페이지 이동
 */
@RequestMapping(value = "/", method = RequestMethod.GET)
public String write(HttpSession session, HttpServletRequest request) throws Exception{
    	
    return "/index";
}

3. 부트 스트랩을 이용하여 직접 만든 개발 관련 일정 사이트

다음 사이트는 제가 부트스트랩을 이용하여 직접 만든 사이트입니다. 저는 서버 개발자라 프론트와 디자인은 잘 모르지만, 어느정도 공부를한다면 이렇게 만들 수 있습니다.

http://devcrews.io/

Dev Crews

Reference

º 나무위키 부트스트랩이란?

부트스트랩 (프론트엔드 프레임워크) - 위키백과, 우리 모두의 백과사전

º https://gmlwjd9405.github.io/2018/05/02/bootstrap-download-and-setting.html

[Bootstrap] Bootstrap 설치 및 환경설정 - Heee's Development Blog

 º https://coding-factory.tistory.com/40