준비중..
12 부트스트랩 적용하기
# 부트스트랩 적용하기
## 목차
1. 학습 목적
2. 파일 다운로드
- bootstrap
- jQuery
- 리소스 맵핑(servlet-context.xml)
3. 동작 확인
## 학습 목적
스프링MVC 프로젝트에 부트스트랩을 적용한다.
## 파일 다운로드
먼저 필요 코드를 다운 받아야 한다.
### bootstrap
부트스트랩 관련 코드는 공식 홈페이지(https://getbootstrap.com)에서 받는다.
압축을 풀면 2개의 폴더(css, js)가 생성되는데, 이를 `src/main/webapp/resources`에 복사한다.
### jQuery
부트스트랩을 동작하려면 추가로 jQuery 라이브러리가 필요하다. 이 또한 jQuery 사이트(https://jquery.com/download/)에서 다운받는다.
그리고 `src/main/webapp/resources/js/`에 복사한다.
### 리소스 맵핑
**servlet-context.xml** 파일을 변경하여, 부트스트랩 URL을 설정한다.
(xml 파일 변경 시, 반드시 서버를 재시작하여 정상 작동 여부를 확인 할 것)
```
// 변경전: <resources mapping="/resources/**" location="/resources/" />
<resources mapping="/**" location="/resources/" />
```
## 동작확인
views/home.jsp 파일에 "jumbotron"을 적용 후,
```
<%@ 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 -->
<Script src="<c:url value="/js/jquery-3.3.1.min.js" />"></script>
<Script src="<c:url value="/js/bootstrap.min.js" />"></script>
</head>
<body class="container">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>The time on the server is ${serverTime}.</p>
</div>
</body>
</html>
```
브라우저를 통해 적용 여부를 확인.
