1. 부트스트랩이란
- 부트 스트랩은 트위터에서 개발한 UI 라이브러리 입니다.
- 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)이 개발하였습니다. (둘이 안사귐 게이아님)
1.2 목적
- 모바일 환경에 적합한 반응형 웹을 개발하기 위한 라이브러리
- 디자인으로 인한 개발시간을 단축하기 위한 개발도구
2. 부트스트랩 설치
2.1 설치설명
- 부트스트랩 설치는 압축을 풀기만 하면 됩니다.
- 프로젝트 할때 디자인과 퍼블리셔가 css,js 폴더를 만들어주고 나서 개발을 시작할텐데 바로 그 CSS 폴더를 제공해주는 것 입니다.
- 웹스톰 같은 IDE를 프로젝트시 자동으로 다운로드 하여 환경을 제공해주고 있지만, 일부 에디터툴은 홈페이지에서 다운로드 하여 압축을 풀어 배치 하면 완료 됩니다.
- 설치 과정을 살펴보겠습니다.
2.2 설치방법 / webstrom
- 웹스톰은 훌륭한 개발 도구입니다. jetbrain IDE중 하나입니다. 이 툴의 사용법은 나중에 올려보겠습니다.
- 이 IDE는 부트스트랩을 자동으로 설정해줍니다.
- 방법은 너무 간단해 글로만 남기려다. 처음 접하는 코더분들도 있으니 그림도 남겨봅니다.
▼ 프로젝트를 create 합니다. 해당 화면이 바로 안나오면 file->new project 클릭
▼ 그리고 중간에 있는 Twitter Bootstrap을 클릭합니다. 로케이션에 폴더를 지정하고 버전은 새로고침 버튼을 누르면 최신버전까지 릴리즈 되어 있습니다.
▼ 최신 버전을 선택하고 오른쪽 아래에 Create
▼ 아래화면 처럼 완성 되어 있습니다. 네 이게 다입니다. 앞서 말했다 시피 그냥 css , js 폴더를 제공 받은것입니다.
▼ 웹스톰으로 설치가 완료하였습니다.
2.3 설치방법 / Home Edit Plus
- 이번엔 전 국민에 사랑을 받는 홈에디터플러스 사용자를 위한 설치 방법입니다.
- 파일 복사가 전부이고 홈에디터플러스 설치라고 하기엔 어색하지만 아직 개념이 잡히지 않은 코더들을 위해 설명하겠습니다.
▼ 맨위에 있는 Download Bootstrp을 클릭하여 zip 파일을 다운로드 합니다.
▼ Less로 구성된 source code는 시간이 나면 다시 리뷰하겠습니다.
▼ 그리고 압축파일을 풀어 그대로 사용할 폴더에 이동시킵니다.
▼ 압축 푸는법은 아시죠??? 개발자라면 7z 도 가능한 반디집을 추천 합니다.
▼ 에디터 플러스에 해당 폴더를 이동하면 역시 Css, JS폴더가 보입니다. 설치(?)가 완료되었습니다.
▼ 웹스톰으로 설치시 보이지 않던 fonts 폴더가 있네요. 해당 부분은 차차 알아가보도록 합니다.
3. 부트스트랩 실행
▼ index.html 파일을 루트(/) 경로에 만듭니다. (이제부턴 jetbrain으로)
▼ OK 버튼을 눌러 생성하고
▼ 그리고 해당 파일에 아래 코드를 입력합니다.
▼ 부트스트랩을 쓰기 위한 아주 기초적인 형태입니다.
▼ 맨 아래쪽에 보시면 jquery.min.js 를 다운로드 하여 참조하였습니다. 구글 API서버도 훌륭하겠지만 다운로드 받아 참조하는게 이롭겠습니다.
▼ 그리고 자신만에 was로 실행해봅니다. (가장 쉬운건 IIS 서비스로 실행시키는거지요. 이부분도 어려운 코더라며 추후에 블로그를 남기겠습니다. )
▼ 하지만 IDE가 제공하는 환경을 사용해도 무방 합니다 웹스톰 alt+f2 에디터플러스는 ctrl+b 입니다.
<!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.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, Bootstrap!</h1>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="js/jquery.min.js"></script> 위 js를 다운받아 폴더에 참조하였습니다. 이렇게 하는게 더 좋겠죠? -->
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> - 드디어 Hello Bootstrap를 찍었군요.
- Hello를 보면 또 새로운 공부의 시작이라 생각이 듭니다.!!
5. 마무리
- 쉬운 부트스트랩 설치 과정이었습니다.
- 다음강좌부턴 본격적인 부트스트랩 강의에 들어가겠습니다.
'IT_Developers > Bootstrap' 카테고리의 다른 글
| 무료 부트스트랩 테마 사이트 - bootswatch.com (0) | 2021.06.30 |
|---|---|
| 부트스트랩 - bootstrap 테마 다운로드 사이트 / startbootstrap.com (0) | 2019.12.17 |
| Bootstrap | 강의 | 04 - 부트스트랩으로 이미지를 다루어 보자. / caption을 달아보자. (1) | 2017.07.09 |
| Bootstrap | 강의 | 03 - 버튼을 달고 전체 폭을 조종 / Button / container (0) | 2017.07.02 |
| Bootstrap | 강의 | 02 - 게시판 모양을 만들어 보자! / 테이블 / 페이징 (0) | 2017.07.02 |
댓글