(구버전) 스프링 게시판 만들기 #11. 부트스트랩 적용 : kuzuro

'(구버전) 스프링 게시판 만들기'는 내용이 부족하다고 판단하여
스프링 게시판 만들기를 새로 작성하였습니다.

링크 및 참조용으로 현재 게시물은 남겨두겠지만,
가급적이면 새로운 스프링 게시판 만들기를 참조해주시기 바랍니다.

게시물 작성, 조회, 수정, 삭제, 목록, 검색, 페이징, 댓글, 댓글 수정/삭제 기능을 끝냈습니다. 이 게시판은 사용자가 게시물을 작성하면, 다른 사용자가 댓글을 남겨서 서로 의사소통이 가능합니다.

하지만 외형이 너무 비참합니다. 인터넷 초기 시절도 아니고, 외적인 요소 외에도 페이징의 숫자가 세로로 정렬되어있어서 불편하기까지 합니다.

이왕하는거 예쁘장하게 만들고 싶은데, 처음부터 하나하나 디자인하기엔 너무 어렵고 오래 걸립니다.

여기에서 부트스트랩이 들어갑니다. 부트스트랩의 기본적인 사용방법은 부트스트랩 사이트에도 있으며, 이 블로그에도 부트스트랩 사용하기 게시물이 있습니다.

기본적으로 부트스트랩을 사용하려면 CDN을 넣어주어야합니다. 네트워크가 없는 환경이거나, 특정 버전의 부트스트랩을 사용하려면 다운로드 받은 후 위 코드에서 URL경로 대신 파일의 경로를 입력해주면 됩니다.

<body> 를 감싸던 <div> 태그에 container 태그를 추가하고, 기존 태그인 <div id="root"> 는 삭제하거나 주석을 걸어줍니다.

부트스트랩은 이렇게 클래스를 추가하는 방식으로 다룰 수 있이며, 각 클래스에 대한 기능.. 정확히 말하자면 특정 기능에 대한 클래스는 부트스트랩 사이트에서 확인할 수 있습니다.

글 목록의 <table> 태그에 클래스를 추가하고, 제목에 해당되는 부분이 용도에 맞게 적용될 수 있도록 <thead> 태그를 추가합니다.

검색용 셀렉트 박스와 인풋박스, 버튼에 클래스를 추가합니다. 검색 인풋박스와 검색 버튼은 input-group 클래스를 이용하여 묶어줍니다.

페이징 부분도 클래스를 추가해줍니다. 부트스트랩의 페이징 네비게이션 기능에 현재 페이지의 색을 바꾸는 기능이 포함되어있습니다.

현재 페이지를 알기 위해, 페이지 메이커(pageMaker)에 포함된 Criteria, Criteria에 포함된 페이지 번호(page)를 가져와서 선택한 페이지 번호(idx)와 같은지 비교하고, 같으면 active 클래스가 적용되고 같지 않다면 아무것도 적용하지 않게 코드를 작성합니다.

<li <c:out value="${pageMaker.cri.page == idx ? 'class=active' : ''}"/>>

이 코드는 <li> 태그와 같은 위치에 있다는걸 주의해야합니다. <li>[새로운 코드]</li> 가 아니라, <li [새로운 코드]></li> 입니다. 시작하는 태그의 꺽인 괄호(>) 내부에 작성됩니다.

여기까지 작업했으면 프로젝트를 실행해봅니다.

클래스를 바꿔주고 약간의 작업만 해주면, 이렇게 보기 좋은 게시판으로 바뀝니다.

인클루드 디렉티브를 이용해서 가져왔던 header.jsp, nav.jsp, footer.jsp도 취향에 맞게 변경해줍니다.

게시판 제목과 게시판 목록 사이의 메뉴들이 바뀌었습니다.

이제 조회 페이지(read.jsp)도 부트스트랩을 이용하여 수정합니다.

이렇게 어느정도 완성(?)된 다음 변경하는것보다, 개발 초기부터 디자인등의 구조를 미리 정해놓고 개발하면 편합니다. 물론 언제든지 바뀔 수 있지만요.

글 번호, 글 제목, 글 내용 등 필요한 부분에 부트스트랩을 적용합니다.
form-group을 이용하여 라벨(label)과 인풋박스(input)태그를 그룹으로 묶고, 라벨과 인풋박스에 클래스를 부여하여 라벨과 인풋박스의 크기를 2:10으로 설정합니다. 부트스트랩은 전체 길이를 12등분으로 보기 때문에, 원하는 크기와 비율에 맞게 숫자를 설정해주면 됩니다.