목차
- BS 소개
- BS 버전
- BS 사용 이유
- BS5 얻는 방법 (2가지)
- BS5 CDN
- BS5 다운로드
- BS5 적용방법
- BS5 예제 - 박스형/와이드형
BS 소개
- 반응형 웹사이트를 쉽고 빠르게 제작 위한 프레임워크.
- HTML, CSS, JS 언어 기반의 템플릿과 플러그인 포함.
[예제]
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>HTML</h3>
<p>기본틀</p>
</div>
<div class="col-sm-4">
<h3>CSS</h3>
<p>디자인</p>
</div>
<div class="col-sm-4">
<h3>JS</h3>
<p>기능/동작</p>
</div>
</div>
</div>
결과보기
BS 버전
1. BS 버전별 배포 시기
- BS3 (2013년) - jQuery 기반. / float 기반의 그리드
- BS4 (2018년) - jQuery 기반. / flex 기반의 그리드
- BS5 (2021년) - 바닐라 JS 기반. / flex 기반 그리드 / 초초대형 기기 지원
2.
BS3, BS4 버전 지원 계속됨. (단, 현상유지O, 새기능지원X)
따라서, 구 버전 BS도 계속 사용 가능.
BS 사용 이유
- 사용 용이 - HTML, CSS 기본 지식만 있으면 사용 가능
- 반응형 지원 - 여러 기기에 맞게 웹사이트 쉽게 구현.
- 모바일 우선 접근 방식 - 모바일 우선 스타일 적용
- 모든 최신 브라우저와 호환됨. (단, IE11 지원 X)
PS. IE11 이하 지원하려면, BS3/BS4 이용
BS5 얻는 방법 (2가지)
- CDN (Content Delivery Network : 타사이트에 업로드 된 BS) 이용
- getbootstrap.com 사이트에서 다운로드 후, 내 호스팅 서버에 업로드
BS5 CDN
※ BS5 최신 버전 조회 (※ 핑크색 부분을 알맞게 수정)
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
PS1. CDN 이용 시 로드 속도 빠른 이유
- BS 적용된 타사이트 방문 때, 사용자 PC에 캐시화 됐을 가능성 큼.
- CDN 요청 시, 자동으로 사용자와 가장 가까운 서버에서 BS 가져옴.
PS2. JS 필수 여부
- 모달, 툴팁, 팝오버 등 JS 플러그인 사용 시 JS 필요.
- 단순히 BS의 CSS 부분만 사용 경우엔, JS 불필요함.
BS5 다운로드
https://getbootstrap.com/docs/versions/
BS5 적용방법
1. 기본 HTML 구조 (HTML5 사용)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Bootstrap 5 강의</title>
<meta charset="utf-8">
</head>
</html>
2. <head> 태그 안에 viewport 메타태그 추가.
<meta name="viewport" content="width=device-width, initial-scale=1">
PS.
- width=device-width : 기기 화면 너비에 따라 페이지 너비 설정 (장치에 따라 다름)
- initial-scale=1 : 브라우저에 페이지가 처음 로드될 때, zoom (화면확대 정도) 설정.
- 더 자세히보기
3. 컨테이너 (= 콘텐츠 감싸는 요소) 클래스 (2종류)
- .container - 박스형 너비 (= 좌우에 공간 O)
- .container-fluid - 와이드형 너비 (= 좌우에 공간 X)
BS5 예제 - 박스형/와이드형
[박스형: .container 클래스]
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Bootstrap 예제</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container" style="background:coral">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
<p>홈페이지 제작관리</p>
</div>
</body>
</html>
결과보기
[와이드형: .container-fluid 클래스]
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Bootstrap 예제</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background:coral">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
<p>홈페이지 제작관리</p>
</div>
</body>
</html>
결과보기
