bootstrap 오픈데이터 사용법

프론트 작업을 많이 하지는 않지만 취미로 사이트를 한두개 만들면 항상 문제는 보여지는 ui부분이었다.

 

언제까지나 투박한 버튼과 각진 네모를 사용할수가 없는 사람들을 위해 한 사이트를 소개한다.

https://startbootstrap.com/

Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap

bootsrtrap오픈데이터? 들이 모여있는곳이다.

 

들어가서 맘에드는 것들 다운로드 하면 zip파일로 받아지는데 이걸 압축을 풀면 assets, css, js 폴더와 index.html파일 이렇게 총 4개가 나온다.

필자의 경우는 이것들을 프로젝트의 webapp 폴더 안에 resources 폴더를 만들고 그 안에 넣는다.

 

그다음에 사용하려는 jsp 파일에 지금 같이 다운받아진 index.html을 그대로 복사해서 사용한다.(맨위의 이 텍스트는 그대로 둬야한다. jsp로 인식할수 있게 하기 위해)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 

그리고 윗부분

<link href="../../resources/css/styles.css" rel="stylesheet"/>

아랫부분

<script src="../../resource/js/scripts.js"></script>

이렇게 두 곳만 잘 위치에 맞게 위치 시켜주면 된다.

 

html을 조금이라도 해본 사람이면 간단한 파일 수정정도는 할수 있을테니 입맛에 맞게 사용하면 된다.