[Spring] 스프링에서 BootStrap적용하기

이번 포스팅에서는 스프링 프로젝트에서 BootStrap을 연동하는 방법에 대해서 한번 알아보도록 하겠습니다. BootStrap이란 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트웨어 도구 모음입니다. 기본적인 디자인이 다 되어있는 오픈소스로 되어있기 때문에 디자인 능력이 부족한 개발자이거나 단기간에 웹사이트를 만들어야 하는 경우 요긴하게 사용할 수 있습니다.

 

스프링에서 BootStrap적용하기

1. BootStrap을 쓰기 위해서는 자신이 원하는 소스코드를 다운로드하아야 합니다.

BootStrap을 다운로드하는 홈페이지를 두 군데 소개해드리겠습니다.

 

부트스트랩 무료 오픈소스 링크 바로가기 1

부트스트랩 무료 오픈소스 링크 바로가기 2

 

위에 링크된 사이트에서 자신이 원하는 오픈소스를 다운로드하시면 됩니다.

 

2. 저는 이 홈페이지가 마음에 드는군요. 이 오픈소스를 다운로드하도록 하겠습니다. 빨간색 네모 박스 안에 있는 Download를 눌러주세요.

 

 

3. 오픈소스의 다운로드가 완료되었으면 위와 같은 폴더가 나오게 될 것입니다.

여기서 index.html을 실행시켜주세요 실행시키시면 우리가 따올 BootStrap웹사이트가 나오게 됩니다.

 

4. 이 웹사이트에 오른쪽 클릭을 누르신 뒤 페이지 소스보기를 누르시면 페이지 소스를 볼 수 있습니다. 

 

5. 페이지 소스보기를 해서 나온 소스를 전체 복사해 줍니다.

 

6. 복사한 소스를 스프링 프로젝트의 home.jsp에 붙여 넣어줍니다. 

 

7. 그런 뒤 다시 다운받았던 폴더로 돌아가셔서 그 안에있는 폴더들을 전부다 복사합니다. 

오픈소스마다 다른데 저의 경우에는 css와 vendor라는 폴더가 있군요.

 

8. 복사한 폴더를 webapp밑에 resources폴더에 넣어줍니다.

그런뒤 다시 home.jsp로 가주세요.

 

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

9. home.jsp에보시면 이런 식으로 끝이. css로 끝나는 css파일 링크들이 있을 것입니다. 이문장들을

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/vendor/bootstrap/css/bootstrap.css">

위와 같은 형식으로 전부 바꾸어줍니다 또한 

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

이렇게 끝이. js로 끝나는 자바스크립트 경로는

<script src="<c:url value="/resources/js/raphael.min.js" />">
<script src="<c:url value="/resources/js/morris.min.js" />">
<script src="<c:url value="/resources/js/morris-data.js" />">

위와 같은 형식으로 바꿔줍니다. (그대로 복붙만 하면 안 되시고 자신의 폴더 경로를 위 소스와 같은 형식으로 설정해줘야 해요.)

 

10. 여기까지 하시고 실행을 시키시면 보시는 바와 같이 스프링 프로젝트에 BootStrap이 잘 적용되신 걸 보실 수 있습니다.