부트스트랩(Bootstrap) 소개

안녕하세요. 오늘은 부트스트랩에 대해 간단히 소개해보도록 하겠습니다.

아래 내용들은 w3schools를 참조 및 발췌한 내용 입니다. ^^

부트스트랩이란?

• 부트스트랩은 프론트엔드 진영에서 웹 개발을 빠르고 쉽게 하기위한 무료 프레임워크 입니다.
• HTML, CSS를 기반으로 된 템플릿을 제공합니다. (forms, buttons, tables, navigation 등..)
• 오픈소스 입니다. (GitHub)

부트스트랩은 어떻게 개발되었는가?

• 트위터의 Mark Otto, Jacob Thornton 이란 사람에 의해 개발되었다.
• 2011년 GitHub에 오픈소스로 release 되었고, 2014년 6월에 GitHub에서 1등 프로젝트가 되었습니다.
• 트위터 팀내에서 개발시 다양한 라이브러리를 사용하므로써, 시간이 많이 걸리고 일관성이 떨어짐. 부트스트랩을 통해서 일관성 및 시간절약이 가능해졌다.

부트스트랩의 장점

• 3버전부터는 모바일 중심의  프레임워크로 변경되었다.
• 인기있는 브라우저들 모두 지원
• 사용자 디바이스에 최적화 화면을 보여주는 반응형을 기본으로 한다.
  - 단일코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 크기를 조절합니다.
• html, css에 대한 지식만 있다면 사용하는데 어렵지 않다.

부트스트랩 사용방법

• 부트스트랩을 직접 다운받는 방법
  - http://getbootstrap.com/getting-started/
• CDN(Content Delivery Network) 방식으로 프로젝트에 포함하는 방법
  - bootstrap.min.css, bootstrap.min.js, jquery.min.js 를 포함하면 됩니다.
  
  <!-- 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.2/jquery.min.js"></script>
  
  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

반응형 화면 설정 방법

• head 부분에 meta 태그에 속성으로 아래와 같이 설정합니다. 
  - <meta name="viewport" content="width=device-width, initial-scale=1">
• 또한, div의 class에 container를 적용시켜야 부트스트랩 효과를 적용이 가능합니다.
  - <div class="container">...</div>

참고

• http://bootstrapk.com/getting-started/ , 부트스트랩 한국어 사이트입니다.
  (주의할점은 현재 부트스트랩 최신버전은 3.3.6인데, 3.3.2까지만 번역되어있습니다.)
• http://getbootstrap.com/getting-started/ , 부트스트랩 공식 홈페이지
• https://github.com/twbs , GitHub 페이지