Bootstrap | 강의 | 03 - 버튼을 달고 전체 폭을 조종 / Button / container

---

1. 이번 시간에는

---

     - 게시판이 생겼으니 "글쓰기"와 같은 버튼이 필요하겠죠?

     - 그리고 좌우로 가득찬 게시판도 좋지만 보통은 좌우에 적당한 폭이 있어

     - 한눈에 보기 편한 모양으로 만들어 볼것입니다.

     - 역시나 이번에도 부트스트랩 매력에 푹 빠져봅시다.!

---

2. 버튼을 다뤄보자

---

     2.1 버튼을 만들어 보자

          ▼ 아래처럼 코딩해보겠습니다.

<!--부트스트랩 버튼 class="btn"-->
<button type="button" id="goButton"  class="btn">버튼</button>
<!--기본버튼-->
<button type="button">버튼</button>

          ▼ 화면에 띄워보니 기본 버튼, 부트스트랩 버튼이 보입니다. 딱 봐도 부트스트랩 버튼은 디자인 들어갈 준비가 되어 있네요.이제 디자인을 입혀 봅시다.

          ▼ 아래 코드를 입력하고 웹으로 봐볼까요?

<!--버튼의 디자인-->
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

<!--버튼의 크기-->
<button type="button" class="btn btn-default btn-lg">Large</button>
<button type="button" class="btn btn-default btn-md">Medium</button>
<button type="button" class="btn btn-default btn-sm">Small</button>
<button type="button" class="btn btn-default btn-xs">XSmall</button>

          ▼ 디자인을 보는 직관적인 부분이라 설명이 필요 없겠네요. 간단한 클래스명으로 다양한 디자인을 손쉽게 쓸수 있습니다.

          ▼ 크기도 조절 가능합니다. 

     2.2 게시판의 글쓰기 버튼을 만들어 보자

          - 이번엔 우리 게시판에 쓸 글쓰기 버튼을 만들어보겠습니다.

          ▼ 아래의 코딩을 

pull-right : 버튼이 위치함으로 인해 디자인하 한단계 내려가는 걸 방지하고 오른쪽 정렬 

pull-left :                 ''                                      왼쪽 정렬

         

          ▼ 코딩의 합은 아래와 같습니다. 저번 시간에 만든 페이징 디자인 위에 위치시키겠습니다.

          ▼ btn으로 버튼으로 지정해주고, btn-primary로 디자인을 설정하고, pull-right로 정렬 하였습니다.

<button class="btn btn-primary pull-right">글쓰기</button>
<div class="text-center">
    <ul class="pagination pagination-lg"> <!--부트스트랩에서 제공하는 페이징 마법사(?)-->
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

     

          ▼ 그림처럼 이쁜 글쓰기 버튼이 안정적인 위치 하네요.!!

          ▼ 이로써 우리 게시판에 글쓰기 버튼까지 완료하였습니다.

---

3. container로 폭을 조정하자

---

     - 지금까지 잘 따라 온 분들은 디자인이 좌우로 100% 웹에 찰싹 달라붙어 있는걸 볼수 있을것입니다. 저는 이 디자인을 아주 좋아합니다.

     - 그런데 보통 좌우에 적당한 공백을 만들어 게시판이 좀더 안정적으로 보이게 하는거 대다수죠. 그걸 해결해주는 놈이 바로

     - container 이놈입니다. 

     ▼ div 해당 속성을 입력하면 디자인에 폭을 조정할 수 있습니다.

container, container-fluidr : 폭에 공백을 준다. 둘의 공백 크기는 다르다.

     ▼ 해당 요소로 우리가 만든 게시판을 감싸 주세요

<div class="container">[게시판]</div> <!--container-fluid-->

     ▼ container의 폭의 공백

     ▼ container-fluid의

     ▼ 속성을 주지 않았을 때의 폭의 공백 

---

3. 마무리

---

     - 간단한 방법으로 우리의 게시판에 양쪽 폭의 느낌을 정해줄수 있었습니다.

     - 저는 개인적으로는 속성을 주지 않는 좌우로 100프로 가득찬 디자인을 좋아합니다.

     - 이젠 정말 게시판 같은 게시판이 완성 되었습니다.

     - 아직까진 어렵고 복잡한 내용이 없습니다. 다음 강의는 이미지에 대해 나가겠습니다.

     - 이미지 이후에는 살짝 어려워 질 수 있으니 개인적으로 더 연습하고 준비하시길!

     ▼ 지금까지 소스 입니다.

index.html