======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)**\\ 반응형 웹 디자인은 소형 스마트폰에서 대형 데스크톱에 이르는 모든 기기에서 보기 좋게 자동 조정되는 웹 사이트를 만드는 것입니다.\\ \\ ====예제==== Bootstrap Example

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:==== \\ **부트스트랩 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)를 보장하기 위해, '''' 요소 내부에 하기의 '''' 태그를 추가하세요\\ \\ ''width=device-width'' 부분은 (장치에 따라 달라지는) 장치의 화면 너비를 따르도록 해당 페이지의 너비를 설정합니다.\\ \\ ''initial-scale=1'' 부분은 해당 페이지가 브라우저에서 페이지를 처음으로 로딩할 때 초기의 확대/축소 수준(zoom level)을 설정합니다.\\ \\ ===3. Container=== 부트스트랩에는 사이트 콘텐츠를 감싸는 포함 요소(containing element)가 필요합니다.\\ \\ 선택할 수 있는 두 개의 컨테이너 클래스가 있습니다.\\ - ''.container'' 클래스는 반응형 고정 너비의 컨테이너를 제공합니다. - ''.container-fluid'' 클래스는 뷰포트(viewport)의 전체 너비에 걸쳐있는 화면 전체 너비의 컨테이너를 제공합니다. \\ =====Two Basic Bootstrap Pages===== 하기의 예제에서는 반응형 고정 너비의 컨테이너를 가진 기본 부트스트랩 페이지를 위한 코드를 확인합니다.\\ ====예제==== Bootstrap Example

My First Bootstrap Page

This part is inside a .container class.

The .container class provides a responsive fixed width container.

\\ 하기의 예제에서는 전체 너비의 컨테이너를 가진 기본 부트스트랩 페이지를 위한 코드를 확인합니다.\\ Bootstrap Example

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.

\\ {{tag>오션 Bootstrap Get Started}}