본문 바로가기
Design

[부트스트랩] 소개와 사용 방법

플랫폼사업팀 2020. 4. 16. 15:15
반응형


부트스트랩 소개

 부트스트랩은 웹 디자인을 어떻게 하며 편리하게 할 수 있을까하는 목적에서 나온 프레임워크입니다.  실제로 부트스트랩을 활용하면 웹 디자인에 쏟아야 하는 노력을 절반이하로 줄일수 있으며, 특히 반응형 웹에 대한 고민을 혁신적으로 해결해 줄 수 있습니다.

 부트스트랩은 Mark Otto와 Jacob Thornton에 의해 Twitter에서 개발되었으며, GitHub에서 2011 년 8 월 오픈 소스 제품으로 출시되었습니다.



부트스트랩 설치

 부트스트랩 설치는 부트스트랩 사이트에서 다운로드 받은 후 크게 3가지 방법으로 사용할 수 있습니다.
  1. 웹서버에 올려서 사용하는 방법
  2. CDN(Contents Delivery Network)을 이용하는 방법
  3. Bower라는 패키지를 이용하는 방법

 가장 많이 이용하는 방법은 웹서버에 이용하는 방법이며, 2번째 방법은 CDN 상황에 종속적으로 되어 간혹 느려지는 경우가 발생될 수 있습니다. bower는 별도의 패키지관리 도구이며, 자세한 내용은 http://bower.io를 참고하시면 됩니다.


[그림1] 부트스트랩 다운로드

 http://bootstrapk.com/getting-started/#download 페이지를 방문하면 [그림1]과 같은 화면을 볼 수 있으며, "부트스트탭 다운로드" 를 클릭하면 "bootstrap-3.3.2-dist.zip"(현재버전3.3.2) 파일을 다운받을 수 있으며, 해당파일을 그림하면 아래와 같은 폴더 구조를 확인할 수 있습니다.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2



 파일 중에서 파일명 중간에 .min 인 파일은 원래 파일을 압축한 형태로, 실제 css파일 2개, js파일 1개, 폰트파일 1개로 구성되어 있다고 볼 수 있습니다. 그리고 [그림1]의 "소스 다운로드"를 클릭하여 동일하게 내용을 확인해 보면 다음과 같이 구성되어 있습니다.

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/



  dist 폴드 위의 bootstrap 폴더와 동일한 내용이며, 실제 소스코드는 웹개발할때에는 필요가 없고, 실제 부트스트랩을 만들거나 참고하여 웹개발을 할 경우에 참고하면 됩니다. [그림1]의 "Sass 다운로드"는 별도의 어플리케이션을 사용해야 하며, Ruby라는 웹프레임워크를 설치해야 됩니다. 자세한 내용은 bootstrap 홈페이지에서 확인할 수 있습니다.

 부트스트랩을 다운받지 않고 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>

또한 부트스트랩 홈페이지를 보면 node.js 사용자에게 익숙한 npm을 통해 설치하는 방법이 있어 소개하고자 합니다. 아래와 같이 npm 명령어를 통해 bootstrap을 설치할 수 있으며, require('bootstrap')을 사용하여 해당 모듈을 불러올 수 있습니다.

$ npm install bootstrap



부트스트랩을 이용한 간단한 예제(Hello World)

부트스트랩 홈페이지를 보면 초보자 템블릿을 제공하고 있지만,먼저 간단하게 HelloWorld를 출력하는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


위의 예제에서
  1. <html lang="en"> 부분은 html 문서의 시작부분이며, 언어설정을 ko로 변경가능합니다. 
  2. <meta charset="utf-8"> 캐릭터set을 utf-8로 지정하며, euc-kr을 지정할 수 있습니다. 
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 는 IE호환모들를 지정하는 부분입니다.
  4. <meta name="viewport" content="width=device-width, initial-scale=1"> 는 반응형 웹페이지를 적용해주는 부분이며, 모바일 혹은 PC 해상도에 따라 맞추도록 처리해 줍니다. 
  5. <link href="../css/bootstrap.min.css" rel="stylesheet"> 여기에서 부트스트랙 CSS를 적요하고 여기에서는 bootstrap.min.css 적용하였지만, bootstrap.css 내용과 동일합니다. 
  6. <script 부분에서 html5shiv.js 는 IE9 버전 이하의 브라우저에서 html5태그들이 적용할 수 있게 해주며, respond.min.js 는 IE9 버전 이하의 브라우저에서 반응형 웹을 적용하는 부분입니다.
  7. jquery를 위한 스크립트를 호출하는 적용하였으며, 구글 CDN을 사용합니다. 로컬 또는 서버에서 저장하여 사용할 수 도 있습니다.
  8. <script src="js/bootstrap.min.js"></script>는 부트스트랩에서 사용하는 자바스크립트를 적용하는 부분입니다
예제참고 : http://bootstrapk.com/getting-started/#template


기본적인 반응형 웹 페이지 예제 

 아래 [그림2] 부트스트랩 반응형 웹페이지의 간단한 예제입니다. 웹페이지의 해상도가 변할때 페이지도 같이 변화되는 것을 볼수 있습니다.

 

[그림2] 부트스트랩 스타터 템플릿

 

[그림3] 부트스트랩 반응형 웹 예시

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[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>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

예제참고 : http://bootstrapk.com/examples/starter-template/

부트스트랩은 자동으로 다양한 화면 크기에 따라 페이지를 자동으로 조정합니다. 반응형 기능을 끄기 위해서는 아래와 같이 처리하면 됩니다.
  1. 문서 내 CSS 에 명시된 뷰포트 <meta> 를 제거합니다.
  2. .container의 width 를 하나의 너비로 각 그리드 단계를 위해 오버라이드 합니다. 예를 들어, width: 970px !important;. 이것은 기본 부트스트랩 CSS 다음에 와야 합니다. 당신은 부가적으로 미디어쿼리나 약간의 selector-fu 로 !important 를 피할 수 있습니다.
  3. 만약 네비게이션 바를 사용하려면, 모든 네비게이션 바의 가리기와 보이기 행위를 제거해주세요.
  4. 그리드 레이아웃을 위해, .col-xs-* 클래스를 사용해주세요. 걱정하지 마세요, 매우 작은 기기 그리드는 모든 해상도에서 비례합니다.

다음으로 부트스트랩에 대한 브라우저별 호환성에 대해 알아보겠습니다.


[그림-4] 운영체제별 브라우저에서 부트스트랩 지원 여부

 비공식적으로, 부트스트랩은 리눅스의 크로미움과 크롬, 리눅스의 파이어폭스, 인터넷 익스플로러 7 에서도 그런 대로 모양이 보이고 동작이 되긴 하지만, 공식적으로 지원하는 것은 아닙니다.

인터넷 익스플로러 8 과 9 또한 지원하지만,완전하게 지원하지 않는 몇몇 CSS 속성과 HTML5 요소들을 주의해야만 합니다. 인터넷 익스플로러 8 은 미디어쿼리를 지원하기 위해 Respond.js 의 사용을 필요합니다.


[그림-5] IE8과 IE9에서 사용 가능 또는 불가능한 CSS 속성들

인터넷 익스플로러 10 은 viewport width 로 기기 너비 를 구분하지 않습니다. 그래서 부트스트랩의 CSS 내의 미디어 쿼리들을 적절히 적용되지 않으며, 아래의 CSS 코드를 추가하여 해결할 수 있습니다.

@-ms-viewport       { width: device-width; }

여기서 @로 시작되는 부분은 반응형 웹사이트를 위해 해상도별 별도의 CSS 코드를 입력하는 부분입니다. 다음의 CSS코드 및 자바스크립트 코드를 삽입하면 윈도우 폰에서 반응형 페이지를 올바르게 표시하도록 합니다.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

사파리 퍼센트 반올림

 OS X v7.1 이전의 사파리와 iOS v8.0 의 사파리의 렌더링 엔진은 .col-*-1 그리드 클래스들에서 긴 소수점 이하 자리에서 약간의 문제를 가지고 있습니다. 만약 당신이 12 개의 나눠진 컬럼들을 가지고 있다면, 당신은 다른 행의 컬럼들과 비교하여 짧은 것을 볼 수 있습니다. 사파리에서 업그레이로 해당 문제를 해결할 수 있지마, 차선책으로 아래와 같이 처리해 주면 됩니다.
  • 마지막 그리드 컬럼에 강제적으로 우측정렬을 위해 .pull-right 을 추가
  • 사파리를 위한 완벽한 반올림을 위해 비율을 수동으로 조정합니다. 

써드파티 지원 

 공식적으로 부트스트랩에서 써드파티 플러그인이나 에드온을 지원하지 않지만, 프로젝트들 진행중에 발생하는 잠재적인 이슈들을 피하는데 도움이 되기 위해, 부트스트랩에서는 몇가지 유용한 조언을 제공합니다


박스 사이징

 구글맵과 구글 맞춤 검색 엔진을 포함하는 몇몇 서드 파티 소프트웨어는, * { box-sizing: border-box; } 로 인해 부트스트랩과 충돌이 일어납니다. 그것은 padding 이 요소의 최종계산된 너비에 영향이 미치지 않도록 합니다. 경우에 따라서, 당신은 필요한 만큼 오버라이드를 하거나 (옵션 1) 전역의 박스사이징을 초기화할 수 있습니다 (옵션 2).

/* 박스사이징(Box-sizing) 초기화
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* option 1A: CSS 로 단일 요소 박스 모델을 override 합니다 */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* option 1B: 부트스트랩 Less 믹스인을 사용 단일 element 박스 모델을 override  합니다 */
.element {
  .box-sizing(content-box);
}

/* option 2A: CSS 로 전역 박스모델을 초기화합니다 */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* option 2B: 맞춤 Less 믹스인으로 전역 박스모델을 초기화합니다 */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}




* 위의 내용은 책 "부트스트랩으로 디자인하라. 저자: 양용석" 및 부트스트랩 공식 홈페이지 http://bootstrapk.com/getting-started/#download 참고하여 작성하였습니다.

'Design' 카테고리의 다른 글

[앱 디자인] 앱 출시 준비하기  (0) 2020.04.24
포토샵 - 클리핑 마스크 만들기  (0) 2020.04.21
HTML 템플릿을 인쇄용으로 가공하기  (0) 2020.04.20
현수막/명함 등 인쇄물 디자인하기  (0) 2020.04.17
아이콘을 폰트로 만들어 쓰기  (0) 2020.04.17

'Design' Related Articles

티스토리툴바