[부트스트랩]2. 컨테이너와 그리드(기본 설명)
안녕하세요 HiCreate입니다!!!
이번 포스팅에서는 컨테이너와 그리드에 대해 알려드리려 합니다.
시작하기 전에... 여기에 공개되는 소스들에는 백엔드 즉, 기능은 구현되지 않습니다.
오직 디자인 구현만 공개되며 소스들을 엮어서 부트스트랩 데모로 공개할 예정입니다.
이 데모에서는 node.js로 서버를 사용하고 있습니다.
1. 부트스트랩 시작하기
2. 컨테이너와 그리드 시스템
[1. 부트스트랩 시작하기]
우선 node.js 프로젝트에서
node module을 설치(npm install)해주고
다음과 같은 코드를 넣습니다.
1 2 3 4 5 6 7 8 9 10 11 | app.get('/',function(req,res){ fs.readFile('components/login.html',function(error,data){ if(error){ console.log(error); }else{ res.writeHead(200,{'Content-Type':'text/html'}); res.end(data); } }); }); | cs |
var fs=require('fs');
로 가져오는 겁니다.
우리가 처음 만들 페이지는 로그인 페이지입니다.
우선 <head> 태그에
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-
를 삽입해 줍시다.
그럼 모든 준비가 끝이 났습니다.
[2. 컨테이너와 그리드 시스템]
그럼 첫번째 페이지를 작성해봐야겠죠?
로그인 페이지 뿐만 아니라 거의 모든 페이지에서 필요한 것이 바로 컨테이너와 그리드입니다.
우선 알려드릴게 있는데요
부트스트랩에서는 거의 모든 것이 <div> 태그 안에 들어간다는 겁니다.
그래서 컨테이너는 무엇이냐?
부트스트랩에서 가장 기본적인 그리드 요소입니다.
일반적으로는 최대 크기를 규정짓죠.
그럼 한번 프로젝트에 적용시켜 볼까요?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <title>데모 로그인</title> <meta charset="utf-8"> <!--bootstrap CDN--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div class="container"> <p>Hello World!</p> </div> </body> </html> | cs |
이렇게 하고 실행을 해줄게요
자 이렇게 했더니 뭐가 생기느냐
일반적인 HTML 코드와 달리 약간 오른쪽으로 당겨져 있는 걸 볼 수 있습니다.
컨테이너가 적용된 것이죠.
검정색이 전체 홈페이지 크기라면
컨테이너는 주황색입니다.
(하늘색은 정확한 의미는 모르겠으나 남는 공간인거 같아요...)
어쨋든 저 주황색 컨테이너가 홈페이지의 크기에 맞춰 자동으로 중앙으로 맞춰갑니다.
이 컨테이너에는 한 가지 옵션이 있는데요
-fluid라는 겁니다.
부트스트랩은 스페이스로 띄어져 있으면 다른 클래스이고 -으로 이어져 있다면 옵션이 됩니다.
어쨋든 container-fluid 가 뭐냐하면
컨테이너가 홈페이지 가로를 가득 채울 수 있게 해주는 겁니다.
저는 별로 사용하지 않는 옵션입니다.
자 그러면 다음 걸로 넘어가죠.
이번에는 그리드 시스템입니다.
그리드 시스템 (Grid System)이란
가로 줄에 2개 이상의 컨텐츠를 넣기 쉽게 되어있는 것인데요
row 와 column(컬럼)으로 이루어져 있습니다.
row(열) 아래에 column이 들어가는데요
우선 다음과 같은 코드를 작성해봅시다.
1 2 3 4 5 6 7 8 | <div class="row"> <div class="col"> "Hi" </div> <div class="col"> hello </div> </div> | cs |
그러면 두 글자가 공간을 남긴 채 출력될겁니다.
이런 식으로 된 건데요
검정색이 컨테이너,
주황색이 row인데요
row는 두 컬럼이 가로줄에 같이 존재할 수 있게해주는 역할을 해줍니다.
파랑색은 컬럼인거죠.
파랑색 박스 맨 앞부분에 글자가 들어가있는 거구요.
글이 많이 길어진 것 같네요...ㅜ
이번 포스팅은 좀 급하게 마무리를 하고 다음 글에서 그리드 시스템의 옵션에 대해 좀 더 알려드리도록 하겠습니다.
'프로그래밍 > 웹과 부트스트랩' 카테고리의 다른 글
| VSCODE에 웹 개발 환경 구축하기 (1) | 2019.06.09 |
|---|---|
| [부트스트랩]3. 그리드 시스템 (0) | 2019.02.23 |
| [부트스트랩]1. 부트스트랩이 뭐죠? (0) | 2019.02.20 |
