1. 부트스트랩이란

     1.1 제작사 http://getbootstrap.com/ (한글 번역 개인사이트 http://bootstrapk.com/)
          - 부트 스트랩은 트위터에서 개발한 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      
          - 이번엔 전 국민에 사랑을 받는 홈에디터플러스 사용자를 위한 설치 방법입니다.
          - 파일 복사가 전부이고 홈에디터플러스 설치라고 하기엔 어색하지만 아직 개념이 잡히지 않은 코더들을 위해 설명하겠습니다.

           http://bootstrapk.com/getting-started/에 접속해 Download Bootstrap 을 클릭합니다.

           맨위에 있는 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. 마무리

     - 쉬운 부트스트랩 설치 과정이었습니다. 
     - 다음강좌부턴 본격적인 부트스트랩 강의에 들어가겠습니다.



댓글을 달아 주세요