[개인프로젝트] Garden of Books 책들의정원 9(웹 디자인 - 테이블)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

 

지난 시간에는 이전에 만들었던 홈페이지에서 각각 링크를 적용시켜 각 페이지의 html을 만들어주었는데요,
오늘은 부트스트랩을 이용한 테이블 생성을 해보고자 합니다.
테이블을 이용하면 페이지의 내용을 테이블에 깔끔하게 적용하여 화면에 출력할 수 있습니다.

 

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="glyphicon glyphicon-tags"></span>
                        &nbsp;&nbsp;베스트셀러
                    </h3>
                </div>
                <div class="panel-body">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="images/emotionalCass.jpg" alt="강신주의 감정수업">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">강신주의 감정수업</h4> <br>
                            <p style="font-weight: bold;">대부분의 철학자들이 인간의 이성에서 윤리학을 시작하려고 할 때, <br>
                            스피노자는 자신의 윤리학을 욕망에서부터 출발했다. <br>
                            이것이 바로 스피노자가 지닌 혁명성이다.</p> <br>
                            우리의 현실은 이성보다 감정에 좌우되는 존재다. 하지만 나의 감정임에도 불구하고 실제로 그 감정이 어떤 성격의 것인지 모를 때가 많다. 내 옆에 있는 남자에 대한 끌림이 단순히 좋은 사람에 대한 호감일까, 아니면 사랑의 시작일까? 지금 연인에 대한 나의 감정은 연민일까, 진짜 사랑일까? 나의 선택은 올바른 감정에서 비롯된 것일까, 아니면 소심함 때문에 선택한 실수일까? ‘대담함’이란 감정은 용기와 동의어일까? 나의 친구가 좋아하는 사람을 나도 좋아하는 것은 진심일까, 아니면 경쟁심의 발로일까? 우리는 나도 모르는 감정에 이끌려 잘못된 판단을 할 때도 있다. 주체적인 삶을 살기 위해서는 무엇보다도 나의 감정을 분명히 파악해야 하고, 그러기 위해서는 감정의 종류와 성격에 대해 인문학적인 성찰이 필요하다.
                        </div>
                    </div>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>도서 번호</th>
                            <th>도서 제목</th>
                            <th>저자</th>
                            <th>도서 가격</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td><a href="book.html?bookKind=EconomyOrPsychology">강신주의 감정수업</a></td>
                            <td>강신주</td>
                            <td>17500</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td><a href="#">백 마디 말보다 강력한 행동의 심리학</a></td>
                            <td>이상은</td>
                            <td>37000</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td><a href="#">생각의 각도</a></td>
                            <td>이민규</td>
                            <td>14200</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

nav태그와 footer태그 사이에 해당 container div를 작성해줍니다.
표에 출력되는 내용은 하드코딩해둔 상태로 이후에 수정해 줄 예정입니다.

 

<화면 출력 모습>

 

여기까지 패널안에 테이블 태그가 들어가는 방식으로 테이블을 어떻게 구성하고 작성하는지에 대해 알아보았습니다.
행과 열을 이용하여 여러가지 게시판이나 목록을 보여줄 때 효과적인 웹디자인 역할을 합니다.