Bootstrap 3.3.7 | Bootstrap 기본 | Bootstrap 기본 코드

그럼 Bootstrap을 사용한 Web 페이지가 어떻게 되는지, 그 기본적인 소스 코드를 작성해 보자. 우선, CDN을 사용하지 않고 파일을 로컬로 설치하는 경우의 작성법이다.

아래는 HTML 소스 코드가 예제이다. 이것을 설명하고 Bootstrap 폴더에 “index.html"와 같은 이름으로 저장한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
     
    <h1>Hello, world!</h1>
    <p>This is Bootstrap sample page!</p>
 
</div>
 
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>

(여기에서는 jquery-3.1.1.min.js라는 이름으로 “js"에 jQuery 파일을 배치한 전제로 설명되어 있다.)

언뜻 보면 보통 소스 코드 보이지만, 여러가지 포인트가 있다. 대충 포인트를 정리해 보자.

bootstrap.css / bootstrap-theme.css 로드

Bootstrap은 스타일 시트가 중요한 역할을 한다. “bootstrap.css"와 “bootstrap-theme.css” 2개는 반드시 로딩해 준다. 또한, 여기에서는 bootstrap.min.css / bootstrap-theme.min.css를 사용하고 있습지만, 어느 쪽도 동일하다.

스크립트는 어디에서 로드?

스크립트 파일은 두 가지가 있다. jQuery (jquery-xxx.js)과 Bootstrap 본체(bootstrap.js)이다. 이것들은 <body> 태그의 로드가 완료된 후에 로드하도록 한다.

이것은 Bootstrap 템플릿으로 그렇게 되어 있기 때문에, 거기에 맞춰서 있다. 그런데 사실은 <head> 내에 <script> 태그를 준비해도 문제없이 동작한다. Bootstrap 스크립트를 보면,

$(window).on('load', function () {……}

이렇게 하여 로드 후에 처리가 실행되도록 하여 제대로 동작되기 때문에, <body> 후에 로드하도록 작성하여서 움직이지 않거나 하지 않는다. 원하는 위치 바란다.

표시 내용은 <div class="container"> 안에 작성한다.

보면 알 수 있듯이 <body> 안에는 우선 <div class="container">라는 태그가 있고, 그 안에 내용이 작성되어 있다. 이것은 별도로 필수는 아니지만, 약속으로 이렇게 작성하는 것이 좋다.

이 <div class=“container”> 태그는 내용의 주위에 약간의 여백을 제공한다. 이것이 없으면 콘텐츠는 윈도우의 끝까지 빈틈없이 표시되어 버린다.

Bootstrap는 표시 디바이즈와 윈도우의 폭에 따라 콘텐츠의 폭을 자동 조정되지만, <div class="container">이 없으면 “처음부터 끝까지 꽉차게 표시"가 되어, Bootstrap 특징이 없어지고 말것이다.