부트스트랩 시작하기

부트스트랩이란?

부트스트랩은 더 빠르고 쉬운 웹 개발을 위한 무료 프론트엔드 프레임워크입니다.
부트스트랩에는 타이포그래피, 양식, 버튼, 테이블, 탐색, 모달, 이미지 캐러셀 및 기타 여러 가지를 위한 HTML 및 CSS 기반 디자인 템플릿과 선택적 JavaScript 플러그인이 포함되어 있습니다.
또한 부트스트랩은 반응형 디자인을 쉽게 만들 수 있는 기능을 제공합니다.

반응형 웹 디자인이란?

반응형 웹 디자인은 소형 휴대폰에서 대형 데스크탑에 이르기까지 모든 장치에서 보기 좋게 자동으로 조정되는 웹 사이트를 만드는 것입니다.

부트스트랩 예제

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
</div>
</div>

부트스트랩 기록

Bootstrap은 Mark Otto와 Jacob Thornton이 Twitter에서 개발했으며 2011년 8월 GitHub에서 오픈 소스 제품으로 출시되었습니다.

2014년 6월에 부트스트랩은 GitHub의 No.1 프로젝트였습니다!

부트스트랩을 사용하는 이유

부트스트랩의 장점:

사용하기 쉬움: HTML 및 CSS에 대한 기본 지식만 있으면 누구나 부트스트랩 사용을 시작할 수 있습니다.
반응형 기능: Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱에 맞게 조정됩니다.
모바일 우선 접근 방식: Bootstrap 3에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.
브라우저 호환성: Bootstrap은 모든 최신 브라우저(Chrome, Firefox, Internet Explorer, Edge, Safari 및 Opera)와 호환 됩니다.

부트스트랩 버전

이 튜토리얼 은 2013년에 출시된 Bootstrap 3 를 따릅니다. 그러나 최신 버전도 다룹니다. 부트스트랩 4(2018년 출시) 및 부트스트랩 5(2021년 출시) .

Bootstrap 5 는 Bootstrap의 최신 버전 입니다 . 새로운 구성 요소, 더 빠른 스타일 시트, 더 많은 응답성 등. 모든 주요 브라우저 및 플랫폼의 안정적인 최신 릴리스를 지원합니다. 단, Internet Explorer 11 이하는 지원하지 않습니다.

Bootstrap 5와 Bootstrap 3 & 4의 주요 차이점은 Bootstrap 5가 jQuery 대신 JavaScript 로 전환되었다는 것입니다 .

참고: Bootstrap 3 및 Bootstrap 4는 중요한 버그 수정 및 문서 변경 사항에 대해 팀에서 계속 지원하며 계속 사용하는 것이 완전히 안전합니다. 그러나 새로운 기능은 추가되지 않습니다.

부트스트랩은 어디서 구하나요?

자신의 웹 사이트에서 부트스트랩 사용을 시작하는 두 가지 방법이 있습니다.

다음을 수행할 수 있습니다.

getbootstrap.com에서 부트스트랩 다운로드
CDN에서 부트스트랩 포함

부트스트랩 다운로드

Bootstrap을 직접 다운로드하고 호스팅하려면 getbootstrap.com 으로 이동하여 지침을 따르십시오.

부트스트랩 CDN

Bootstrap을 직접 다운로드하고 호스팅하지 않으려면 CDN(Content Delivery Network)에서 포함할 수 있습니다.

MaxCDN은 Bootstrap의 CSS 및 JavaScript에 대한 CDN 지원을 제공합니다. jQuery도 포함해야 합니다.

MaxCDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Bootstrap CDN 사용의 한 가지 이점:
많은 사용자가 다른 사이트를 방문할 때 이미 MaxCDN에서 Bootstrap을 다운로드했습니다. 결과적으로 사용자가 사이트를 방문할 때 캐시에서 로드되므로 로드 시간이 빨라집니다. 또한 대부분의 CDN은 사용자가 파일을 요청하면 가장 가까운 서버에서 제공되므로 로딩 시간이 빨라집니다.

jQuery
Bootstrap은 JavaScript 플러그인(예: 모달, 도구 설명 등)에 jQuery를 사용합니다. 그러나 Bootstrap의 CSS 부분만 사용한다면 jQuery가 필요하지 않습니다.

부트스트랩으로 첫 번째 웹 페이지 만들기

1. HTML5 문서 유형 추가

부트스트랩은 HTML5 doctype이 필요한 HTML 요소와 CSS 속성을 사용합니다.

lang 속성 및 올바른 문자 집합과 함께 페이지 시작 부분에 항상 HTML5 문서 유형을 포함합니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. Bootstrap 3는 모바일 우선입니다.

Bootstrap 3는 모바일 장치에 반응하도록 설계되었습니다. 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.

적절한 렌더링 및 터치 확대/축소를 보장하려면 요소 <meta>내부에 다음 태그 를 추가하세요.<head>

부품 은 width=device-width장치의 화면 너비를 따르도록 페이지 너비를 설정합니다(장치에 따라 다름).

이 initial-scale=1부분은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정합니다.

3. 컨테이너

또한 부트스트랩에는 사이트 콘텐츠를 래핑하기 위한 포함 요소가 필요합니다.

선택할 수 있는 두 가지 컨테이너 클래스가 있습니다.

.container클래스는 반응형 고정 너비 컨테이너 를 제공합니다 .
이 .container-fluid클래스는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너 를 제공합니다.

.컨테이너

.용기 유체

두 개의 기본 부트스트랩 페이지

다음 예제는 기본 부트스트랩 페이지(반응형 고정 너비 컨테이너 포함)에 대한 코드를 보여줍니다.

예시

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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>

다음 예는 기본 부트스트랩 페이지(전폭 컨테이너 포함)에 대한 코드를 보여줍니다.

예시

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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>

❮ 이전의 다음 ❯

부트스트랩 3 튜토리얼

부트스트랩 그리드

부트스트랩 테마

부트스트랩 예제

부트스트랩 CSS 참조

부트스트랩 JS 참조

부트스트랩 시작하기

부트스트랩이란?

부트스트랩 예제

부트스트랩 기록

부트스트랩을 사용하는 이유

부트스트랩 버전

부트스트랩은 어디서 구하나요?

부트스트랩 다운로드

부트스트랩 CDN

MaxCDN:

부트스트랩으로 첫 번째 웹 페이지 만들기

두 개의 기본 부트스트랩 페이지

예시

예시