카테고리

구성 요소 페이지 매김

페이지 매김

콘텐츠를 여러 페이지로 나누는 탐색 시스템

페이지 매김 구성 요소

레트로/빈티지 디자인 스타일, 트라이어딕 색 구성표, 단순 복잡성, 블로그/콘텐츠 목적, Tailwind CSS 사용 페이지가 매겨진 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 dark:text-white">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    Previous
  </a>
  <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-500 rounded-md dark:bg-indigo-600 dark:text-white dark:border-indigo-700">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    3
  </a>
  <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
    ...
  </span>
  <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    8
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    9
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    10
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    Next
  </a>
</nav>

페이지 매김 구성 요소

어스 톤과 어두운 테마를 지원하는 블로그 콘텐츠 소비를 위해 설계된 스큐어모픽 페이지 매김 구성 요소입니다.

미리보기 열기

                <div class="flex justify-center items-center space-x-4 py-4">
    <button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
        Previous
    </button>
    <span class="text-gray-800 dark:text-gray-200">Page <strong>1</strong> of <strong>10</strong></span>
    <button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
        Next
    </button>
</div>
<div class="flex justify-center space-x-2 py-4">
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        1
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        2
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        3
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        4
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        5
    </button>
</div>
<div class="flex justify-center items-center space-x-4 py-4">
    <span class="text-gray-800 dark:text-gray-200">Jump to page:</span>
    <input type="number" min="1" max="10" class="w-12 px-2 py-1 border-2 border-gray-400 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition duration-300 focus:outline-none focus:border-gray-600 dark:focus:border-gray-400" />
</div>

Glassmorphism 페이지 매김 구성 요소

glassmorphism과 트라이어딕 색 구성표로 설계된 반응형 페이지 매김 구성 요소로, 블로그 및 콘텐츠 읽기에 적합합니다. 여러 대화형 요소를 특징으로 하며 다크 모드를 지원합니다.

미리보기 열기

                <div class="flex justify-center mt-6">
    <nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
        <ul class="flex items-center space-x-2">
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
            </li>
        </ul>
    </nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

전자상거래 페이지 매김

반응형 머티리얼 디자인(Material Design)은 전자 상거래 제품 목록에 적합한 어두운 테마를 지원하는 페이지 매김 구성 요소에서 영감을 받았습니다. HTML 및 Tailwind CSS만 사용하여 대화형 단추 상태로 보색 구성표와 적당한 복잡성을 구현합니다.

미리보기 열기

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 my-4 dark:bg-gray-800 p-2 rounded-md">
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Previous
  </button>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-200 rounded-md hover:bg-blue-300 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600">
    1
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-md dark:bg-blue-500">
    3
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    4
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    5
  </a>
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Next
  </button>
</nav>

Neumorphic Pagination 컴포넌트

다크 모드를 지원하는 Neumorphic Pagination 컴포넌트입니다.

미리보기 열기

                <nav aria-label="Page navigation example">
  <ul class="inline-flex -space-x-px text-base h-10">
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <span class="sr-only">Previous</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
    </li>
    <li>
      <a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <span class="sr-only">Previous</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
      <span class="sr-only">Next</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

페이지 매김 구성 요소

반응형 효과와 어두운 테마를 지원하는 다크 모드 UI를 위한 페이지 매김 컴포넌트.

미리보기 열기

                <nav aria-label="Pagination" class="flex items-center justify-between border-t border-gray-700 px-4 sm:px-0">
  <div class="-mt-px flex w-0 flex-1">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
      <svg class="mr-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z" clip-rule="evenodd" />
      </svg>
      Previous
    </a>
  </div>
  <div class="hidden md:-mt-px md:flex">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">1</a>
    <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
    <a href="#" class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600 dark:text-indigo-400" aria-current="page">2</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">3</a>
    <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400">...</span>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">8</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">9</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">10</a>
  </div>
  <div class="-mt-px flex w-0 flex-1 justify-end">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
      Next
      <svg class="ml-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

페이지 매김 구성 요소

Tailwind CSS를 사용하여 3D 요소와 어두운 테마 지원으로 설계된 반응형 페이지 매김 구성 요소입니다.

미리보기 열기

                <div class="flex justify-center items-center mt-6">
    <nav aria-label="Pagination">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_left</span>
                </a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">1</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">2</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">3</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">...</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">10</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937;
    }
    .text-gray-700 {
        color: #e5e7eb;
    }
    .border-gray-300 {
        border-color: #4b5563;
    }
}
</style>