티스토리 뷰
[Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system)
Unikys 2016. 6. 23. 02:06* 이번에는 Bootstrap으로 반응형 웹을 만드는데 가장 중요한 기능 중 하나인 CSS 기능들에 대해서 살펴볼 것이다. CSS 기능은 말그대로 CSS를 토대로 제공이 되는 기능들로 특정 class 명을 부여함으로써 Bootstrap에서 제공하는 틀대로 반응형으로 동작하도록 해주는 기능들을 이야기한다.
- 이전글
2016/05/19 - [자바스크립트 프레임워크] 시작 예고편
* Bootstrap 프레임워크 CSS 기능
: Bootstrap 프레임워크의 CSS 기능은 웹페이지에 적용하게 되는 CSS 규칙들을 기본적으로 설정하고, 기본 HTML 요소들에 대한 스타일을 적용하는 기능들을 포함하고 있다. 특히, Bootstrap 프레임워크에서 제공해주고 있는 반응형 웹페이지의 가장 큰 기능인 그리드 형식으로 여러 칼럼으로 보여주다가 브라우져의 크기가 작아지면 세로로 나열시키는 기능을 이 CSS 기능에서 적용하면 된다. 양식이나 버튼들에 대해서도 다양한 CSS 설정을 기본적으로 해주니 기본 UI 디자인에서 조금 더 향상된 CSS를 체험할 수 있다. 이러한 CSS 기능들을 사용하는 메뉴얼은 아래와의 URL에서 확인할 수 있고, 이 글의 많은 내용은 이 매뉴얼을 보면서 따라하고 작성하는 것이다.
* 기본 설정
: CSS 기능을 이용하기 위해서는 기본적으로 HTML5를 사용해야 한다. 그러기 위해서는 DOCTYPE에 대해서 HTML5로 정의해야 한다. 가장 위에 문서 양식은 아래와 같이 정의하면 된다.
<!DOCTYPE html>
: 그리고 Bootstrap 2에서는 모바일은 옵션으로 다루고 있었지만, Bootstrap 3에서는 모바일 우선(mobile first)인 프레임워크로 작성이 되었기 때문에 뷰포트에 대한 메타태그 설정을 하면 좋다. 물론 사이트에 따라서 이러한 뷰포트는 다르게 설정을 해도 되며, 기존의 사이트에 적용하는 경우에는 모바일에 대한 화면의 크기가 달라지기 때문에 예상하지 못하는 문제가 발생할 수 있으므로 조심해야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1">
: 이후에 <head> 태그 안에서 CSS 파일을 link 시키면 기본적인 CSS 기능들은 사용할 수 있다. 아래는 CDN에 있는 Bootstrap CSS 파일을 사용하는 것으로, 필요하면 개별적으로 서버에서 다운 받아서 사용하면 된다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
: 이렇게 끝내면 기본적으로 Bootstrap의 CSS 기능을 사용하는 준비는 끝났다. 자바스크립트 기능이나 위젯을 사용하려면 추가로 자바스크립트 파일을 불러와야 할텐데, 이 부분은 다음 글에서 설정하는 것을 알아보도록 하겠다. 이렇게 Bootstrap의 CSS를 가져오기만해도 Bootstrap에서는 기본적으로 브라우져에서 기본값을 가지고 서로 다르게 나타낼 수 있는 부분들의 스타일을 정의하여 동일하게 적용하도록 한다.
* Bootstrap의 기본 동작
: Bootstrap에서 해주고 있는 가장 기본적인 동작 중 하나는 바로 최대한 모든 브라우져들에서 동작할 수 있는 다른 스타일들을 하나로 통일 시켜주는 것이다. 예를 들면 <h1> 태그가 있으면, 각 브라우져별로 이 태그안에 있는 텍스트를 어떠한 방식으로, 어떠한 크기와 어떠한 폰트, 그리고 어떠한 굵기로 보여줄지 각각 판단해서 보여주어야 한다. 이럴 때 서로 다른 브라우져에서 만약 다르게 이 <h1> 태그를 표시해준다면 브라우져별로 보이는 내용이 달라질 수 있는 위험성이 있기 때문에 이러한 것들을 브라우져의 기본값을 사용하도록 하는 것이 아니라, 각 태그들에 대하여 기본적인 설정들을 명시하고 있다. 이러한 부분은 Nomalize.css 프로젝트에서 사용하고 있으며, 이 프로젝트는 아래의 URL에서 확인할 수 있다.
http://necolas.github.io/normalize.css/
: 이렇게 서로 다른 브라우져에서 동일하게 보여주도록 하는 기능을 제공하는 것만으로 크로스 브라우져에 대한 많은 고민을 없앨 수 있기 때문에 이 기능만 사용하더라도 많은 부분에 대해서 고민이 덜어질 것이다.
* 기본 컨테이너(container, container-fluid)
: Bootstrap에서 반응형으로 사용할 HTML 요소들을 둘러 싸는 기본 클래스로 container를 제공하고 있다. 이는 두 가지를 제공해주고 있는데 아래와 같다.
<div class="conainter"></div> <div class="conainter-fluid"></div>
: 각각의 container는 고정 넓이의 wrapper로 사용하면 되고, 화면에 꽉차도록 하고 싶으면 container-fluid 클래스를 부여하면 화면의 크기에 따라 다르게 반응할 수 있는 wrapper를 사용하게 되는 것이다. 각각의 CSS를 살펴보면 아래와 같다.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
: container 클래스는 보면 화면의 넓이에 따라서 750px, 970px, 그리고 1170px로 달라지는 것을 확인할 수 있고, container-fluid는 넓이를 설정하고 있지 않아서 화면에 꽉차도록 하는 wrapper이다. 여기서 별도로 width를 설정하고 있지 않기 때문에 display 스타일이 block인 경우 정상적으로 동작하므로 참고하면 좋을 것이고, 이러한 대표적인 HTML 태그는 바로 <div> 태그이므로 Bootstrap에서 container나 container-fluid는 기본적으로 <div> 태그를 사용하도록 하고, <div> 태그의 display를 바꾸지 않도록 조심하면 좋을 것이다.
* 그리드 시스템(Grid system)
: Bootstrap이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해서 가장 많이 사용이 필요한 기능이다. 특히 Bootstrap의 가장 핵심적인 기능이므로 기본적으로 어떻게 동작하고 이러한 기능들을 어떻게 활용할 수 있을지 조금 더 고민해보는 것이 Bootstrap을 완벽하게 활용할 수 있는 기회가 될 것이다. 여러 클래스들이 복잡하게 있는 것이 조금 어려울수도 있는데, Bootstrap에서는 기본적으로 12칼럼으로 나누어서 기능을 제공하고 있다고 생각하면 쉬울 것이다. 이를 테이블의 형식대로 row 클래스와 각종 col-* 클래스들로 자유롭게 구성이 가능하며, 이렇게 구성한 페이지들은 Bootstrap에서 알아서 크기에 따라 반응형으로 동작하도록 만드는 것이다. Bootstrap에서는 아래의 규칙대로 이러한 그리드 시스템을 구축하라고 권고하고 있다.
- row 클래스는 container나 container-fluid 안에 있어야 정상적인 배열이나 패팅을 지원해준다.
- row 클래스는 가로로 그룹 지을 칼럼들의 집합이다.
- 내용은 col-* 클래스 안에 있어야 하며, row의 직속 자녀 요소로 배치해야 한다.
- 칼럼은 총 12칼럼이 있는 것으로 정의하여 각 배치할 %에 따라서 클래스를 결정하면 된다. 예를 들어, 같은 넓이의 3개의 칼럼을 쓰고자 한다면 3개의 .col-xs-4 칼럼을 쓰면 된다.
- 12칼럼이 넘어가면 새로운 줄로 칼럼이 배치된다.
: 이러한 그리드 시스템은 row-col을 사용하는 것은 가로x세로의 크기를 적당하게 나누어서 내용을 배치하던 것과 유사하게 편리하게 사용할 수 있도록 도와주고 있어서 매우 유용하게 사용할 수 있다. 옛날에는 이러한 가로x세로 크기를 나누기 위해서 <table>태그를 사용하는 것을 좋아했지만, <table>태그를 사용하는 것이 HTML 재사용성과 소스 관리, 그리고 다른 브라우져간에 보여지는 것이 다르게 보여지는 경우가 많아서 화면에 내용을 보여줄 때에는 <div> 태그를 기본적으로 많이 사용하게 되었다. 그 이후로는 이러한 CSS를 다루는 것이 조금 어려워진면이 있어서 Bootstrap에서는 이러한 테이블 구조로 웹페이지를 디자인할 수 있도록 그리드 시스템의 기능을 제공해주고 있는 것이다.
: Bootstrap의 그리드 시스템에서 사용하고 있는 칼럼의 클래스 종류는 기본적으로 4가지가 있으며, 각각의 종류 뒤에는 12칼럼 중 몇개의 칼럼을 사용할지 명시하여 사용하면 된다.
.col-xs-* |
항상 가로로 배치 |
.col-sm-* |
768px 이하에서 세로로 표시 시작 |
.col-md-* |
992px 이하에서 세로로 표시 시작 |
.col-lg-* |
1200px 이하에서 세로로 표시 시작 |
: 어떻게 각 칼럼이 동작하는지 아래는 간단한 예로 직접 확인할 수 있다. 이러한 실제 예제들은 Bootsrap의 홈페이지에 가도 직접 다양하게 볼 수 있다.
<div class="container-fluid" >
<div class="row">
<div class="col-xs-3">.col-xs-3</div>
<div class="col-xs-3">.col-xs-3</div>
<div class="col-xs-3">.col-xs-3</div>
<div class="col-xs-3">.col-xs-3</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-lg-3">.col-lg-3</div>
<div class="col-lg-3">.col-lg-3</div>
<div class="col-lg-3">.col-lg-3</div>
<div class="col-lg-3">.col-lg-3</div>
</div>
</div>
: 이것을 실제로 웹페이지에 넣어보면 아래와 같다. 아래의 예는 PC 브라우져에서 브라우져의 가로 크기를 조절해보면 자동으로 화면의 배치가 달라지는 것을 확인할 수 있다.
: 각각의 xs, sm, md, lg는 화면 크기에 따라서 어떻게 동작하는지 설정할 수 있도록 구분이 되어지며, 그 이하에서는 세로로 펼쳐지게 되는 것을 확인할 수 있다. 만약 중간 화면에서는 4개의 칼럼이지만 작은 하면에서는 2개의 칼럼을 이루도록 하고 싶다면, 중간 화면에서의 col-md-3과 작은 화면에서의 col-sm-6을 함께 정의하면 가능하다. 아래는 간단한 예이다.
<div class="container-fluid" >
<div class="row">
<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
</div>
</div>
: 이렇게 두 가지를 함께 스타일 클래스를 적용함으로써 각각의 화면에 대해서 어떻게 보여질지도 다르게 설정하는 것이 아래와 같이 가능하다. 아래의 예도 화면의 크기를 다르게 하면 배치가 달라지는 것을 확인할 수 있다.
: 이러한 col-sm-* 등과 같은 내용이 어떻게 동작하는지 Bootstrap 내부적으로 CSS 파일을 살펴보면 아래와 같이 정의 되어있다.
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
/* 생략 */
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
/* 생략 */
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
/* 생략 */
: 먼저 col-xs-*을 보면 어느 화면에서나 동일하게 보이도록 설정이 되어있으며, 12개의 칼럼에 따라서 %로 나누어서 화면을 보여주도록 하고 있다. col-sm-*을 보면, 중간에 @media를 통해서 조건부로 스타일을 적용하도록 되어있으며, 화면의 크기가 768px 이상이어야지만 float: left 등의 스타일이 적용 된다. 비슷하게 col-md-*도 @media를 통해서 화면이 992px 이상인 경우에만 스타일이 적용되도록 되어있어, 해당 조건을 충족하지 않는다면 width는 가로로 화면을 가득차고 세로로 펼쳐지게 되는 것이다. 이러한 스타일을 통해서 서로 다른 화면 크기에 따라서 다르게 내용을 보여주도록 하고 있다. 12 칼럼으로 나누게 되면 1칼럼은 8.333..%의 넓이를 차지하게 되므로, 이를 col-md-11은 8.333..*11 등과 같이 이루어진 것을 확인할 수 있고, 이렇게 함으로써 12칼럼을 기본으로 하여 다양한 크기의 화면에 다르게 레이아웃을 적용할 수 있다는 것을 알 수 있다.
: 만약 12칼럼이 정확하게 일치하지 되지 않는 경우, 예를 들면 12칼럼보다 적은 경우에는 오른쪽에 공백이 생기고, 더 넘어서는 경우에는 12칼럼에 맞춰서 동작하게 된다. 아래가 각각의 그 예의 소스이다.
<div class="container jumbotron">
<div class="row">
<div class="col-md-5">.col-md-5</div>
<div class="col-md-5">.col-md-5</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-5">.col-md-5</div>
<div class="col-md-5">.col-md-5</div>
<div class="col-md-5">.col-md-5</div>
</div>
</div>
: 첫번째 row는 12칼럼이 되지 않게 설정한 예이고, 중간에는 전체 row 넓이 비교를 위하여 12칼럼을 4개로 나누어서 보여주고 있다. 그 밑에는 12칼럼을 넘어서 칼럼을 만든 경우 어떻게 되는지 보여주고 있다.
: 첫번째 줄은 총 10칼럼으로 12칼럼과 비교해서 적게 하게 되면 오른쪽에 공백이 생기게 되고, 세번째 줄은 총 15칼럼으로 12칼럼이 넘어가는 칼럼은 아래줄에 표시된다. 이를 실제로 동작하는 것을 보면 아래와 같다.
: 물론 col-md-* 이기 때문에 브라우져의 가로 크기가 991px 이하가 되면 각 칼럼은 세로로 쌓이게 된다.
* 그리드 시스템 응용
- visible-*
: 위의 row와 col-*은 기본적으로 그리드 시스템에서 사용하면서 발생하는 다양한 추가적인 이슈나 문제들에 대해서 추가적인 기능들을 제공해주고 있다. 가장 대표적인 상황이 큰 화면에서는 보여주지만, 작은 화면에서 보여주고 싶지 않은 내용일 것이다. 예를 들면 큰 화면에서는 큰 그림을 보여주지만, 작은 화면에서는 보여주고 싶지 않을 때 이러한 기능을 이용하면 된다. 아래의 예는 큰 화면에서는 4개의 칼럼으로 보여주다가, 작은 화면에서는 3개의 칼럼만 보여주고자하는 예의 소스이다. 이 경우에는 visible-md 등과 같이 해당 칼럼을 보여주고자 하는 크기를 지정해주면 된다.
<div class="container jumbotron">
<div class="row">
<div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div>
<div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div>
<div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div>
<div class="col-md-3 visible-md">.col-md-3 .visible-md</div>
</div>
</div>
: 위의 소스를 큰 화면에서 보면 아래와 같이 4개의 칼럼이 전부다 나타나는 것을 확인할 수 있다.
: 그리고 브라우져의 크기를 줄여보면 아래와 같이 visible-md의 클래스를 설정하였던 칼럼은 없어지고, 나머지 3개의 칼럼만 보여주는 것을 확인할 수 있다. 이 때에 3개의 칼럼을 화면 전체 넓이에 맞게 보여주기 위하여 col-sm-4로 작은 화면에서는 3칼럼으로 보여주도록 함께 설정하였다.
: 이에 대한 실제 예를 아래와 같이 확인할 수 있다.
: 이 visible-*에 대한 CSS 설정은 아래와 같이, 기본 설정 값으로는 display: none을 가지게 되며, @media 쿼리를 통해서 브라우져가 특정 크기 이상인 경우 display를 나타내는 것을 확인할 수 있다. 또한 display를 block, inline, inline-block 등으로도 설정할 수 있다.
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
/* 이하 생략 */
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
/* 이하 생략 */
: 여기서 visible-md의 @media 쿼리를 찾아보면 브라우져가 992px 이상, 1199이하인 경우에만 해당이 되므로, 다시 브라우져의 크기가 아주 커지게 되면 사라지는 것도 확인할 수 있다. 따라서 아주 커지는 경우에도 보여지게 하고 싶다면 visible-lg 도 함께 추가해주면 된다.
- clearfix
: 반응형으로 넓은 화면에서는 여러 개의 칼럼을 하나의 줄로 보여주다가 좁은 화면에서 여러 줄로 나누어서 보여주게 되는 경우 세로 길이가 다르면 약간 어긋나는 상황이 많이 있을 것이다. 대표적인 예가, 큰 화면에서 4칼럼으로 한줄로 보여주다가 작은 화면에서 2칼럼으로 2줄로 보여주는 상황일 것이다. 아래가 그 예이다. 아래는 예 소스이다.
<div class="container jumbotron">
<div class="row">
<div class="col-md-3 col-sm-6">.col-md-3
.col-sm-6
larger div</div>
<div class="col-md-3 col-sm-6">.col-md-3
.col-sm-6</div>
<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
</div>
</div>
: 중간 화면이상에서의 모양은 아래와 같이 나타난다.
: 그런데 이것이 작은 화면이 되면 앞서 구현했던 것처럼 2x2의 칼럼이 되기를 원하지만 각 div의 세로 길이가 다른 경우 이쁜 모양이 나오지 않고 아래와 같이 이상하게 틀어져 버린다.
: 이러한 경우를 해결하기 위하여 clearfix라는 클래스를 사용한다. 아래와 같이 clearfix를 넣으면 되고, 이 클래스는 아래와 같이 clear:both를 가지고 있기 때문에 줄 하나를 통째로 차지하여 줄을 맞춰주는 효과로 사용할 수 있다.
.clearfix:before,
.clearfix:after,
/* 생략 */ {
display: table;
content: " ";
}
.clearfix:after,
/* 생략 */ {
clear: both;
}
: 위와 같이 CSS를 설정하게 되면, CSS의 흐름이 초기화 되도록 하는 방법이다. 이렇게 clearfix를 이용해서 위의 어긋난 칼럼들을 보정하려면 아래와 같이 sm인 경우에 보이도록 하면 된다. 이를 보정한 예는 아래와 같다.
<div class="container jumbotron">
<div class="row">
<div class="col-md-3 col-sm-6">.col-md-3
.col-sm-6
larger div</div>
<div class="col-md-3 col-sm-6">.col-md-3
.col-sm-6</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
</div>
</div>
: 위와 같이 브라우져크기가 sm 인 경우에만 clearfix를 설정한 <div>가 보이도록 하고 있다. 이렇게 되면 아래와 같이 작은 브라우져 화면인 경우에 위와는 다르게 어긋나지 않고 윗줄이 동일하게 맞추어졌음을 확인할 수 있다.
: 아래는 실제로 그 예를 확인해볼 수 있다.
.col-sm-6
larger div
.col-sm-6
- offset
: 칼럼의 왼쪽에 공백을 두고 싶다면 그냥 빈 공백의 <div>를 공백을 두고 싶은 만큼 col-xs-*등을 넣어도 되지만, 이러한 공백의 <div>가 아니라 스타일을 적용함으로써 공백을 둘수도 있다. 이를 위해서 col-sm-offset-1 등과 같이 offset 클래스를 이용하면 된다. 아래는 1개의 칼럼만큼 공백을 두고 5칼럼 크기 만큼을 할당하는 예이다.
<div class="container jumbotron">
<div class="row">
<div class="col-sm-5 col-sm-offset-1">.col-sm-5 .col-sm-offset-1</div>
<div class="col-sm-5 col-sm-offset-1">.col-sm-5 .col-sm-offset-1</div>
</div>
</div>
: 위는 1칼럼 offset, 5칼럼 내용, 1칼럼 offset, 5칼럼 내용을 넣는 소스이며, 실제로 표시해보면 아래와 같이 작은 화면 이상에서는 그렇게 나타나고 작은 화면에서는 세로로 배치되는 것을 확인할 수 있다.
: offset 클래스의 CSS를 보면 아래와 같이 설정되는 것을 확인할 수 있다.
@media (min-width: 768px) {
/* 생략 */
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
/* 생략 */
: @media 쿼리로 브라우져 화면 크기가 768px 이상이면 margin-left를 칼럼의 크기를 설정하는 것과 동일한 방법으로 설정해주고 있다. 이렇게 margin-left를 설정해줌으로써 왼쪽에 공백을 생성하는 것이다.
- pull, push
: 화면의 크기에 따라서 순서를 바꿔주고 싶다면 pull과 push 클래스를 이용하면 된다. 위의 offset과는 유사하지만, 용도와 내부적인 CSS는 조금 다르다. 아래는 화면이 md 크기 이상일 때와 sm이하인 경우에 칼럼의 순서를 바꿔주고자 하는 경우의 예이다.
<div class="container jumbotron">
<div class="row">
<div class="col-sm-9 col-md-push-3">.col-sm-9 .col-md-push-3</div>
<div class="col-sm-3 col-md-pull-9">.col-sm-3 .col-md-pull-9</div>
</div>
</div>
: 위의 소스를 보면 sm 화면 이상에서의 9칼럼 크기 칼럼을 md 이상 화면에서는 push-3을 하고 있고, sm 화면 이상에서 3 칼럼 크기의 카럼을 md 이상 화면에서 pull-9를 설정하였다. pull 클래스는 왼쪽으로 칼럼을 당긴다고 생각하면 되고, push는 칼럼을 오른쪽으로 미는 기능이라고 생각하면 된다. 이에 대하여 실제로 col-sm-9가 앞에 있지만, 중간 화면에서는 아래와 같이 col-sm-3 칼럼이 앞에 있는 것을 확인할 수 있다.
: 그리고 브라우져의 크기를 줄여서 시험해보면 아래와 같이 다시 col-sm-9가 앞으로 오는 것을 확인할 수 있다.
: 이 예를 실제로 아래와 같이 구현됨을 확인할 수 있다.
: 이에 대한 CSS 설정을 확인해보면 아래와 같다.
@media (min-width: 992px) {
/* 생략 */
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
/* 생략 */
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
/* 생략 */
: col-md-pull-*과 push-*은 위와 같은 CSS로 992px 화면 이상에서 조건부로 동작하게 되어있으며, col-md-pull-*은 right에서부터 떨어지는 거리를 %를 부여하여 오른쪽에서 밀어서 당겨지는(pull)것과 같은 느낌을 주고, col-md-push-*은 left에서부터 떨어지는 거리를 %로 부여하여 밀어지는(push) 것과 같은 효과를 주게 된다. 이렇게 push와 pull을 조합하여 특정한 화면에서 서로 칼럼이 바꿔지도록 보여주는 것도 가능하다.
* Bootstrap 그리드 시스템 정리
- Bootstrap은 12칼럼을 기준으로 그리드 시스템을 가지고 있다.
- 그리드 시스템은 컨테이너가 있어야 하며, container는 고정길이, container-fluid는 100% width를 사용한다.
- 반드시 .row 클래스 아래에 .col-* 클래스들이 와야 한다.
- xs는 모든 화면/브라우져 크기에서 같은 모양, sm은 768px 이상 화면 기준, md는 992px 이상 화면 기준, lg는 1200px 이상 화면 기준으로 설정대로 보여준다.
- visible-*로 특정한 화면에만 칼럼이 보이도록 설정 가능하다.
- clearfix로 세로 길이가 다른 칼럼을 동일선상에 놓도록 하는 것이 가능하다.
- offset은 margin-left를 주어서 왼쪽에 공백을 두는 것이다.
- push와 pull을 이용해서 필요한 경우 칼럼의 순서도 바꿀 수 있다.
* 다음편에는 Bootstrap의 나머지 CSS 기능들에 대해서 살펴보고 이후에 컴포넌트 기능들과 자바스크립트 기능들에 대해서 살펴볼 것이다.
- Bootstrap 개발 문의: unikys@tistory.com
* 다음글 예정
- [Bootstrap] 나머지 CSS 기능
- [Bootstrap] 컴포넌트 기능
- [Bootstrap] 자바스크립트 기능
- Total
- Today
- Yesterday
- HTML5 튜토리얼
- Python
- 뽐뿌
- GX-10
- Javascript
- c++
- 안드로이드
- K100D
- ny-school
- php
- 삼식이
- 자바스크립트
- 속깊은 자바스크립트 강좌
- 강좌
- gre
- 샷
- 팁
- 탐론 17-50
- Android
- mini project
- TIP
- 안드로이드 앱 개발 기초
- gae
- java
- HTML5
- lecture
- Writing
- 사진
- 서울
- google app engine
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |