반응형 웹 프레임워크 BootStrap 기본 개념의 이해.

BootStrap 이란?

부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다.

 

Bootstrapk.com에서 정리된 부트스트랩에 대한 요약 내용 입니다. 참고하시면 도움이 될듯합니다.

• 행은 반드시 적절한 정렬과 패딩을 위해서 .container (fixed-width) 나 .container-fluid (full-width) 안에 위치해야 합니다.
• 열들의 수평그룹을 만드는데 행을 이용하세요.
• 콘텐츠는 열안에 위치해야 합니다. 그리고 열들만이 행의 바로 아래에 올 수 있습니다.
• .row 과 .col-xs-4 같은 사전정의된 그리드 클래스들은 간편하게 그리드 레이아웃 만드는 것을 가능하게 합니다. Less 믹스인은 좀 더 시멘틱한 레이아웃을 위해 사용되어질 수 있습니다.
• 열은 padding 으로 사이 간격을 만듭니다. 패딩은 행 내에서 첫열과 마지막열을 위해 .row 내에 음수 마진으로 offset 되어 있습니다.
• 음수 마진은 아래의 예제들이 내어쓰기가 되어 있는 이유입니다. 그것은 그리드 열 내의 콘텐츠는 비그리드 콘텐츠와 정렬되기 위함입니다.
• 그리드 열은 12개의 가능한 열들을 원하는 만큼 명시하는 것으로 만들어집니다. 예를 들면, 같은 크기의 3개 열은 .col-xs-4 를 3개 사용할 수 있습니다.
• 만약 한 행에 12열보다 더 많이 배치된다면, 남은 열들은, 하나의 유닛으로, 새로운 라인에 감싸집니다.
• 그리드 클래스는 분기점 크기보다 크거나 같은 너비의 화면을 가진 기기에 적용됩니다. 그리고 보다 작은 기기의 그리드 클래스가 오버라이드 됩니다. 그리하여, 예를 들어 요소에 .col-md-* 클래스를 적용하는 것은 중간 기기에 스타일이 효과가 있는 것뿐만 아니라 .col-lg-* 클래스가 없다면 큰 기기에도 효과가 있게 됩니다.

 

제가 Bootstrap을 이용해 프로젝트를 진행해본 결과 BootStrap사용시 느끼는 장점 과 단점은 아래와 같습니다.

단점

• 새로운 기술을 익혀야 한다. 

장점

• 반응형이라 모바일 웹으로 사용가능 

• IE기반의 웹기술이 아니라 크로스 브라우징으로 웹 표준화에 맞춰서 개발하기 때문에 어떤 장치나 브라우저에서도 업무를 볼수 있음

• 디자이너가 없어도 화면 개발이 가능
• 생각보다 배우기가 쉽다

장점과 단점의 항목및 내용에서 보더라도 새로운 기술을 익혀야 하는 리스크(?)를 제외하면 단점보다 장점이 많은 기술임에는 분명합니다.

모바일 웹 화면과 데스크탑 화면을 따로 만들어서 서비스할 필요도 없고 하나의 화면으로 모든 상황 대처가 되기 때문에 모바일을 고려한 화면 설계가 필요한 부분이긴 하지만 화면을 각각 만드는 수고스러움에 비하면 생산성 향상에 도움이 되는 기술이라 할수 있습니다.

BootStrap 의 기본 원리 GridSystem

BootStrap의 구성 요소중 가장 기본이 되는건 Grid System이라 볼수 있습니다. 예전에 많이 사용했던 HTML TABLE와 비슷한 개념이라고 할수 있는데 아래의 예제를 통해서 어떤건지 알아보도록 하겠습니다. 

 

Table

1	2	3
4	5	6

 

<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>

  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
</table>

GridSystem

 

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

위의 Table와 GridSystem은 유사합니다. Table의 TR은 GridSystem의 Row라 기억하시면 됩니다. Table의 TD는 Col로 기억하면 됩니다.

 

가장 중요한 핵심 포인트는 Tr의 개념을 가지고 있는 Row에는 col이 최대 12개가 들어갈수 있습니다.  Row에는 12개의 col이 들어가며 위와같이 col-md-4면 col-md-1이 4개를 합친 간격을 가지게 됩니다.

 

 

 

아래의 표와같이 col , col-sm , col-md , col-lg , col-xl 등의 옵션이 있습니다. 사용자 화면 해상도에 따라서 변경되는 사이즈를 뜻합니다.

col-md 기준으로 디자인을 하면 1024*768 해상도 이상의 기기는 원하는 디자인을 만들어 낼수 있습니다.

 

 

기본 해상도 1024*768 이상의 해상도에서 표현되는 화면

 

 

모바일 해상도에서 표현되는 화면 (아이폰6기준 375*667)

가장 기본이 되는 GridSystem의 Col 속성을 알아보았습니다. 생각보다 별로 어렵지 않습니다. 다음 포스팅은 BootStrap 환경설정 및 위와 같은 컨트롤을 올려보는 내용을 가지고 시작하겠습니다. 아마 좀더 상세한 예제와 같이 연습해보시면 좀더 이해가 잘되지 않을까 합니다. 감사합니다.