Toy 프로젝트를 진행 하다보면 전체적인 페이지 레이아웃이나 디자인을 어떻게 할지가 가장 큰 고민이다.
더욱이 나처럼 디자인엔 영 소질이 없다면 디자인 생각에, 시작도 전에 기운이 빠질 것이다.
그런 나와같은(?) 개발자들에게 한줄기 빛이 있었으니!! 누구나 다 아는 부트스트랩이다.
부트스트랩을 이용하면 Copy & Paste 신공으로 뚝딱 뚝딱 빠르게 페이지를 뽑아낼 수 있다.
몇 편에 걸쳐 자주 사용했던 부트스트랩의 기능(?)들을 정리 해볼까 한다.
오늘은 게시판 형식의 웹 사이트에서 가장 흔하게 사용하는 Table 관련 부트스트랩에 대해 소개하겠다.
일단 부트스트랩을 사용할테니 <head> 태그 사이에 아래 두 줄을 입력해준다.
(이 형식은 차후 포스팅 될 글에서도 사용된다.)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
그럼 준비가 모두 끝났다! 이제 마음껏 사용하면된다.
처음 부트스트랩을 사용 할 땐 어떻게 사용하는지 감이 안왔었는데 감이 올 필요도 없었다.
간단히, 구글링을 하며 마음에 드는 부트스트랩 소스를 고른 다음 해당 css만 적용 해주면 된다.
이 얼마나 심플한가! 부트스트랩의 table 기본 css 를 적용하면 아래와 같다.
<table class="table">
<thead>
<tr>
<th>제목</th>
<th>내용</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>제목1</td>
<td>내용1</td>
<td>1</td>
</tr>
<tr>
<td>제목2</td>
<td>내용2</td>
<td>2</td>
</tr>
<tr>
<td>제목3</td>
<td>내용3</td>
<td>j3</td>
</tr>
</tbody>
</table>
참고로, 부트스트랩의 기본 table은 border가 아래에만 들어가있다.