부트스트랩 기본 구조 (Bootstrap Basic Structure)
부트스트랩 파일 구조 (Bootstrap File Structure)
부트스트랩을 사용하기 위해서는 CSS와 JavaScript 파일이 필요합니다. 부트스트랩의 파일 구조는 다음과 같습니다:
css/bootstrap.min.css: 부트스트랩의 최소화된 CSS 파일.bootstrap.css: 부트스트랩의 전체 CSS 파일.js/bootstrap.bundle.min.js: Popper.js가 포함된 부트스트랩의 최소화된 JavaScript 파일.bootstrap.min.js: 부트스트랩의 최소화된 JavaScript 파일.bootstrap.js: 부트스트랩의 전체 JavaScript 파일.
이 파일들을 사용하여 부트스트랩의 스타일과 기능을 웹 페이지에 적용할 수 있습니다.
HTML 문서에 부트스트랩 포함하기 (Including Bootstrap in HTML Document)
부트스트랩을 사용하려면 HTML 문서에 부트스트랩의 CSS와 JavaScript 파일을 포함시켜야 합니다. 기본 HTML 문서 구조는 다음과 같습니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 예제</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>부트스트랩 예제</h1>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
위 예제에서는 부트스트랩의 CSS와 JavaScript 파일을 포함하여 웹 페이지에서 부트스트랩의 스타일과 기능을 사용할 수 있게 설정하였습니다.
CDN을 통한 부트스트랩 사용 (Using Bootstrap via CDN)
CDN(Content Delivery Network)을 이용하면 부트스트랩 파일을 다운로드하지 않고도 사용할 수 있습니다. CDN을 사용하면 파일이 전 세계 여러 서버에 분산되어 있기 때문에, 파일 로딩 속도가 빨라질 수 있습니다.
CDN을 통한 부트스트랩 사용 예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 CDN 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>부트스트랩 CDN 예제</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
위 코드에서는 부트스트랩 CSS와 JavaScript 파일을 CDN에서 불러오고 있습니다. 이렇게 하면 로컬에 파일을 저장하지 않아도 부트스트랩을 사용할 수 있습니다.
로컬에 부트스트랩 설치하기 (Installing Bootstrap Locally)
부트스트랩 파일을 로컬에 다운로드하여 사용하는 방법입니다. 공식 웹사이트에서 최신 부트스트랩 파일을 다운로드한 후, 프로젝트 폴더에 파일을 배치합니다.
로컬 설치를 통한 부트스트랩 사용 예제:
- 부트스트랩 파일 다운로드: Bootstrap Download
- 프로젝트 폴더 구조 설정:
my_project/ ├── css/ │ └── bootstrap.min.css ├── js/ │ └── bootstrap.bundle.min.js └── index.html
- HTML 문서에 부트스트랩 파일 포함:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 로컬 설치 예제</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>부트스트랩 로컬 설치 예제</h1>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
이렇게 설정하면 로컬에 저장된 부트스트랩 파일을 사용하여 웹 페이지를 구성할 수 있습니다. 로컬 설치의 장점은 인터넷 연결이 없어도 부트스트랩을 사용할 수 있다는 점입니다.