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

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


스프링에서 BootStrap적용하기

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

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


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

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


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


스프링에서BootStrap

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


스프링에서BootStrap


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

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


스프링에서BootStrap

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


스프링에서BootStrap

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


스프링에서BootStrap

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


스프링에서BootStrap

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

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


스프링에서BootStrap

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" />">

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


스프링에서BootStrap

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

댓글(4)

  • asdf
    2018.04.28 17:11

    이 글 덕에 부트스트랩 잘입혔네요 감사합니다

  • vv
    2019.04.05 11:35

    감사합니다^^

  • 지나가던사람
    2020.09.05 19:47

    감사합니다!!

  • 2021.04.14 11:25 신고

    좋은 내용 잘 보고 갑니다.
    감사합니다.

Designed by JB FACTORY