[Bootstrap] 4. table을 꾸며 게시판처럼 만들기

안녕하세요. 개발토끼 입니다. 

오랜만에 부트스트랩 강좌를 작성하게 되었네요. 

그간 여러 작업도 하고 자바도 공부하느라 시간이 오래 걸렸습니다. 

오래 걸린 만큼 좋은 내용으로 블로그 방문해주시는 분들에게 보답을 해야겠습니다. ㅎㅎㅎ

그럼 시작해보죠. 

오늘 다룰 내용은 HTML Table 태그를 이용해서 표를 구현해보는 것입니다. 

HTML Table 태그는 우리나라 웹 개발자들이 아주 유용하게 사용하는 태그 입니다. 그 이유는 우리나라는 웹이 빠르게 발전했고 그로인해 온라인 커뮤니티가 무척이나 활성화 되어 있기 때문이죠. 

위 사진은 워드프레스로 구현된 샘플용 게시판입니다.  비교적 디자인이 깔끔하죠. 

우리는 Bootstrap을 공부하고 있으니 부트스트랩으로 저런 게시판 디자인을 꾸며보도록 하겠습니다.

먼저 기본 프로젝트를 준비합니다.

- 기본 프로젝트 - 

Table 태그를 이용해서 간단한 표를 구현해볼까요?

아래와 같이 table을 만들어 줍니다.

내용은 마음대로 적어주셔도 무방해요. ㅎㅎㅎ

테스트를 위해 딱 1줄 짜리 표를 구현해보았습니다. 

혹시 HTML Table에 대해서 잘 이해하지 못하신 분들에게 좀 더 설명드리면

테이블에서 <tr> 태그는 한 줄을 뜻합니다. 

그래서  만약 <tr> 태그가 3개면 3줄이 표현이 되는 것이죠. 

어쨋든 웹스톰에서 크롬으로 실행볼까요? ㅎㅎㅎ

ALT + F2을 눌러 크롬으로 실행합니다.

아무런 디자인이 없는 이상한 것이 출력되었습니다. 

왜 이렇게 출력 되죠??

그 이유는 기본 HTML Table은 실제 표를 나타내는 도구이지만 아무런 디자인이 적용되어 있지 않기 때문이죠. 

심지어 표를 나타내는 선 조차 표시 되지 않습니다. 

그래서 별도의 CSS를 적용해야 그나마 게시판 같이 보일 수 있죠. 

우리는 Bootstrap을 공부하기 때문에 별도의 CSS 작성 없이 표를 구성해봅시다. 

아래와 같이 table 태그에 class 항목에 table이라고 입력해주세요.

그럼 아까와 같이 ALT + F2을 눌러 크롬으로 실행해봅니다. 

짠! 아래와 같이 보이시나요?? ㅎㅎㅎ

약간 실망하신 분들이 있을 지도 모르겠습니다. 

기본 HTML에 비해서 그냥 선 딱 하나가 추가가 되었을 뿐 이쁘지 않기 때문이죠.

거기다 안에 데이터가 없으니 더욱 더 없어 보입니다. 

그럼 조금 더 데이터를 추가 해볼까요?

저는 아래와 같이 추가 해보았습니다.

앞서 설명드렸다시피 <tr>이 현재 <tbody> 부분에서 3번이 나왔기 때문에 3줄이 표현될 것입니다. 

출력결과를 한번 보죠.

드디어 게시판 같이 보이는 군요. ㅎㅎㅎ

하지만, 별로 이쁘지 않죠. 

그래서 Bootstrap에서는 추가적인 class를 지정해줌으로서 table을 좀 더 꾸며주는 기능을 가졌습니다.

먼저 설명 드리면 약 3가지 방법이 있는 차례 차례 알려 드리겠습니다.

# 1. table table-striped

위와 같이 table 태그의 class를 바꾸어 줍니다. 

그럼 아래와 같이 출력이 되죠.

기존에 table class만 적용했을 때와 다른 점은 홀수 줄이 약간 회색 바탕화면이 생겼다는 겁니다.

회색 바탕화면이 생김으로서 뭔가 게시판의 가독성이 높아지는 기분을 얻으실 수 있을거에요.

그럼 다른 것도 살펴볼까요?

# 2. table table-bordered

이번엔 table table-bordered 입니다.

bordered의 특징은 앞서본 striped와 달리 홀수 줄에 배경이 없습니다. 

대신에 표의 각 칸마다 줄이 생성되어서 

각진 느낌의 게시판을 자아냅니다. 

# 3. table table-hover

이번엔 table table-hover 입니다. 

이를 적용해서 실행하면 아래와 같이 출력됩니다. 

table-hover의 특징은 table-striped와 비슷한 레이아웃을 가지고 있지만

마우스를 특정 줄에 가져가면 그 부분이 회색으로 빛(?)이 납니다 ㅎㅎㅎ

저는 개인적으로 table-hover랑 table-striped를 많이 씁니다.

그럼 이정도 배웠으면 응용을 해보아야겠죠? ㅎㅎㅎ

앞서 제일 처음 보여드렸던 워드프레스 게시판 같이 비슷하게 만들어보겠습니다. 

물론 완전 비슷하게는 아니지만요.

먼저 저는 table-striped를 선호하므로 table class를 위와 같이 바꾸어 주었습니다.

Pagination 넣기!

게시판의 묘미는 페이지네이션이죠. 

페이지네이션이 뭐죠???

페이지네이션이란 게시판의 하단에 위치한 일련의 숫자 버튼을 뜻합니다. 

이 숫자 버튼 중 하나를 클릭하면 다음 페이지 혹은 이전 페이지의 게시물을 읽을 수 있도록 도와주는 것이죠. 

Bootstrap에서는 세심하게도 페이지네이션 디자인까지 사용할 수 있도록 해놓았습니다. 

그래서 위와 같이 코드를 table 태그 밑에다가 넣어주시면 아래와 같이 출력 됩니다. 

어떤가요? ㅎㅎㅎ 그럴듯 한가요?

이왕 하는 김에 글쓰기 버튼도 넣어봅시다. 

코드를 위와 같이 추가 합니다. 

46번째 줄을 보시면 <a class="btn btn-default">글쓰기</a>를 넣을 것을 확인 하실 수 있을 겁니다. 

그럼 크롬으로 다시 실행해봅시다. 

왼쪽 편에 글쓰기 버튼이 생성되었습니다. 

근데 새로 생긴 버튼으로 인해서 페이지네이션이 밑으로 쭉 빠져버렸네요. 

그리고 글쓰기 버튼도 오른쪽에 위치하고 싶구요. 

그렇다면 아래와 같이 <a> 태그의 class를 바꾸어 줍니다. 

여기서 pull-right는 특정 태드를 강제로 오른쪽(pull-right) 혹은 왼쪽(pull-left)으로 붙일 수 있도록 도와줍니다. 

그리고 생성된 버튼으로 인해 한 줄 통채로 생기는 공백을 제거할 수 있죠. 

크롬으로 실행해볼까요?

어떤가요? 

이전엔 페이지네이션이 글쓰기 버튼으로 인해서 저 밑에 있었는 데 pull-right class를 쓰니 

그 공백이 줄어든 것을 보실 수 있을 겁니다. 

근데 여기 또 문제가 있습니다. 

크롬 화면 전체에 table이 가득 차니깐 뭔가 없어보입니다. 

그렇다면 자동으로 좌/우 공백을 맞추어 주기 위해 container 라는 것을 써보도록 하겠습니다. 

container 이건 뭔가요?

나중에 grid system 강좌를 진행할 때 자세히 설명 드릴 예정입니다. 

다만, 여기서 간단히 설명 드리면 좌/우 여백을 자동으로 생성 해줘서 

내가 만든 내용물들이 가운데 이쁘게 정렬이 이루어 집니다. 

그래서 저는 아래 사진과 같이 10번째 줄에 <div class="container">를 적어주고 

58번째 줄에 </div> 태그를 닫아주었습니다. 

그럼 실행 해볼까요? ㅎㅎㅎ

짠! 아래와 같이 동일하게 나오시면 container가 정상 적용된 것입니다. 

좌/우 여백이 생성이 되어 비교적 그럴듯한 게시판 디자인이 나왔습니다. 

약간 스크롤의 압박이 있었지만 오랜만에 bootstrap 강좌라서 쫌 더 신경써서 작성해 보았습니다. 

하지만, 부족한 면은 어디서나 발견할 수 있죠. 

그래도 이 부족한 글을 읽어주시는 독자, 블로그 방문자 여러분들이 있기에 오늘도 이 밤 늦게 강좌 포스팅을 적습니다. 

여튼 오늘도 긴 글 읽어주셔서 감사합니다.