구 원트노/멋사 - 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 적용)
상단의 시작하기를 클릭하고
그리고 약간 내려가다보면 부트스트랩 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학기 보조' 카테고리의 다른 글
| [뉴비톤] ruby on rails 참고 사이트! (0) | 2018.05.03 |
|---|---|
| [멋쟁이사자처럼] c9 education 등록하기(운영진용) (6) | 2018.03.20 |
| 개발 전에 알았더라면 좋았을 웹사이트들 1 (0) | 2017.05.01 |
| [멋쟁이 사자처럼 5기]C9의 파워풀한 기능들!!(C9 꿀팁) 1 (1) | 2017.03.31 |