Spring 설정관련

Spring Boot Maven + JSP 부트스트랩 적용

hazy1993 2022. 12. 30. 15:07

최종 경로 설정

결론은 : bootstrap은 resources/satatic , WEB-INF/views/include 폴더 생성 후 hearder 생성.

 

 

부트스트랩을 적용해보려고한다.

 

JSP프로젝트이기에 WEB-INF 쪽에 BootStrap 파일들을 넣어주고 import 해주면 된다고 생각을했으나,

 

thymeleaf와 마찬가지로 main/resurces/static에 넣어주어야 한다.

괜히 한시간동안 삽질했다. 이래서 초기 셋팅 및 환경을 여러번 잡아봐야 하나보다.

 

views/include 폴더를 만들고 hearder.js 파일을 만들고 전체적으로 import해줬다.

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
       <link href="bootstrap/css/bootstrap.rtl.css" rel="stylesheet" type="text/css"/>
       <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
       <link href="bootstrap/css/bootstrap-grid.rtl.css" rel="stylesheet" type="text/css" />
       <link href="bootstrap/css/bootstrap-grid.css" rel="stylesheet" type="text/css"/>
       <link href="bootstrap/css/bootstrap-utilities.rtl.css" rel="stylesheet" type="text/css"/>
       <link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet"  type="text/css" />
       <link href="bootstrap/css/bootstrap-reboot.rtl.css" rel="stylesheet" type="text/css" />
       <link href="bootstrap/css/bootstrap-utilities.css" rel="stylesheet"  type="text/css"/>
       <script src = "bootstrap/js/bootstrap.js"></script>
       <script src = "bootstrap/js/bootstrap.esm.js"></script>
       <script src = "bootstrap/js/bootstrap.bundle.js"></script>

</head>
<body>

</body>
</html>

 header.jsp

 

불필요한 부분들 삭제해야하나(<body>태그라던지....)

이 부트스트랩은 import했을때 node.js 가 없어서 그런지 영문 모르는 오류가나는 파일이 하나 있다.

 

자세한이유는 모른다. 

하고싶었던건 적용하기 위한 폴더 경로였으니 , 일단 그냥 넘어간다

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="include/header.jsp"></jsp:include>
<html>
<head>
    <title>테스트게시판</title>
      <p>테스트게시판!!화면 !!</p>

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>

</head>
<body>

</body>
</html>

 

 

일단 적용 완료.

 

무료템플릿 받아서 다시 적용할꺼다.