Bootstrap 시작하기
What is Bootstrap?
- Bootstrap 은 빠르고 쉬운 웹 개발을 위한 무료 프론트-엔드 프레임워크(front-end framework)이다.
- Bootstrap 는 typography, forms, buttons, tables, navigation, modals, image carousels 및 여러 다른 것들과 선택적인 JavaScript plugins 을 위한 HTML 과 CSS 기반의 디자인 템플릿을 포함한다.
- Bootstrap 는 또한 반응형 디자인을 쉽게 만들 수 있는 기능을 제공한다.
 |
반응형(Responsive) 웹 디자인이란? 반응형 웹 디자인은 데스크 탑에서 작은 휴대폰에 이르기까지 모든 장치에서 자동으로 자신을 조정하여 잘 보이도록 하는 웹사이트를 만드는 방법에 대한 것이다. |
|---|
Why Use Bootstrap?
Advantages of Bootstrap:
- Easy to use: 단지 HTML 과 CSS 에 대한 기본 지식을 가진 누구도 Bootstrap 사용을 시작할 수 있다.
- Responsive features: Bootstrap 의 응답형 CSS 는 phones, tablets, 과 desktops 에 따라 조정한다.
- Mobile-first approach: Bootstrap 3 에서, 모바일-우선(mobile-first) styles 은 코어 프레임워크의 일부이다.
- Browser compatibility: Bootstrap 은 모든 현대의 브라우저들(Chrome, Firefox, Internet Explorer, Safari, and Opera)과 호환된다.
Where to Get Bootstrap?
당신의 웹사이트에서 Bootstrap 을 사용할 수 있는 두 가지 방법
You can:
- getbootstrap.com 에서 Bootstrap 다운로드
- CDN 으로부터 Bootstrap 포함시키기
Downloading Bootstrap
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.
Bootstrap CDN
Bootstrap 을 다운로드해서 여러분이 스스로 호스트 하지 않으려면, CDN (Content Delivery Network) 으로부터 그것을 넣을 수 있다.
MaxCDN 은 Bootstrap's CSS 와 JavaScript 를 위한 CDN 지원을 제공하며, 또한 jQuery 도 포함한다 :
MaxCDN:
<!--
Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
Bootstrap CDN 을 사용 시 장점: 많은 사용자들이 다른 사이트들을 방문 시에 이미 MaxCDN 으로부터 Bootstrap 을 다운 받았을 것이다. 그 결과, 그들이 당신의 사이트를 방문할 때, 캐시(cache)로부터 로드되며, 로딩 시간이 빠르게 됩니다. 또한, 대부분의 CDN은 사용자가 그로부터 파일을 요청하면, 그들에게 가장 가까운 서버로부터 로드되게 하여, 더 빠른 로딩시간을 얻게됩니다. |
|---|
Bootstrap을 사용한 첫 웹 페이지 만들기
1. Add the HTML5 doctype
Bootstrap 은 HTML5 doctype 을 필요로 하는 HTML 요소와 CSS 속성(properties)들을 사용한다.
페이지 시작 부분에 항상 lang 속성과 정확한 문자 세트(character set)와 함께 HTML5 doctype을 포함시킵니다:
<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="utf-8">
</head>
</html>
2. Bootstrap 3 is mobile-first
Bootstrap 3 은 모바일 장치에 반응하도록 설계되어 있습니다. 모바일-우선 (Mobile-first) styles 은 코어 프레임 워크의 일부 입니다.
적절한 렌더링(rendering)과 터치 줌을 보장하기 위해서, 다음과 같이 <head>
요소 안에 <meta> 태그를 추가합니다. :
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 부분은 (기기에 따라 다른) 장치의
화면폭(screen-width)을 따라 페이지 폭을 설정합니다.
initial-scale=1 부분은 브라우저에 의해서 처음 로드 된 때의 초기 줌 레벨을
설정합니다.
3. Containers
Bootstrap 은 사이트 내용을 감싸기 위한 컨테이너(container) 요소를 필요로 합니다.
선택할 수 있는 두 개의 컨테이너(container) 클래스가 잇습니다.:
.container클래스는 반응형 고정 폭 콘테이너 (fixed width container)를 제공하고
.container-fluid클래스는 전체 폭 콘테이너 (full width container) (뷰 포트(viewport) 전체 폭에 펼처지는) 를 제공한다.
Note: 콘테이너는 중첩될 수 (다른 콘테이너 안에 콘테이너를 넣을 수) 없다.
Two Basic Bootstrap Pages
다음의 예는 기본 Bootstrap 페이지(with a responsive fixed width container)에 대한 코드를 보여줍니다.:
Example
<!DOCTYPE html>
<html
lang="en">
<head>
<title>Bootstrap Example</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div
class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Try it Yourself »
다음의 예는 기본 Bootstrap 페이지(with a full width container)
에 대한 코드를 보여줍니다.:
Example
<!DOCTYPE html>
<html
lang="en">
<head>
<title>Bootstrap Example</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div
class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Try it Yourself »