[개발일지#015] 부트스트랩 템플릿 적용 준비하기

[참고]
김영한님 스프링 강의를 바탕으로 진행되는 토이프로젝트의 과정을 기록하는 글입니다. 
둥근 피드백은 언제나 환영입니다.

[오늘의 개발내용]
1. 부트스트랩 템플릿을 골라 내 프로젝트에 적용할 수 있도록 셋팅해놓기

 

 

tmi.

디자인에 너무 많은 힘을 쏟지 않으려고 (디자인에 힘 쏟기 시작하면 진짜 끝도 없고 너무 장기전이 되어버림. 내가 사이드 프로젝트를 만드는 목적(스트링부트와 JPA를 잘써보는 것)과 맞지 않기도함) 부트스트랩 템플릿을 사용해보기로 함. 2년 전에 부트스트랩 한 번 써보고 안써봐서....적용하는 법도 까먹은 나....다시...시도해본다....

 

1. 부트스트랩 무료 템플릿을 제공하는 사이트로 접속한다.

(+) 부트스트랩 무료 템플릿만 검색해도 무료템플릿 사이트 10 이런 식으로 친절하게 알려주는 블로거 분들이 많음 그중에 골라서 보면 됨!

https://startbootstrap.com/

Start Bootstrap

나는 이 사이트( (그냥 가장 무난하고 많이  쓰는 듯)를 선택했고 아래의 두 가지의 템플릿을 선택했다.

 

두 가지 템플릿이나 사용하려는 이유는 사용자용 화면과 관리자용 화면을 따로 두기 위해..! (디자인 힘 안쓴다매ㅠㅠ)

 

[사용자화면]

https://startbootstrap.com/theme/personal

Start Bootstrap

 

[관리자화면]

https://startbootstrap.com/theme/sb-admin-2

Start Bootstrap

 

 

일단 템플릿 하나를 다운 받았고 압축을 풀어보면 이런 구조로 되어있다.

이 폴더 안에 Index.html 을 열어보면 죄다 css 가 깨져서 제대로 안나오는데 아직 젹용이 안되서 그럼. 

적용시키는 방법은 간단하다 압축 파일내에 있는 assets, css, js 파일을 그대로 복사해서

 

 

내 프로젝트 resources 디렉토리 아래 그대로 넣어준다. 

 

 

그리고 아까 폴더에서 Index.html 파일을 열어보면 아래와 같지 내가 미리보기로 봤던 템플릿이 뜬다. 

 

 

 

물론 이게 적용이 됐다고 할 순 없고

이걸 활용해서 템플릿을 적용해줘야 하는데 그건 다음 시간에~!

 

 

 

 

---

출처 - https://softstudy.tistory.com/7

부트스트랩 템플릿 적용해보기