1. 부트스트랩 레이아웃의 핵심 그리드 시스템 부트스트랩은 그리드 시스템을 이용하여 레이아웃을 잡습니다. 그리드(격자)는 총 12열로 구성되어 있으며, 웹사이트의 레이아웃에 따라 구성을 변경해 줄 수 있습니다. 그리드 시스텝ㅁ은 부트스트랩의 핵심 레이아웃 시스템입니다. 그리드 시스템은 클래스 선택자를 기반으로 화면의 레이아웃을 잡아주는 역할을 합니다. .col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-8.col-md-4.col-md-4.col-md-4.col-md-4.col-md-6.col-md-6 상위 예제를 통해 해상도별 그리드 시스템이 변화하는..

1.4 서드파티(Third party) 지원부트스트랩은 공식적으로 어떤 플로그인이나 애드온 같은 것을 지원하지 않습니다만, 웹 에서 가장 많이 사용하는 몇가지 사항, 예를 들어 구글맵을 웹사이트에 사용하게 될 경우 문제점이 발생할 우려가 있기 때문에 이런 경우 해결할 방법을 제시합니다. 먼저 구글맵이나 구글 맞ㅁ춤 검색엔진의 경우 *{box-sizing:border-box;}을 사용하게 되면 부트스트랩과 충돌이 일어날 수 있습니다. 이런 경우에는 다음의 몇가지 옵션과 같이 처리하면 문제를 피할 수 있습니다. 위의 코드가 의미하는 것은 .google-map-canvas와 .google-map-cavas의 하위 모든 요소들의 속성을 box-sizing:xontent-box;로 처리하는 것입니다. 이 부분을 ..

1. 기본적인 반응형 웹 페이지 예제 부트스트랩 웹사이트에는 다양한 예제 페이지들이 있습니다. 간단하게 예제 하나를 살펴보겠습니다. 부트스트랩 스타터 템플릿이라는 페이지입니다. 아주 평범한 웹 페이지인데, 이 웹페이지의 폭을 변화시켜 보면 변화되는 것을 알 수 있습니다. 즉 웹 페이지가 가변적으로 변화할 때, 반응형 웹페이지로 바뀌는 것을 알 수 있습니다.부트스트랩 스타터 템플릿 - 브라우저 크기를 줄이기 전 - - 브라우저 크기를 줄인 후 - - 토글 버튼 클릭 시 - 부트스트랩은 기본적으로 반응형 웹 페이지를 만들어 주지만, 경우에 따라 반응형 웹 페이지가 필요 없거나, 어드민 페이지와 같이 반응형 웹페이지로 만들면 안되는 경우가 있습니다.부트스트랩에서 반응형 웹 페이지를 생성하지 않게 하는 방법은 ..

1. 부트스트랩을 설치해보자CSS스타일과 JQuery를 기반으로 한 자바스크립트 그리고 컴포넌트들로 구성되어 있어 원하는 기능이 있으면 단순하게 HTML 코드에 부트스트랩에서 정의된 선택자만 입력하면 편리하고 빠르게 사이트를 개발할 수 있습니다. 또한 부트스트랩은 Responsive 즉 반응형 웹이 기본으로 적용되기 때문에 데스크탑 버전의 웹사이트에서부터 모바일용 웹사이트까지 한꺼번에 개발할 수 있습니다. 2. 설치방법-1. 사용자의 웹 서버에 파일을 업로드하는 방법 : 직접 다운로드 받아 사용자의 웹 서버에 업로드하는 방식으로 가장 많이 사용-2. CDN(Content Delivery Network)을 이용하는 방법 : CDN을 이용하여 해당 파일들을 불러서 사용하는 방법으로 속도가 느려 질 수 있는 ..