[Bootstrap] 반응형 웹을 위한 부트스트랩 사용 준비하기

 


#. Introduction


이번 포스팅에서는 부트스트랩(http://bootstrapk.com/)을 사용하기 위한 시작단계를 작성해 보도록 하겠습니다. 그 전에, 일단 부트스트랩이 뭔지 알아야겠죠? 부트스트랩은 효과적으로 반응형웹을 제작하고, 레이아웃을 구축하기 위한 CSS 프레임워크입니다. 그리드시스템, 버튼, 드롭다운 메뉴 등 웹페이지 프론트엔드쪽을 작성함에 있어 사용하기 편리한 도구를 제공합니다. 



CSS 프레임워크에는 여러종류가 있는데, 부트스트랩이 많이 사용되고 굉장히 유명한 프레임워크입니다. 부트스크랩 이외의 프레임워크로는 다음의 종류를 예로 들 수 있습니다. 필자의 경우에는 프레임워크보다 직접 만들어서 사용하는 것을 선호하는 편이지만, 프레임워크를 사용하면 웹페이지를 구성하는 속도가 확실히 빨라집니다.




#. Description


부트스트랩을 사용하기 위해서는 우선 다운로드를 받거나 CDN(Content Delivery Network) 를 사용해야 합니다. 다운로드를 받는 방법에는 여러가지가 있으나, 부트스크랩 자체를 다운로드 받는 것이 가장 편합니다. http://bootstrapk.com/getting-started/ 에서 다음의 버튼을 눌러 다운로드를 받을 수 있습니다.



또는 다음과 같이 CDN 을 통해서 HTML 문서에 포함시킬 수도 있습니다. 개인이 사용하기에 편한 방법을 사용하시면 되겠습니다.



<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


Bower(https://bower.io/) 또는 npm(https://www.npmjs.com/) 으로도 부트스크랩을 설치하실 수 있습니다.




#. Code



#. index.html


부트스트랩으로 드롭다운 메뉴(http://bootstrapk.com/components/#dropdowns) 의 소스코드입니다. 부트스트랩은 jQuery(https://code.jquery.com/를 필요로하기 떄문에 반드시 jQuery 를 로드한 다음 사용해야 합니다. 단순히 부트스트랩 컴포넌트에서 코드를 복사붙여넣기 하는 것만으로도 기능이 완성되기때문에, 직접 만들기 위해 고생할 필요가 없습니다. 이 포스팅에서는 코드에 대한 설명은 하지 않습니다. 다른 포스팅에서 작성 될 예정이기 때문이죠.


<!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">
    
    <!-- 부트스트랩 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>

    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
                data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>

    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>



#. Support browser


다음의 사항은 부트스트랩 문서에 나와있는 브라우저 지원 현황입니다.




#. PostScript 


부트스트랩 공식 블로그(http://blog.getbootstrap.com/) 를 통해 부트스트랩의 개발정보를 얻으실 수 있으며 부트스트랩 전시관(http://expo.getbootstrap.com/) 에서는 부트스트랩으로 작성된 홈페이지들을 볼 수 있습니다. 부트스트랩의 예제들은 http://bootstrapk.com/getting-started/#examples 에서 확인하실 수 있습니다.



신고