CSS Pagination

CSS Pagination: 콘텐츠 탐색을 위한 페이지네이션 디자인

*CSS Pagination(페이지네이션)**은 대량의 콘텐츠를 여러 페이지로 나누고, 페이지 간 쉽게 이동할 수 있게 도와주는 UI 요소입니다. 페이지 번호 또는 '이전/다음' 버튼을 통해 사용자가 원하는 페이지로 빠르게 접근할 수 있습니다. 이번 자료에서는 기본적인 페이지네이션 구조와 스타일링 방법을 살펴보겠습니다.

1. 페이지네이션의 기본 HTML 구조

페이지네이션은 보통 리스트 형태로 작성됩니다. <ul> 요소와 <li> 요소를 사용하여 각 페이지 번호나 버튼을 리스트 항목으로 만듭니다.

기본 HTML 구조

<div class="pagination">
  <ul>
    <li><a href="#">&laquo;</a></li> <!-- 이전 버튼 -->
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li> <!-- 다음 버튼 -->
  </ul>
</div>

«: 왼쪽 이중 화살표(«), 이전 페이지 버튼으로 사용됩니다.
»: 오른쪽 이중 화살표(»), 다음 페이지 버튼으로 사용됩니다.
각 <a> 요소에 페이지 번호 링크를 지정합니다.

2. 페이지네이션 기본 스타일링

페이지네이션을 리스트 형식으로 만들고, 버튼에 스타일을 적용하여 페이지 이동 버튼을 시각적으로 표현할 수 있습니다.

기본 스타일링

.pagination ul {
  display: flex;
  list-style-type: none; /* 리스트 스타일 제거 */
  padding: 0;
}

.pagination li {
  margin: 0 5px; /* 각 페이지 번호 간 간격 */
}

.pagination a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none; /* 밑줄 제거 */
  border: 1px solid #ddd;
  border-radius: 5px;
}

.pagination a:hover {
  background-color: #007bff;
  color: white;
}

설명

display: flex;: 페이지 번호를 가로로 나열하기 위해 사용합니다.
list-style-type: none;: 리스트 항목의 기본 불릿(점)을 제거합니다.
margin: 0 5px;: 페이지 번호 사이의 간격을 설정합니다.
padding: 페이지 번호의 크기를 키워 클릭하기 쉽게 만듭니다.
border-radius: 각 버튼을 둥글게 만듭니다.
호버 효과: 마우스를 올렸을 때 배경색과 글자색이 변경됩니다.

3. 현재 활성화된 페이지 스타일링

현재 사용자가 보고 있는 페이지 번호를 강조할 필요가 있습니다. 이를 통해 사용자가 현재 위치한 페이지를 쉽게 알 수 있습니다.

활성화된 페이지 스타일링

.pagination .active a {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
}

HTML 예시

<div class="pagination">
  <ul>
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li> <!-- 현재 페이지 -->
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

이 코드는 페이지 2번이 현재 활성화된 페이지임을 강조합니다. 파란색 배경과 흰색 텍스트로 표시되어 다른 페이지 번호와 차별화됩니다.

4. 반응형 페이지네이션

페이지네이션은 모바일 기기에서도 잘 표시되도록 반응형으로 디자인해야 합니다. 작은 화면에서는 페이지 번호를 너무 많이 나열하지 않고, 간결한 디자인을 유지하는 것이 중요합니다.

반응형 페이지네이션 스타일링

@media (max-width: 600px) {
  .pagination ul {
    flex-wrap: wrap; /* 줄바꿈을 허용 */
  }

  .pagination a {
    padding: 8px 12px; /* 버튼 크기를 줄임 */
    font-size: 14px;
  }
}

flex-wrap: wrap;: 작은 화면에서 페이지 번호가 줄을 넘어가면 자동으로 줄바꿈이 적용됩니다.
padding과 font-size: 작은 화면에서는 버튼 크기와 글자 크기를 축소하여 공간을 효율적으로 사용합니다.

5. 화살표 버튼에 스타일 적용

이전/다음 버튼은 페이지 번호와 구분되도록 스타일링할 수 있습니다.

화살표 버튼 스타일링

.pagination a {
  padding: 10px 15px;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.pagination a:hover {
  background-color: #007bff;
  color: white;
}

.pagination a[disabled] {
  color: #ccc; /* 비활성화된 버튼은 회색으로 표시 */
  pointer-events: none; /* 클릭 비활성화 */
}

.pagination .prev-next {
  font-weight: bold;
}

HTML 예시: 화살표 버튼 활성화/비활성화

<div class="pagination">
  <ul>
    <li><a href="#" class="prev-next" disabled>&laquo;</a></li> <!-- 비활성화 -->
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" class="prev-next">&raquo;</a></li> <!-- 활성화 -->
  </ul>
</div>

a[disabled]: 비활성화된 화살표 버튼을 회색으로 표시하고, 클릭할 수 없게 설정합니다.
prev-next 클래스: 화살표 버튼에 굵은 글꼴을 적용해 페이지 번호와 차별화합니다.

6. 실전 예시: 다양한 스타일의 페이지네이션

기본 페이지네이션

<div class="pagination">
  <ul>
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

페이지네이션 스타일

.pagination ul {
  display: flex;
  list-style: none;
  padding: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.pagination a:hover {
  background-color: #007bff;
  color: white;
}

.pagination .active a {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
}

.pagination a[disabled] {
  color: #ccc;
  pointer-events: none;
}

@media (max-width: 600px) {
  .pagination ul {
    flex-wrap: wrap;
  }

  .pagination a {
    padding: 8px 12px;
    font-size: 14px;
  }
}

이 코드는 이전/다음 버튼을 포함한 기본적인 페이지네이션을 완성하고, 호버 효과와 활성화된 페이지 강조 및 반응형 디자인을 적용합니다.

코딩 스쿨 CSS