Twitter Bootstrap으로 시작하는 Web UI

Twitter Bootstrap

bootstrap

트위터에서 공개한 Twitter Bootstrap (트위터 부트스트랩) 이라는

Frontend Framework(?) 입니다.

Bootstrap을 요즘 개발할 때 많이 쓰이죠.

특히 빠르게 프로토타이핑 할 때 쓰기도 하고 진짜 서비스를 개발할 때도 쓰입니다.

이유는 흔히 많이 쓰일만한 요소나 폼 같은 것들이 이쁜 모양으로 만들어져있고

제공하는 jQuery Plugin들이나 반응형 그리드 같은 기능들이 탑재되어있기 때문입니다.

시작

Bootstrap이 제공하는 css 파일과 js파일만 추가해주면

Bootstrap을 시작할 수 있습니다.

head 태그 안에 아래 두줄을 추가해주면 됩니다.

<head>
  <title>Hello, Bootstrap</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</head>

둘러보기

Bootstrap 공식사이트 에 가보면

워낙 문서화나 예제가 잘되어 있어서 사이트를 돌아다니면서 필요한 요소나 그런 부분들을

[복사 - 붙여넣기] 해서 코드로 가져와서 본인이 쓰고 싶은 대로 조금 수정을 해주어가며 쓰면 됩니다.

다른 자잘한 요소들 (버튼, 폼, 테이블, 아이콘, 라벨 등) 은 그냥 보면서 해도 되지만

기존에 그리드(Grid)시스템으로 웹페이지 레이아웃을 잡아본적이 없으신 분들은 조금 헷갈리실수도 있기 때문에

그리드 시스템, 특히 Bootstrap 기준으로 설명하겠습니다.

그리드란?

여러 브라우저, 버전 마다 다른 브라우저에서 다르게 보이는 CSS를 normalize해주고 (일종의 대패질)

레이아웃을 그리드 단위로 해주어 좀더 균형잡힌 레이아웃을 만들도록 해주는 것입니다.

쉽게 말해서 길이가 다른 레고블럭을 이용해서 사이트의 레이아웃을 잡는 그런 것입니다.

Bootstrap말고도 다른 그리드들 같은 경우에는 여러개의 사이즈가 있지만

Bootstrap의 경우에는 그리드 한줄의 길이는 12입니다.

이 얘기는

[ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] 

[    2    ] [    2    ] [          4          ] [       3       ] [ 1 ]

[                6                ] [                6                ]

[                                  12                                 ]

                  [                 6               ]

전체적인 페이지를 위에 나온 것처럼

1 ~ 12 사이즈의 그리드를 한줄당 총합 12에 맞춰서

레이아웃을 그리는 겁니다.

엄청나게 실험적이고 예술적인 레이아웃을 구상하지 않는 이상

그리드로 안정감있고 균형잡히게 레이아웃을 잡을 수 있습니다.

위 그리드를 Bootstrap 코드로 보여드리면


<div class="row">
  <div class="col-md-1">1</div>1</div><div class="col-md-1">1</div>
  <div class="col-md-1">1</div>1</div><div class="col-md-1">1</div>
  <div class="col-md-1">1</div>1</div><div class="col-md-1">1</div>
  <div class="col-md-1">1</div>1</div><div class="col-md-1">1</div>
</div>

<div class="row">
  <div class="col-md-2">2</div>2</div>
  <div class="col-md-4">4</div>3</div><div class="col-md-1">1</div>
</div>

<div class="row">
  <div class="col-md-6">6</div>6</div>
</div>

<div class="row">
  <div class="col-md-12">12</div>
</div>

<div class="row">
  <div class="col-md-6 col-md-offset-3">6</div>
</div>