스프링 MVC

준비중..

스프링 MVC

스프링을 사용한 웹서비스 만들기

06 부트스트랩 연동하기

# 부트스트랩 적용하기 ### 부트스트랩 자료 받아오기 먼저 부트스트랩을 다운받고 압축을 풉니다. ([부트스트랩 다운로드](http://getbootstrap.com)) ![Imgur](https://i.imgur.com/jBrEbZq.png) 압축을 풀면 3개의 폴더(css, js, fonts)가 생성되는데, 이를 아래의 위치로 복사해 줍니다. ![Imgur](https://i.imgur.com/DOXicJc.png) ### 리소스 등록: sevlet-context.xml 부트스트랩 링크를 위해 `servlet-context.xml` 파일 아래와 같이 변경합니다. **변경 전** ```xml <resources mapping="/resources/**" location="/resources/" /> ``` **변경 후** ```xml <resources mapping="/**" location="/resources/" /> ``` > xml 파일변경 시, 서버를 꼭 재시작 해주세요. ### 동작 확인 View 페이지에서 부트스트랩을 연결하여 동작을 확인해 봅니다. ([부트스트랩 템플릿](http://getbootstrap.com/getting-started/#template)) **views/home.jsp** ``` <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page pageEncoding="utf-8" session="false"%> <!doctype html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="<c:url value="/css/bootstrap.min.css" />" rel="stylesheet"> <title>Hello, world!</title> <!-- JS --> </head> <body class="container"> <div class="jumbotron"> <h1>Hello, world!</h1> <p>The time on the server is ${serverTime}.</p> </div> </body> </html> ``` ![Imgur](https://i.imgur.com/5eUmm5r.png)