부트스트랩 사용하는 방법은
부트스트랩을 다운받아서 프로젝트에 적용시켜서 사용하는 방법과
<head>태그에서 링크를 연결해서 사용하는 방법이 있다.
첫번째로 부트스트랩을 직접 다운받아서 사용하는 방법을 알아보자.
http://bootstrapk.com/ << 부트스트랩 홈페이지에 들어가자
부트스트랩 다운로드 버튼을 클릭한다.
부트스트랩 다운로드 를 클릭하면 zip파일이 다운로드 되고 zip파일 압축 해제 후 폴더에 들어가보면
세개의 폴더가 있는데 저 폴더 세개를 복사해서
프로젝트 폴더 - src - main - webapp - resources 폴더에 붙혀넣기
두번째로 <head>태그 내에서 링크를 걸어 사용하는 방법을 알아보자.
부트스트랩 CDN은 서버에서 데이터를 직접 받아와서 쓸 수 있다.
마찬가지로 부트스트랩 다운로드 페이지로 가면
아래에 보면 부트스트랩 CDN이 있고 박스 오른쪽에 copy를 눌러서 jsp <head>태그 안에 넣으면 된다.
uri주소를 긁어서 크롬 주소창에 입력해보면
api방식으로 제공을 해준다.
자, 그럼 직접 실습을 해보자
Spring Legacy Project 하나 생성 후
src - main - webapp - WEB-INF - views - home.jsp에서 작업을 할 것이다.
부트스트랩을 다운받아서 사용하려면 resources폴더에 부트스트랩 폴더 내에 있는 3개의 폴더를 복사해 준다.
CDN방식으로 하려면 위에서 설명한 것 처럼 <head>태그 내에 값을 넣어주자.
부트스트랩 적용 작업이 끝났다면 예시로 로그인 폼을 만들어보자
아래의 코드는 반응형 웹 로그인 폼이다.
(다른 기능 없이 오로지 view만 보이는 예시입니다.)
위의 코드로 실행시켜보면
만약 login-box의 배경 색상을 변경하고 싶다면 <head>태그에서
lime에 원하는 색상을 적어주면..
끝
아래는 전체코드이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ page session="false"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8"); %> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <title>Home</title> <meta charset="UTF-8"> <style type="text/css"> .login-box{ background-color: lime; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="login-box"> <form role="form"> <legend>Login</legend> <div class="form-group"> <label>아이디</label> <input type="text" class="form-control" placeholder="아이디를 입력하세요"> </div> <div class="form-group"> <label>비밀번호</label> <input type="password" class="form-control" placeholder="비밀번호를 입력하세요"> </div> <div class="form-group"> <input type="submit" class="btn btn-default btn-login-submit" value="login"> <a href="#" class="btn btn-primary">회원가입</a> </div> </form> </div> </div> </div> </div> </body> </html> | cs |