구 원트노/멋사 - 1학기 보조

[멋쟁이 사자처럼 5기]부트스트랩-그리드 시스템 개론 1

부트스트랩-그리드 시스템 개론 1


이번에 부트스트랩, 특히 그리드 시스템에 대하여 써보도록 하겠습니다.


일단 그리드 시스템은 뭘까요?


먼저 그리드(grid) 사전적 정의를 볼까요?

  • 1. 격자무늬   2. (금속・목재로 된) 격자판   3. (지도에서 위치를 나타내기 위한) 기준선망

격자나 기준선이라고 합니다. 


사진으로 볼까요?



네 이런 기준선을 생각하면 됩니다.


그래서 그리드 시스템이란 


웹 페이지를 만들 때 이러한 기준선을 바탕으로 각각의 웹 요소, 컨텐츠들을 배치시킨다!!


라고 생각하면 되겠습니다.


여기서 추가적으로 반응형 웹을 구현할 때 


즉, 데스크탑 환경 그리고 태블릿, 모바일 환경 등의 여러 환경에 따라 


컨텐츠들의 배치를 재배열 시키는 작업도 합니다.



그러면 그리드 시스템은 어떻게 작동 되는 걸까요??


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--1 div-->
<div>나는 div</div>
<div>나는 div</div>
<div>나는 div</div>
<!--2 span-->
<span>나는 span</span>
<span>나는 span</span>
<span>나는 span</span>
<!--3 table-->
<table>
    <tr>
        <td>나는 테이블</td>
        <td>나는 테이블</td>
        <td>나는 테이블</td>
    </tr>
</table>
<!--4 gridsystem-->
<div class="row">
    <div class="col-md-4">나는 그리드 시스템</div>
    <div class="col-md-4">나는 그리드 시스템</div>
    <div class="col-md-4">나는 그리드 시스템</div>
</div>
cs


이런 코드를 작성해 봅시다.


4가지 방법으로 코드를 작성했습니다.


div, span, table, gridsystem



잘 안보이죠? 사진을 넣어 보겠습니다.



보노보노를 중심으로 보면 됩니다.


위의 3개 순서대로 


div는 block처럼 세로로 쌓이는 모습이 보여집니다.


span은 가로로 inline처럼 배치되는 모습이 보여집니다.


table은 tr(table row) 행 안에 td(table data)들이 열에 맞춰서 나열되어 있습니다.


이제 그리드 시스템을 볼까요?



div를 사용했지만 세로로 쌓이지 않고


열로 균등하게 3분의 1씩 차지한 걸 볼 수 있습니다.


분석해볼까요?



1
2
3
4
5
<div class="row">
    <div class="col-md-4">보노보노</div>
    <div class="col-md-4">보노보노</div>
    <div class="col-md-4">보노보노</div>
</div>
cs


현재 코드는 이렇습니다.


코드에 대한 설명을 하기 전에 이 사진을 봐야 합니다.



그리드 시스템의 단위입니다. http://bootstrapk.com/css/#grid


이렇게 가로를 열 12개로 나눕니다. 기본 단위는 .col-md-1 이런 방식으로 존재하는데 


이는 미들 디바이스 즉 데스크탑 환경에서 12 단위의 최소 단위를 나타냅니다.


구분해보자면 col-md-1 = 열-디바이스 크기-열 크기


이제 다시 코드를 본다면


1
2
3
4
5
<div class="row">
    <div class="col-md-4">보노보노</div>
    <div class="col-md-4">보노보노</div>
    <div class="col-md-4">보노보노</div>
</div>
cs


각 보노보노 이미지를 col-md-4안에 집어 넣어서 


12개의 열 중에 각각 4씩 차지해서 



이러한 결과물이 나왔습니다.



반응형 적용 하기



이렇게 디바이스를 변경 했을 때 배치를 바꿔보겠습니다.


코드를 확인하겠습니다.


1
2
3
4
5
<div class="row">
    <div class="col-md-4 col-xs-6">보노보노</div>
    <div class="col-md-4 col-xs-6">보노보노</div>
    <div class="col-md-4 col-xs-6">보노보노</div>
</div>
cs


col-md-4 말고 col-xs-6 이라는 class가 추가되었습니다.


설명하자면 md(데스크탑)일때는 4를 차지하고 xs(모바일)일때는 6을 차지하라! 라는 뜻입니다.


프로젝트에 부트스트랩 적용하기(CDN 적용)

부트스트랩을 사용하려면 여러분의 코드에 부트스트랩 기능을 추가해야합니다.

html/head 안에 부트스트랩 cdn 코드를 적어봅시다.

먼저 부트스트랩으로 가보겠습니다.


상단의 시작하기를 클릭하고



그리고 약간 내려가다보면 부트스트랩 CDN부분이 있습니다.


그 부분을 copy하셔서 html/head 부분에 paste 해주시면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hi</title>
    <!-- 합쳐지고 최소화된 최신 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>
</head>
...
cs


뭐 이런 식으로 추가해주면 됩니다.


이제 여러분의 프로젝트에 부트스트랩을 추가할 준비가 끝났습니다.



사실 이번 내용은 그리드시스템의 기본 정도 설명했습니다.


더욱 더 자세한 내용은 부트스트랩 페이지를 한 번 읽어보는걸 추천드립니다.



궁금하신 점 있으시면 댓글 남겨주세요!!


1 2 3 4 5