목차
- BS4 다운로드
- BS4 CDN
- BS4 체계
- BS4 예제 ★ - 박스형 / 와이드형
BS4 다운로드
https://getbootstrap.com/
※ 직접 다운받아 본인 사이트에 올리는 대신, 아래 CDN 방식 사용해도 됨.
BS4 CDN
※ CDN 소개
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
※ 위 4개 전부 필요. 즉, BS4는 JS 구성요소(예: Modal, Tooltip, Popover 등)에 대해 jQuery 및 Popper.js 사용.
BS4 체계
1. 기본 HTML 구조 (HTML5 사용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
</html>
2. <head> 태그 안에 viewport 메타태그 추가.
<meta name="viewport" content="width=device-width, initial-scale=1">
※ width=device-width : 기기 화면 너비에 따라 페이지 너비 설정 (장치에 따라 다름)
※ initial-scale=1 : 브라우저에 페이지가 처음 로드될 때, zoom (화면확대 정도) 설정.
3. 컨테이너 (= 콘텐츠 감싸는 요소) 클래스 (2종류)
.container
박스형 너비 (= 좌우에 공간 O)
.container-fluid
와이드형 너비 (= 좌우에 공간 X)
BS4 예제 ★ - 박스형 / 와이드형
[박스형: .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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background:coral">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
<p>홈페이지 제작관리</p>
</div>
</body>
</html>
결과보기
