[Pagination] Pagination 가운데 정렬하기.

Bootstrap에서 지원하는 컴포넌트 중 Pagination이란 녀석이 있다.

흔히 쓰이는 게시판의 페이징 처리를 위한 컴포넌트다.

<ul> 안에 <li>로 감싼 <a>엘리먼트를 클래스에 맞게 배치만 해주면

복잡한 css명령어를 적용할 필요 없이 깔끔하게 만들어준다.

물론 Bootstrap이 제공하는건 css일 뿐,

페이징처리를 위한 내부로직은 물론이거니와

<a> 안에 링크를 할당해주는 것도 개발자의 몫이지만

클래스 추가만으로도 이렇게 이쁜 페이징 버튼그룹을 만들어준다는게 어딘가 -.-

다만, Pagination 컴포넌트에는 치명적인 단점이 존재하는데,

Pagination 컴포넌트는 정렬값이 기본 좌측정렬이라는 점이다. -_-;

보통 게시판의 페이징 버튼그룹은 가운데정렬이 기본이라

어디선가 많이 보던 모습을 연출하려면 추가로 작업을 해주어야한다.

(혹.. 필자가 더 간편한 방법을 모르는 것이라면 망설이지 말고 댓글을 주시라 ㅜㅜ)

아무런 조치 없이 Pagination 컴포넌트를 배치한 모습이다.

List 형태로 출력된 데이터의 좌측하단에 버튼들이 옹기종기 모여있다.

이를 가운데정렬 시키려면 css파일을 추가로 링크해 다음의 css를 입력해준다.

그럼 다음 스크린샷처럼 가운데정렬 되는 것을 볼 수 있다.

혹시 깔끔떠는 필자처럼 -.- 컴포넌트의 내부요소들이 살짝 떨어져있는게 마음에 들지 않는다면

다음과 같이 css문서의 .pagination > li > a 내에 margin-left: -5px; 옵션을 추가해준다.

다음 스크린샷과 같이 일반적인 게시판의 페이징 버튼그룹처럼

깔끔하게 출력되는 것을 확인할 수 있다.

여담이지만, 짧은 포스팅을 마치기 전에 언급하자면 Pagination 컴포넌트의 하위 컴포넌트인

Pager(이전 페이지, 다음 페이지 버튼만 제공)는 기본 정렬값이 가운데 정렬이다.ㅋ..ㅋㅋ 왜죠?

이런 삽질 말고 더 편하게 할 수 있는 방법을 아시는 분이 있다면

다시 말씀드리지만 지체없이 댓글 부탁드립니다. Ora

Dream Archive