Bootstrap | 강의 | 04 - 부트스트랩으로 이미지를 다루어 보자. / caption을 달아보자.

---

1. 부트스트랩으로 이미지를 다루어 보자 

---

     - 초보 개발자들에게는 어렵게 CSS와 HTML 조합으로 홈페이지 디자인을 만들어도 이미지 다루기 어려웠던 기억이 있을 것입니다.

     - 부트스트랩은 이 이미지 마저 쉽게 다룰수 있도록 각종 방법을 만들어 놓았습니다.

     - 이번 시간에는 가볍게 이미지를 다뤄 보겠습니다.

---

2. 우선 이미지를 노출 시켜보자

---

     1. 이미지를 아래처럼 추가시켜 보자

          - 위치는 게시판에 맨위다.

          - div 안에 img 태그로 이미지를 첨부해보자.

          - 이미지는 이걸 다운 (무료이미지) tree.zip

          ▼ 위치는 게시판에 맨위다.

<div class="container"> <!--container-fluid-->

    <div>
        <img src="./images/tree.jpg" alt="숲" >
    </div>

    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <td>이름</td>
            <td>나이</td>
            <td>주소</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>지브이</td>
            <td>26</td>
            <td>상수동</td>
        </tr>
        <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>
        </tbody>
    </table>

    <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>
</div>

▼이런 웹에서 확인해보니 엉망이다. 반응형 웹에서 이미지만 반응하지 않고 있습니다.멋진 이미지가 짤려버렸습니다.우린 이제 이 이미지를 반응형 웹으로 만들고 부트스트랩으로 꾸며 볼것입니다.

---

3. 이미지를 반응형으로 부트스트랩으로

---

     1. 반응형으로 만들어보자

          - 아래  코드를

img-responsive : 이미지를 반응형으로 만들어준다.

          ▼ img class 에 추가한다.

<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive">
</div>

          ▼ 웹에서 확인해보니. 와! 이미지가 반응형으로 돌아왔습니다.

  사이트의 크기를 따라 이미지도 축소 확대 됩니다.

     2. 이미지를 꾸며보자

          - 아래  코드를 이미지에 넣어보자 역시 직관적입니다.

img-circle : 이미지를 둥글게

img-rounded : 모서리를 둥글

img-thumbnail : 이미지를 액자처럼 테두리가 있게

          ▼ 코드에 합은 이렇습니다. 테스트를 위해 Div를 복사해서 붙혀놓은 것입니다.

<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-circle"> <!--이미지를 둥글게-->
</div>

<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-rounded"> <!--모서리를 둥글게-->
</div>

<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-thumbnail"> <!--이미지를 액자처럼 테두리가 있게-->
</div>

          ▼ 이미지가 아주 깔끔하고 간결하게 수정이 되었습니다.. 각 속성에 맞는 이미지 모양이 속상 하나로 수정이 가능합니다.(사실 이쁘기 만들려면 이미지를 수정하는게 좋긴하죠)

          ▼ 저는 첫번째에 있는 동그란 이미지를 좋아합니다. 우리가 만드는 게시판에 맨위 디자인 요소만 남겨놓고 계속 진행해봅시다.

---

4. Caption을 달아보자.

---

     - 이전시간에 달았어야 하는 간단한 요소인데 까먹어서 지금 추가하겠습니다. 

caption : 테이블에 제목을 보여주는 태그

     ▼ 방법은 table 아래에 caption 태그를 입력 해보자

<table class="table table-striped table-bordered table-hover">
    <caption>부트스트랩으로 만들어 보는 게시판</caption>

     ▼ 테이블에 제목이 입력 되었다. 캡션에 장점은 한번 지정하면 변도에 디자인 필요없이 게시판 이름을 지정할 수 있다. 실무에서도 게시판 제목은 Caption으로 지정해 사용하자 (은근히 Caption 요소를 안쓰는 경우가 많더군요)

---

5. 마무리

---

     - 이미지까지 다루어보았다. 사실 크게 어려운 부분은 없다.

     - 부트스트랩 다양한 편의는 물런 신뢰할만 하다는걸 느끼게 됩니다.