[Bootstrap]그리드 시스템

Kamangs 2018. 1. 6. 08:42

2018. 1. 6. 08:42

728x90

참고:

[Package]Bower(Front End Pacakage 관리) 설치

[Bootstrap]부트스트랩 설치하기

부트스트랩을 사용하려면 먼저 그리드 시스템이라는 것을 알아야한다.

이는 부트스트랩의 핵심중 하나이자 반응형 웹을 만드는데 기본이된다.

먼저 부트스트랩을 이용한 html을 하나 제작해보자.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-2" style="border: 1px solid red">.col-md-2</div>
<div class="col-md-2" style="border: 1px solid red">.col-md-2</div>
<div class="col-md-2" style="border: 1px solid red">.col-md-2</div>
<div class="col-md-8" style="border: 1px solid red">.col-md-8</div>
<div class="col-md-4" style="border: 1px solid red">.col-md-4</div>
</body>
</html>

해당 부트스트랩 라이브러리의 경로는 본인의 경로를 사용하여야한다.

bootstrap.min.css를 사용하여 준다.

여기서 보면 div class가 보일 것이다. 이는 부트스트랩 내부에 들어있는 예약 클래스 이다.

그냥 두면 외곽이 어디에 위치해있는지 보이지 않을 테니 style로 border를 주고 외곽선을 빨간색으로 두어서 어떻게 표시되는지 보자.

<br>태그로 개행을 하지 않았음에도 불구하고 개행이 적용된 모습이다.

부트스트랩은 전체적으로 class이름으로 예약이 되어있다. 이 col로 시작하는 클래스는 한 웹페이지 어떠한 경우가 있어도12개가 한줄로 표현된다.

즉 한 줄에 col-md-1은 12개가 들어갈 수 있다. col-md-2는 6개가, col-md-3는 4개가 들어간다.

이 그리드 시스템을 이용한 레이아웃은 기본적으로 반응형 웹이다.

이 말이 무슨 뜻이냐면 가로 픽셀에 따라서 배치가 달라진다는 것이다.

과연 어떻게 배치가 되게 될까?

여러분이 한번 창을 줄여봐라.

어느 순간 갑자기 열들이 한줄에 표시되게 될것이다.

즉 보여주는 브라우저의 픽셀 크기에 맞춰서 화면이 자동적으로 조정되게 된다는 뜻이다.

이제 각각의 접두사가 보여주는 의미를 보도록 하자.

	모바일	태블릿	데스크탑(소)	데스크탑(대)
그리드	항상 적용	임계점 보다 작아지면 적용되지 않음
접두사	.col-xs-	.col-sm-	.col-md-	.col-lg-
오프셋	없음	있음
컬럼 순서	없음	있음
컬럼 수	12

지금 우리가 사용하고 있는 md이다.

만약 임계점을 더 늘리고 싶다면 lg를, 줄이고 싶다면 sm을 사용한다.

만약 반응형을 적용하고 싶지 않다면 모든 열을 xs로 사용해주면된다.

지금 보면 각각의 컬럼이 붙어있는걸 알 수 있다. 만약 나는 조금 떨어져서 쓰고싶다면?

이 경우에는 offset을 지정해 주면된다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1 col-md-offset-3" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-2" style="border: 1px solid red">.col-md-2</div>
<div class="col-md-2" style="border: 1px solid red">.col-md-2</div>
<div class="col-md-2" style="border: 1px solid red">.col-md-2</div>
<div class="col-md-8" style="border: 1px solid red">.col-md-8</div>
<div class="col-md-4" style="border: 1px solid red">.col-md-4</div>
</body>
</html>

여기서 보면 col-md-offset-3클래스가 추가된걸 볼 수 있다.

이는 앞의 컬럼에서 3컬럼 크기만큼 떨어진 다음에 만들겠다는 뜻이다.

이를 실행해보자.

의도한대로 적용됨을 알 수 있다.

일단 우리는 넣은 순서대로 그리드가 적용됨을 확인 할 수 있었다.

만약 우리가 순서를 바꾸고 싶다면 어떻게 해야할까?

이 경우 아래와 같이 사용하면된다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-1 col-md-offset-3" style="border: 1px solid red">.col-md-1</div>
<div class="col-md-2" style="border: 1px solid red">.col-md-2</div>
<div class="col-md-2" style="border: 1px solid red">.col-md-2</div>
<div class="col-md-2 col-md-pull-7" style="border: 1px solid blue">.col-md-2</div>
<div class="col-md-8" style="border: 1px solid red">.col-md-8</div>
<div class="col-md-4" style="border: 1px solid red">.col-md-4</div>
</body>
</html>