준비중..
05 Bootstrap 프레임워크
# 웹 페이지를 만들다: Bootstrap
프론트엔드 프레임워크인 부트스트랩(bootstrap) 활용법에 대해 알아보자.
## 목차
1. 학습목표
2. 부트스트랩이란?
3. 부트스트랩 사용하기
4. 부트스트랩 컴포넌트
## 학습목표
+ 부트스트랩을 활용한 웹 페이지 생성
## 부트스트랩이란?
부트스트랩은 프론트엔드 프레임워크다.
### 프론트엔드
프로그램은 사용자에게 보여지는 부분과 보여지지 않는 두 부분으로 나눌 수 있다. 여기서 보여지는 부분을 프론트엔드라 한다.
### 프레임워크
프레임 워크란, 개발의 생산성을 증가시켜주는 하나의 거대한 도구이다.
만약 여러분이 햄버거를 주문할 때, "신선한 빵에 패티를 노릇하게 굽고, 양상추와 피클 그리고 베이컨을 사이에 얹어 주세요" 라고 주문한다면 얼마나 답답하겠는가?
프레임워크를 사용하면 다음과 같이 주문 가능하다.
> "빅맥 주세요"
## 부트스트랩 사용하기
먼저 피들(https://jsfiddle.net/) 사이트에 접속하자.
다음으로 부트스트랩 홈페이지(https://getbootstrap.com)로 이동한다.
스타터 템플릿(https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template) 코드를 복사해서 피들에 붙여보자.
html
```
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<Script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<Script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
```
적당히 레이아웃 설정을 하고, 코드를 실행하면 아래와 같이 나온다.
## 부트스트랩 컴포넌트
### jumbotron
점보트론은 아래와 같은 구성요소(component)다.
어떻게 만들어야 할까? 아래 코드를 추가보자.
```
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr>
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#">Learn more</a>
</div>
```
위 코드는 부트스트랩 공식 사이트(https://getbootstrap.com)에서 `jumbotron`을 검색하면 쉽게 찾을 수 있다.
코드확인: https://jsfiddle.net/sehongpark/azo37nmL/5/
### navbar
이번에는 네비게이션바를 추가해보자.
도큐먼트 검색창에 navbar를 입력하고,
조금 내려가보면 샘플코드가 있다.
코드가 많아 복잡해 보인다. 하지만 쫄지 말자. 아래 문서에 하나하나 친절(?)하게 영어로 설명해주고 있으니.. 아무쪼록 복붙하여 다음 결과를 만들자.
코드확인: https://jsfiddle.net/sehongpark/azo37nmL/7/
### Layout
이번에는 레이아웃에 대해 알아보자. 아래 페이지를 만들려면 어떻게 해야할까?
위 페이지를 만드려면 레이아웃에 대한 개념을 잡아야 한다.
부트스트랩은 행(row)과 열(column)으로 레이아웃을 설정한다. 한 행은 12개의 열로 뉜다. 그렇다면 하나의 행을 3등분 해보자.
```
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
```
코드확인: https://jsfiddle.net/sehongpark/azo37nmL/11/
## 연습문제
아래의 페이지들을 만들어보자.
### Ex01: 로그인 페이지
힌트: [form](https://getbootstrap.com/docs/4.1/components/forms/)을 참조할 것.
### Ex02: 앨범 페이지
힌트: [card](https://getbootstrap.com/docs/4.1/components/card/)를 참조할 것.
## 요약
1. 부트스트랩: 프론트엔드 프레임워크로 HTML, CSS, JS를 컴포넌트 단위로 사용할 수 있게 함.
2. jumbotron: 회색 바탕에 큰 글씨를 보여줌
3. navbar: 홈페이지 상단의 네비게이션바를 생성
4. layout: 부트스트랩은 1개의 행을 12개의 열로 나누고 이를 기준으로 레이아웃을 잡음.