반응형
안녕들 하시죠!
이번시간에는 Bootstrap 사용법에 대해 알아보겠습니다.
1. Bootstrap 라이브러리 다운
Bootstrap 공식 홈페이지에 가면 다운받을 수 있습니다.
http://bootstrapk.com/getting-started/
아래에 파일을 첨부했고, 저는 3.3.2 버전을 사용했습니다.
bootstrap-3.3.2-dist.zip
0.25MB
bootstrap-4.3.1-dist.zip
0.68MB
2. eclipse에 Bootstrap 라이브러리 폴더 만들기
WebContent 밑에 resources라는 폴더를 만들고 라이브러리를 압축 풀어 드래그해 넣었습니다.
3. Bootstrap 샘플 얻기
여러 사이트가 있지만 저는 https://www.bootdey.com/ 에서 샘플을 찾아보았습니다.
원하는 샘플을 찾아 클릭해 들어갑니다.
저는 개인프로필 샘플을 찾아들어갔습니다.
https://www.bootdey.com/snippets/view/gray-profile
4. HTML code 복사
원하는 .jsp나 .html 파일에 HTML code를 복사해 <body>태그 안에 붙여넣기 합니다.
5. CSS 파일 만들기
CSS code 부분 복사 -> 아까 만들어 둔 eclipse의 resources 폴더의 css 폴더에 .css 파일을 하나 만들기 -> 붙여넣기.
6. Bootstrap CDN 추가
HTML code를 복사 붙여넣기 했던 페이지에 CDN 코드 추가.
<link rel="stylesheet" href="resources/css/bootstrap.css">
<!-- CSS code를 복사해 붙여넣은 PersonInfo, 본인 파일명과 root를 작성해주세요 --!>
<link rel="stylesheet" href="resources/css/PersonInfo.css">
<script src="resources/js/bootstrap.js"></script>
7. 결과화면
오늘은 여기까지입니다.
궁금한점 있으시면 댓글이나 쪽지 부탁드려요 감사합니다.
'웹 프로그래밍' 카테고리의 다른 글
| Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 2 (0) | 2019.09.30 |
|---|---|
| Spring에서 Servlet 매핑하기 (0) | 2019.09.03 |
| Spring - Maven 프로젝트 생성 및 설정 (0) | 2019.09.03 |
| Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1 (0) | 2019.09.01 |
| Javascript의 문서객체모델(DOM) (0) | 2019.07.13 |