목차
Bootstrap Get Started
- description : Bootstrap Get Started
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-23
What is Bootstrap?
- 부트스트랩은 더 빠르고 더 쉬운 웹 개발을 위한 무료 프런트엔드 프레임워크입니다.
- 부트스트랩은 선택할 수 있는 자바스크립트 플러그인과 더불어 typography, forms, buttons, tables, navigation, modals, image carousels 및 기타 여러가지를 포함합니다.
- 부트스트랩은 반응형 디자인을 쉽게 만들 수 있는 기능을 제공합니다.
반응형 웹 디자인(Responsive Web Design)
반응형 웹 디자인은 소형 스마트폰에서 대형 데스크톱에 이르는 모든 기기에서 보기 좋게 자동 조정되는 웹 사이트를 만드는 것입니다.
예제
My First Bootstrap Page
Resize this responsive page to see the effect!
Column 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Column 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Column 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
Bootstrap History
부트스트랩은 트위터의 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)이 만들고, 2011년 8월 깃허브에서 오픈 소스로 배포되었습니다.
2014년 6월, 부트스트랩은 깃허브에서 최고의 프로젝트였습니다.
Why Use Bootstrap?
부트스트랩의 장점:
- 사용의 편리함 : 단지 기본적인 HTML과 CSS의 지식만 있으면 누구든지 부트스트랩 사용을 시작할 수 있습니다.
- 반응형 기능 : 부트스트랩의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱에 맞게 조정됩니다.
- 모바일 우선 접근 방식 : 부트스트랩 3에서, 모바일 우선 스타일은 핵심 프레임워크의 일부분입니다.
- 브라우저 호환성 : 부트스트랩은 모든 최신 브라우저(크롬, 파이어폭스, 인터넷 익스플로러, 엣지, 사파리, 오페라)와 호환됩니다.
Where to Get Bootstrap?
웹 사이트에 부트스트랩 사용을 시작하는 두 가지 방법이 있습니다.
- getbootstrap.com에서 부트스트랩을 다운로드
- CDN으로 부트스트랩을 포함
Bootstrap CDN
부트스트랩을 직접 다운로드하고 호스팅하지 않으려면, CDN (Content Delivery Network)으로 부트스트랩을 포함시킬 수 있습니다.
MaxCDN은 부트스트랩의 CSS와 JavaScript에 대한 CDN 지원을 제공합니다. 또한 jQuery도 포함시켜야 합니다.
MaxCDN:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
부트스트랩 CDN 사용의 한 가지 이점 :
많은 사용자가 이미 다른 사이트를 방문 할 때 MaxCDN에서 Bootstrap을 다운로드했습니다.
결과적으로 사이트를 방문할 때 캐시에서 로딩되어 로딩 시간이 빨라집니다.
또한 대부분의 CDN은 사용자가 파일을 요청하면 가장 가까운 서버에서 제공되므로 로딩 시간이 빨라집니다.
jQuery
부트스트랩은 자바 스크립트 플러그인 (모달, 툴팁 등)에 jQuery를 사용합니다.
그러나 Bootstrap의 CSS 부분만 사용하는 경우에는 jQuery가 필요하지 않습니다.
Create First Web Page With Bootstrap
1. Add the HTML5 doctype
부트스트랩은 HTML5 doctype이 필요한 HTML 요소와 CSS 속성을 사용합니다.
페이지 시작 부분에 lang 속성 및 올바른 문자 세트와 함께 HTML5 doctype을 항상 포함하세요.
2. Bootstrap 3 is mobile-first
부트스트랩 3는 모바일 장치에 반응하도록 설계되었습니다. 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.
적합한 렌더링과 터치 확대/축소(touch zooming)를 보장하기 위해, <head> 요소 내부에 하기의 <meta> 태그를 추가하세요
width=device-width 부분은 (장치에 따라 달라지는) 장치의 화면 너비를 따르도록 해당 페이지의 너비를 설정합니다.
initial-scale=1 부분은 해당 페이지가 브라우저에서 페이지를 처음으로 로딩할 때 초기의 확대/축소 수준(zoom level)을 설정합니다.
3. Container
부트스트랩에는 사이트 콘텐츠를 감싸는 포함 요소(containing element)가 필요합니다.
선택할 수 있는 두 개의 컨테이너 클래스가 있습니다.
.container클래스는 반응형 고정 너비의 컨테이너를 제공합니다..container-fluid클래스는 뷰포트(viewport)의 전체 너비에 걸쳐있는 화면 전체 너비의 컨테이너를 제공합니다.
Two Basic Bootstrap Pages
하기의 예제에서는 반응형 고정 너비의 컨테이너를 가진 기본 부트스트랩 페이지를 위한 코드를 확인합니다.
예제
My First Bootstrap Page
This part is inside a .container class.
The .container class provides a responsive fixed width container.
하기의 예제에서는 전체 너비의 컨테이너를 가진 기본 부트스트랩 페이지를 위한 코드를 확인합니다.
My First Bootstrap Page
This part is inside a .container-fluid class.
The .container-fluid class provides a full width container, spanning the entire width of the viewport.
