준비중..
13 부트스트랩 테마 적용하기
# 부트스트랩 테마 적용하기
## 목차
1. 학습 목표
2. 테마 검색 및 다운로드
3. 페이지 만들기
4.1 스타터 템플릿
4.2 헤더 만들기
## 학습 목표
부트스트랩 테마 적용하기
## 테마 검색 및 다운로드
`부트스트랩4 테마` 키워드를 구글링하면 다양한 결과를 얻을 수 있다. 검색 결과 중 마음에 드는 것을 사용하면 된다.
이번 실습에서는 에이전시 테마를 실습한다. 해당 링크(https://startbootstrap.com/template-overviews/agency)를 통해 테마를 다운받는다.
## 페이지 만들기
### 스타터 템플릿
**views/welcome.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.css" />" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- JS -->
<Script src="<c:url value="/js/jquery-3.3.1.min.js" />"></script>
<Script src="<c:url value="/js/bootstrap.min.js" />"></script>
</body>
</html>
```
다음으로 컨트롤러(`HomeController.java`)에 아래 메소드를 추가한다.
```
@RequestMapping(value = "/welcome", method = RequestMethod.GET)
public String welcome() {
return "welcome";
}
```
브라우저를 통해 적용 여부를 확인.
### 헤더(header) 만들기
이제 다운받아온 `index.html`를 참고해서 헤더를 만들자.
아래 코드를 **welcome.jsp**에 추가하면 돼.
```
<!-- Header -->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome To Our Studio!</div>
<div class="intro-heading text-uppercase">It's Nice To Meet You</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
</div>
</div>
</header>
```
그리고 실행해보면 실망스런 결과가 나오지. 왜 이럴까?
맞아. 추가 CSS가 적용이 되지 않아서 그래. 제공된 index.html을 보면 CSS가 추가적용 되어있는걸 알 수 있어. 아래 코드를 `<head>...</head>`에 추가해주자.
```
<!-- Custom styles for this template -->
<link href="<c:url value="/css/agency.css" />" rel="stylesheet">
```
그 다음, 다운받은 테마의 agency.css 파일을 프로젝트 css 폴더에 추가하자.
그러고 새로고침을 하면 노란 버튼 하나가 덩그러니 보일거야. 그 윗부분을 마우스로 드래그 하면 흰 글자를 확인할 수 있어.
근데 배경사진은 왜 안나왔을까? agency.css 파일을 확인해보자.
```
header.masthead {
text-align: center;
color: white;
background-image: url("../img/header-bg.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
```
위 코드를 보면 background-image의 주소가 상대경로로 적혀있어. 이를 고쳐야해.
```
// base-url을 프로젝트에 따라 맞게 변경
background-image: url("/{base-url}/img/header-bg.jpg");
```
그리고 해당 경로에 이미지를 복사해야겠지?
## 레퍼런스
+ https://startbootstrap.com/template-overviews/agency/