Bootstrap | 강의 | 02 - 게시판 모양을 만들어 보자! / 테이블 / 페이징

---

1. 깔끔한 게시판 모양을 한방에! 부트스트랩 매력 느껴보자!

---

     - 홈페이지를 꾸미려다가 CSS와 HTML을 작성하다. 포기해버린 경험들이 있으실 겁니다. (저부터..)

     - 기본 뼈대는 나와도 디자인 입힐려면 디자이너 퍼블리셔가 아닌 이상 고역일거고 정작 프로그램 공부가 뒷전 입니다.

     - 이전 강의에서도 말했듯이 부트스트랩은 아주 훌륭한 디자이너와 퍼블리셔가 제공한 CSS입니다. 

     - 이번 강의에서 부트스트랩 매력에 푹 빠져 보시죠!!!

---

2. 테이블을 만들어 보자!

---

     2.1 Table 이란

          - 실무에서 혹은 좋은 강의를 제공하는 곳에서 선행 되신분들은 <Table> 보단 <UL> <LI> 태그가 많이 활용되는걸 알고 있을 겁니다.

          - 데이터를 FM으로 나타내는 요소는 <Table>이므로 두번째 시간이니 부트 스트랩으로 이쁜 <Table>을 만들어 보는 시간을 가지겠습니다.

     2.2 준비사항

          - http://gocoder.tistory.com/8 이전 강의가 선행 되어야 합니다.

     2.3 테이블을 만들어 봅시다!!

          - 저번 강의에 함께 만들었던 index.html Body 태그안에 짜봅니다. 중학교 HTML 실습 시간이 기억나네요 

          - 아래와 같이 테이블 기초적인 태그가 나왔습니다. 혹시 이게 이해가 안된다면 검색엔진에! HTML 강의를 찾아서 보고 오세요!!

          - 그래도 겁먹지 마세요 몰라도 그냥 하다보면 아시니 이 강의를 지켜보셔도 문제가 없을 겁니다.

          ▼ 웹페이에 실행시켜 보시면  웹스톱에선 alt+f2 를 누르시면 되고 홈에디터 플러스에서는 Ctrl+B를 누르시면 됩니다.

<Table>
    <thead>
    <tr>
        <Td>이름</Td>
        <Td>나이</Td>
        <Td>주소</Td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <Td>지브이</Td>
        <Td>26</Td>
        <Td>상수동</Td>
    </tr>
    <tr>
        <Td>하이리</Td>
        <Td>26</Td>
        <Td>태릉입구</Td>
    </tr>
    <tr>
        <Td>래부기</Td>
        <Td>26</Td>
        <Td>망원동</Td>
    </tr>
    </tbody>
</Table>

          ▼ 디자인이 없는 순수 <table>이 나타났네요. 

  이게 Class 속성 한방으로 얼마나 변하는지해봅시다.

          ▼ 변한건 없습니다. class="table" 이 테이블 속성에 추가 되었습니다.

<Table class="table">   <!--table 속성을 지정해보자-->
    <thead>
    <tr>
        <Td>이름</Td>
        <Td>나이</Td>
        <Td>주소</Td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <Td>지브이</Td>
        <Td>26</Td>
        <Td>상수동</Td>
    </tr>
    <tr>
        <Td>하이리</Td>
        <Td>26</Td>
        <Td>태릉입구</Td>
    </tr>
    <tr>
        <Td>래부기</Td>
        <Td>26</Td>
        <Td>망원동</Td>
    </tr>
    </tbody>
</Table>

          ▼ class 지정 한방에 완벽한 반응형 디자인이 되었습니다. 왼쪽은 일반적인 1920 사이즈고 오른쪽은 모바일 해상도로 줄여봤습니다. 

          ▼ 놀라울 정도로 깔끔하네요 여기서 끝이 아닙니다. 이외에도 많은 디자인 요소를 제공합니다.

     ▼ 아래와 같이 입력하고 다시 웹에서 실행해봅시다.

<table class="table table-striped table-bordered table-hover">

<!--table 속성을 지정해보자-->

     ▼ 벌써 이쁜 게시판이 보이기 시작합니다.  속성에 대한 설명입니다.

table-striped : 얼룩말처럼 라인에 홀수 짝수를 다르게 보여주게 합니다.

table-bordered : 이름에도 보이듯이 라인을 칠해줍니다. 세로선이 생겨있네요

table-hover : 마우스를 올리면 하일라이트 됩니다. 지브이라는 이름 위가 조금 더 진하죠? 마우스가 올라간 상태입니다.

     ▼ 홈페이지 만들겠다고 Css 건들이다 집어 치울일이 없겠네요 ㅎㅎ

     ▼ 이번엔 <Tr>과 <Td>에 아래처럼 입력해봅시다.

text-warning, text-success, text-info : 텍스트 색깔을 이름에 맞게 바꿉니다. 자연스럽고 이쁘네요

text-center, text-left, text-right : 텍스트를 정렬합니다. 

bg-danger, bg-info : 바탕화면 색깔을 바꿉니다. 

     ▼ 말도 안되는 모양으로 나오겠지만 연습하는것이므로 해당처럼 코딩 합니다.

<tr class="text-success bg-danger">
    <Td >하이리</Td>
    <Td class="text-warning">26</Td>
    <Td class="text-info">태릉입구</Td>
</tr>
<tr class="text-left bg-info">
    <Td>래부기</Td>
    <Td class="text-center">26</Td>
    <Td class="text-right">망원동</Td>
</tr>

     ▼ 해당 모양처럼 나옵니다. 간단하고 직관적인 CSS 명명으로 여러가지 모양으로 바뀌었습니다. 다양하게 사용하면 됩니다. 

     2.4 페이징을 만들어 봅시다.

          - 잘따라왔습니다. 이번엔 게시판에 꽃 페이징을 만들어 봅시다. 

          - 부트스트랩은 페이징 디자인도 가볍게 만들수 있습니다.

          ▼ 테이블 아래 해당 클래스를 추가해주세요 

pagination : 페이징 디자인을 쉽게 할수 있는 클래스명

pagination-lg , pagination-sm : 페이징 디자인 속성중 하나 크게, 작게 

<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. 마무리

---

     - 가볍게 게시판 디자인을 만들어봤습니다. 

     - 간단한 class 명만 대입하고 명명규칙만 이해하면 아주 가볍고 직관적으로 반응형 웹을 만들어 낼 수 있습니다. !

     - 2과를 하면서 자신감이 붙었을꺼라 믿습니다. 다음 시간에는 이 디자인에 버튼을 추가해보겠습니다.