이클립스 부트스트랩 템플릿 적용 - ikeullibseu buteuseuteulaeb tempeullis jeog-yong

Question

Web Programming/Bootstrap

목차 Show

부트스트랩 설치 , 적용 방법
부트스트랩?
1. 부트스트랩 CSS/JS 다운로드 방법
2. 이클립스에 다운받은 폴더 붙여넣기
3. html / jsp 파일 내에서 부트스트랩 불러오기
4. 부트스트랩 홈페이지에 만들어진 CSS 사용하기

2021. 6. 3.

부트스트랩 설치 , 적용 방법

부트스트랩 CSS/JS 다운로드
이클립스에 다운받은 폴더 붙여넣기
html / jsp 파일 내에서 부트스트랩 불러오기
부트스트랩 홈페이지에 만들어진 CSS 사용하기

부트스트랩?

트위터에서 개발한 UI라이브러리 입니다.
부트스트랩을 사용하게되면 웹 사이트를 개발할 때 웹디자인 때문에 시간이 길어지는 문제를 해결할 수 있고,
모바일 환경에 적합한 반응형 웹 사이트 개발을 만들 수 있습니다.

부트스트랩 다운로드 위치
https://getbootstrap.com/docs/5.0/getting-started/download/

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

1. 부트스트랩 CSS/JS 다운로드 방법

홈페이지에서 다운로드 해줍니다.

CSS 와 JS를 내려받습니다.

내려받은 후 압축해제 합니다.

2. 이클립스에 다운받은 폴더 붙여넣기

이클립스를 실행 합니다.
( dynamic web project로 진행 )

다운받은 폴더를 이클립스 프로젝트 폴더에 다음과 같이 붙여넣기

3. html / jsp 파일 내에서 부트스트랩 불러오기

그리고 부트스트랩이 사용될 페이지에 <script>와 <link>를 작성해주어야 합니다

부트스트랩 홈페이지에서 확인할 수 있다.
( 처음 다운로드 화면에서 getstart를 누르면 이동 )

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

홈페이지에서 코드를 복사해
이클립스 페이지에 붙여넣기

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Hi</title>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>


<link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</body>
</html>