JQuery나 BootStrap을 제작사 홈페이지에서 다운로드 받아 추가하는 방법 이외에 Maven에 dependency로 script만 추가하여 주면 프로젝트에 추가를 할 수 있습니다. 스크립트는 일반 예제에서 복사해 와도 되지만 프로젝트 별로 사용할 버전을 선택 해야 하기 때문에 그냥 복사하기 보다는 공신력이 있는 사이트를 이용해서 참조를 하는것이 좋습니다. 여기서 2곳의 사이트를 소개합니다.
https://mvnrepository.com/
mvnrepository.com에서는 라이브러리를 검색을 통하여 찾을 수 있습니다.
귀찮기는 하지만 검색을 하면 버전 별로 정보가 리스트 되고 리스트에서 원하는 버전을 선택 하면
스크립트를 복사해올 수 있습니다. Gradle을 클릭 하면 Gradle용 스크립트가 나옵니다.
https://www.webjars.org/
webjars.org에서는 첫 화면에 자주 사용하는 라이브러리가 리스트 되어 있고 최신 버전으로 스크립트를 얻을 수 있습니다.
만약 최신 버전이 아닌 예전 버전이 필요하다면 콤보 박스를 클릭하면 해당 라이브러지의 버전 정보가 리스트 되고 원하는 버전을 선택하여
상단 Build Tool:에 있는 Maven 버튼을 선택하면 스크립트를 얻을 수 있습니다.
복사한 스크립트는 pom.xml에 추가를 해줍니다.
<dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.4.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.4.1</version> </dependency> |
그리고 Maven Update와 Maven install을 하면 추가된 라이브러리를 jsp에 사용할 수 있게 됩니다.
js 파일 위치
추가한 라이브러리를 jsp에서 사용하기 위한 path는 어떻게 하면 알 수 있을까요? 추가된 라이브러리의 .jar 파일을 확장하면 정확한 js 파일 위치를 찾을 수 있습니다.
이렇게 찾은 위치를 script에 반영하면 됩니다.
<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
bootstrap도 동일한 방법으로 위치를 확인 합니다.
그리고 스크립트에 반영 합니다. bootstrap은 기본 제공 css를 사용하려면 css와 js를 모두 반영합니다.
<script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css">
사용 예
간단하게 JSP파일을 생성해서 잘 반영이 되었는지 사용을 해 봅니다.
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title>
<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="/webjars/jquery/3.4.1/jquery.min.js"></script> <script src="/webjars/popper.js/1.16.0/umd/popper.min.js"></script> <script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head> <body>
<div class="container">
<table class="table table-hover"> <thead class="thead-dark"> <tr> <th>codeId</th> <th>code</th> <th>codeNm</th> <th>codeDc</th> </tr> </thead> <tbody> <tr> <td>COM001</td> <td>REGC01</td> <td>단일 게시판 이용등록</td> <td>단일 게시판 이용등록</td> </tr> <tr> <td>COM001</td> <td>REGC02</td> <td>커뮤니티 등록</td> <td>커뮤니티 등록</td> </tr> <tr> <td>COM001</td> <td>REGC03</td> <td>동호회 등록</td> <td>동호회 등록</td> </tr> <tr> <td>COM001</td> <td>REGC04</td> <td>명함등록</td> <td>명함등록</td> </tr> </tbody>
</table>
</div> </body> </html> |
잘 나오는 군요. bootstrap을 사용하면 디자인을 없이도 어느 정도의 퀄리티 있는 사이트 제작이 가능 합니다.
- copy coding -
'Framework' 카테고리의 다른 글
| [Spring Boot] 모든 Database SQL 로그 출력 (0) | 2020.04.11 |
|---|---|
| Spring Boot (STS 3.9.11) SVN Subclipse 설치 사용 (2) | 2020.03.04 |
| [Spring Boot] Path with "WEB-INF" or "META-INF" (4) | 2020.02.15 |
| [Spring Boot] Security 사용 방법 (STS 4.5.1) (0) | 2020.02.09 |
| [Spring Boot STS 4.5.1] MyBatis Oracle 연동 (8) | 2020.02.06 |