부트스트랩(Boot Strap) 이용하기
부트스트랩이란?
트위터사에서 제공하는 반응형 웹프로젝트 개발을 위한 HTML,CSS,JS 프레임워크이다
부트스트랩 다운로드 링크
http://bootstrapk.com/getting-started/#download
부트스트랩 사용법
1.부트스트랩은 무엇일까?
처음 접하는 이에게 부트스트랩이라 하면 언뜻 프로그램 또는 라이브러리로 제공되는 하나의 프레임워크로 생각할 수있다.
또는 레이아웃 전체가 템플릿으로 제공되어 복붙만 하면 된다고 생각할 수도있다.
부트스트랩은 CSS, 자바스크립트를 이용하여 미리 설정해둔 형태라고 생각하면 된다.
CSS가 웹 문서의 전반적인 스타일을 미리 정해 둔 스타일 시트이고 자바스크립트는 이런 스타일시트에 클래스명을 주어
콤포넌트들이 동적으로 움직이게 만들어주고있다.
예를 들어
.btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; } |
위와 같은 CSS를
$(document) .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) { var $btn = $(e.target) if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') Plugin.call($btn, 'toggle') if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault() }) .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type)) }) }(jQuery); |
위와 같은 스크립트로 동작하게끔 만드는 것이다.
2.부트스트랩 설치하기
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 --> <title>부트스트랩 101 템플릿</title> <!-- 부트스트랩 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js --> <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 --> <script src="js/bootstrap.min.js"></script> </body> </html> |
설치할 페이지에 위의 빨간 문장을 입력해주면 설치는 끝이난다
설치 위치는 각자의 파일 위치를 설정해주면 된다
<예제 1>
본인은 <예제 1> 같이 파일을 설정하였다.
이로서 부트스트랩을 사용하기 위한 기본 설정은 끝이 났다.
3. 부트스트랩을 콤포넌트에 적용하기
먼저 간단한 예제를 들면서 설명하겠다.
버튼을 하나 만들어주자.
<예제 2>
페이지에 위한 같은 코드를 입력하면 다음과 같은 버튼이 나타난다.
클래스 명에 "btn"을 설정하면
부트스트랩 CSS에서 미리 설정해놓은 클래스명을 입력하면
그에 따라 바로 적용이되는 것이다 밑에는 응용 예제이다
<예제 3>
클래스명 btn 다음에 추가적으로 btn-default, btn-success 같은 옵션을 추가하니
스타일을 형태가 변환되었다.
부트스트랩에서는 각 클래스마다 이러한 옵션을 여러가지 제공하고있다.
이 옵션들은 메인 클래스명 다음에 연속적으로 추가가 가능하다.
<예제 4>
버튼1:<input type="button" class="btn btn-success well-sm" value="안녕하세요">
버튼2: <input type="button" class="btn btn-danger well-lg" value="안녕하세요">
버튼3: <input type="button" class="btn btn-info well-lg hidden" value="안녕하세요">
각 클래스명을 보면 옵션들이 계속 추가가 가능하다는 것을 알수있다.
1번 버튼 옵션은 success라는 버튼모양을 주고 well-sm옵션으로 오목한 효과를 준다.
2번 버튼 옵션은 danger 버튼 모양을 주고 well-lg라는 옵션을 주고있다.
3번 버튼은 보이지 않는데 바로 hidden옵션을 사용함으로서 페이지에서 안보이게끔 처리되었다.
버튼이라는 하나의 콤포넌트에 대해서만 알아봤지만
사용 방법을 알았으니 이제 수십가지의 콤포넌트들을 자유자재로 이용할 수 있을 것이다.
콤포넌트에 따라 css가 적용되는 것이 아니라 클래스명에 따라 적용됨으로 무궁무진하게 CSS를 활용할 수 있다.
예를 들어 버튼을 위해 만들어둔 CSS이지만
<div>태그에 <div class="btn-danger"></div>와 같이
사용할 수 있다는 것이다.
4. 부트스트랩 지원 콤포넌트
아이콘 드롭다운 버튼 그룹 버튼 드롭다운 입력 그룹 네비게이션 네비게이션 바 경로 페이지네이션 라벨 배지 점보트론 페이지 제목 썸네일 진행바 미디어 객체 목록 그룹 패널 반응성 임베트 웰 |
<지원 콤포넌트>
부트스트랩은 위와 같은 콤포넌트를 지원하는데 각각의 활용법이나 소스코드를 사이트에서 직접 설명해주고있다.
시간이 많다면 다 설명하고 싶으나 위의 예제를 통해서 충분히 활용가능하다 생각하므로 링크로 대체하겠다.
http://bootstrapk.com/components/
5.부트스트랩 수정하기
부트스트랩을 이용하다보면
' 아 이거 색상이 맘에 안드는데?'
' 크기가 좀 더 컸으면 좋겠어'
' 위치를 왼쪽으로 이동시킬수 없을까?'
하는 생각이 들었을 것이다.
이러한 부트스트랩을 수정하는 방식에는 2가지 방법이 있다.
(1) 부트스트랩 원본파일을 수정하는 방법
(2) 다른 CSS 파일을 생성하여 덮어씌우는 방법
먼저
1번 방법에 대해 설명하겠다.
(1) 부트스트랩 원본파일을 수정하는 방법
<예제 5>
Bootstrap.css 파일을 열어서 수정하면된다.
클래스명을 Ctrl + F 로 찾아서 수정해주면 편하다.
이 글을 읽으시는 분들은 CSS의 기본 속성에 대해서는 알것이라 생각하여
설명을 줄인다.
transparent,rgba(0, 0, 0, .0); 와 같은 기능은
투명 처리시에 유용하다
bootstrap.css 파일에서는 스타일의 형태변형이 가능하고
bootstrap.js 파일에서는 콤포넌트의 동작형태 변경이 가능하다.