자바스크립트로 페이지네이션(pagination) 만들기

해가 울면 해운대

다양한 페이지네이션 예제
페이지네이션 사용 설명

티스토리 블로그에서 다양한 페이지네이션을 사용하는 방법입니다.
1. 기본 페이지네이션

기본적인 페이지네이션으로 이전/다음 버튼과 숫자로 구성됩니다.
2. 숫자만 있는 페이지네이션

깔끔한 디자인의 숫자만 있는 페이지네이션입니다.
3. 화살표가 있는 페이지네이션

이전/다음 화살표가 강조된 페이지네이션입니다.
4. 카드형 페이지네이션

입체감 있는 카드형 디자인의 페이지네이션입니다.
5. 모던 페이지네이션

상단 보더가 있는 모던한 디자인의 페이지네이션입니다.
6. 인터랙티브 페이지네이션

현재 페이지 정보와 버튼으로 구성된 인터랙티브한 페이지네이션입니다.
전체 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>티스토리 블로그 페이지네이션 예제</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        header h1 {
            color: #333;
            margin-bottom: 10px;
        }

        .content-area {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 30px;
        }

        .post {
            padding: 15px;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .post:last-child {
            border-bottom: none;
        }

        .post h2 {
            color: #1a73e8;
            margin-bottom: 10px;
        }

        .post-info {
            font-size: 0.9em;
            color: #777;
            margin-bottom: 10px;
        }

        .post-content {
            margin-bottom: 15px;
        }

        .read-more {
            color: #1a73e8;
            text-decoration: none;
            font-weight: bold;
        }

        .read-more:hover {
            text-decoration: underline;
        }

        .pagination-container {
            margin: 30px 0;
        }

        h2.section-title {
            margin: 30px 0 15px;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

        /* 기본 페이지네이션 스타일 */
        .pagination-basic {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 20px 0;
        }

        .pagination-basic li {
            margin: 0 5px;
        }

        .pagination-basic a {
            display: block;
            padding: 8px 12px;
            text-decoration: none;
            border: 1px solid #ddd;
            color: #1a73e8;
            border-radius: 4px;
        }

        .pagination-basic .active a {
            background-color: #1a73e8;
            color: white;
            border-color: #1a73e8;
        }

        .pagination-basic a:hover:not(.active) {
            background-color: #eee;
        }

        /* 숫자만 있는 페이지네이션 */
        .pagination-numbers {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 20px 0;
        }

        .pagination-numbers li {
            margin: 0 3px;
        }

        .pagination-numbers a {
            display: block;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            text-decoration: none;
            border-radius: 50%;
            color: #777;
        }

        .pagination-numbers .active a {
            background-color: #1a73e8;
            color: white;
        }

        .pagination-numbers a:hover:not(.active) {
            background-color: #eee;
        }

        /* 화살표가 있는 페이지네이션 */
        .pagination-arrows {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 20px 0;
            align-items: center;
        }

        .pagination-arrows li {
            margin: 0 3px;
        }

        .pagination-arrows a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
            border: 1px solid #ddd;
            color: #1a73e8;
            border-radius: 4px;
        }

        .pagination-arrows .active a {
            background-color: #1a73e8;
            color: white;
            border-color: #1a73e8;
        }

        .pagination-arrows a:hover:not(.active) {
            background-color: #eee;
        }

        .pagination-arrows .prev a,
        .pagination-arrows .next a {
            background-color: #f9f9f9;
        }

        /* 카드형 페이지네이션 */
        .pagination-card {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 20px 0;
        }

        .pagination-card li {
            margin: 0 3px;
        }

        .pagination-card a {
            display: block;
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            text-decoration: none;
            background-color: white;
            color: #333;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border-radius: 4px;
        }

        .pagination-card .active a {
            background-color: #1a73e8;
            color: white;
        }

        .pagination-card a:hover:not(.active) {
            background-color: #f5f5f5;
        }

        /* 모던 페이지네이션 */
        .pagination-modern {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 20px 0;
        }

        .pagination-modern li {
            margin: 0;
        }

        .pagination-modern a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #777;
            border-top: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .pagination-modern .active a {
            color: #1a73e8;
            border-top: 2px solid #1a73e8;
        }

        .pagination-modern a:hover:not(.active) {
            color: #1a73e8;
        }

        /* 인터랙티브 페이지네이션 */
        .pagination-interactive {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
        }

        .pagination-interactive .page-info {
            padding: 8px 16px;
            background-color: #f9f9f9;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .pagination-interactive .page-buttons {
            display: flex;
        }

        .pagination-interactive button {
            padding: 8px 16px;
            margin: 0 5px;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #1a73e8;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pagination-interactive button:hover {
            background-color: #f5f5f5;
        }

        .pagination-interactive button:disabled {
            color: #ccc;
            cursor: not-allowed;
        }

        .button-group {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        .style-button {
            padding: 10px 15px;
            margin: 0 5px;
            background-color: #1a73e8;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .style-button:hover {
            background-color: #135bba;
        }

        footer {
            text-align: center;
            padding: 20px 0;
            margin-top: 30px;
            border-top: 1px solid #eee;
        }

        #pagination-container {
            margin-top: 20px;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>티스토리 블로그</h1>
            <p>다양한 페이지네이션 예제</p>
        </header>

        <div class="content-area">
            <div id="posts-container">
                <!-- 게시물은 JavaScript로 동적 생성됩니다 -->
            </div>

            <div class="button-group">
                <button class="style-button" onclick="changePaginationStyle('basic')">기본 스타일</button>
                <button class="style-button" onclick="changePaginationStyle('numbers')">숫자만</button>
                <button class="style-button" onclick="changePaginationStyle('arrows')">화살표</button>
                <button class="style-button" onclick="changePaginationStyle('card')">카드형</button>
                <button class="style-button" onclick="changePaginationStyle('modern')">모던</button>
                <button class="style-button" onclick="changePaginationStyle('interactive')">인터랙티브</button>
            </div>

            <div id="pagination-container">
                <!-- 페이지네이션은 JavaScript로 동적 생성됩니다 -->
            </div>
        </div>

        <div class="content-area">
            <h2 class="section-title">페이지네이션 사용 설명</h2>
            <p>티스토리 블로그에서 다양한 페이지네이션을 사용하는 방법입니다.</p>
            
            <h3>1. 기본 페이지네이션</h3>
            <p>기본적인 페이지네이션으로 이전/다음 버튼과 숫자로 구성됩니다.</p>
            
            <h3>2. 숫자만 있는 페이지네이션</h3>
            <p>깔끔한 디자인의 숫자만 있는 페이지네이션입니다.</p>
            
            <h3>3. 화살표가 있는 페이지네이션</h3>
            <p>이전/다음 화살표가 강조된 페이지네이션입니다.</p>
            
            <h3>4. 카드형 페이지네이션</h3>
            <p>입체감 있는 카드형 디자인의 페이지네이션입니다.</p>
            
            <h3>5. 모던 페이지네이션</h3>
            <p>상단 보더가 있는 모던한 디자인의 페이지네이션입니다.</p>
            
            <h3>6. 인터랙티브 페이지네이션</h3>
            <p>현재 페이지 정보와 버튼으로 구성된 인터랙티브한 페이지네이션입니다.</p>
        </div>

        <footer>
            <p>© 2025 티스토리 블로그 페이지네이션 예제</p>
        </footer>
    </div>

    <script>
        // 더미 데이터 생성 (게시물 50개)
        const posts = [];
        for (let i = 1; i <= 50; i++) {
            posts.push({
                id: i,
                title: `블로그 게시물 제목 ${i}`,
                date: `2025-05-${String(Math.floor(Math.random() * 30) + 1).padStart(2, '0')}`,
                author: '관리자',
                content: `이것은 블로그 게시물 ${i}의 내용입니다. 티스토리 블로그에 사용할 수 있는 다양한 페이지네이션 예제를 보여주는 샘플 콘텐츠입니다. 페이지네이션은 블로그의 사용자 경험을 향상시키는 중요한 요소입니다.`
            });
        }

        // 페이지네이션 설정
        let currentPage = 1;
        const postsPerPage = 5;
        const totalPages = Math.ceil(posts.length / postsPerPage);
        let currentStyle = 'basic';

        // 페이지 로드 시 초기 데이터 표시
        document.addEventListener('DOMContentLoaded', function() {
            displayPosts(currentPage);
            renderPagination(currentStyle);
        });

        // 게시물 표시 함수
        function displayPosts(page) {
            const postsContainer = document.getElementById('posts-container');
            postsContainer.innerHTML = '';

            const startIndex = (page - 1) * postsPerPage;
            const endIndex = Math.min(startIndex + postsPerPage, posts.length);
            
            for (let i = startIndex; i < endIndex; i++) {
                const post = posts[i];
                postsContainer.innerHTML += `
                    <div class="post">
                        <h2>${post.title}</h2>
                        <div class="post-info">
                            <span class="date">${post.date}</span> | 
                            <span class="author">${post.author}</span>
                        </div>
                        <div class="post-content">
                            <p>${post.content}</p>
                        </div>
                        <a href="#" class="read-more">더 읽기</a>
                    </div>
                `;
            }
        }

        // 페이지네이션 스타일 변경 함수
        function changePaginationStyle(style) {
            currentStyle = style;
            renderPagination(style);
        }

        // 페이지네이션 렌더링 함수
        function renderPagination(style) {
            const paginationContainer = document.getElementById('pagination-container');
            paginationContainer.innerHTML = '';
            
            switch(style) {
                case 'basic':
                    renderBasicPagination();
                    break;
                case 'numbers':
                    renderNumbersPagination();
                    break;
                case 'arrows':
                    renderArrowsPagination();
                    break;
                case 'card':
                    renderCardPagination();
                    break;
                case 'modern':
                    renderModernPagination();
                    break;
                case 'interactive':
                    renderInteractivePagination();
                    break;
                default:
                    renderBasicPagination();
            }
        }

        // 기본 페이지네이션
        function renderBasicPagination() {
            const paginationContainer = document.getElementById('pagination-container');
            
            let html = '<ul class="pagination-basic">';
            
            // 이전 버튼
            if (currentPage > 1) {
                html += `<li><a href="#" onclick="changePage(${currentPage - 1})">이전</a></li>`;
            } else {
                html += `<li><a href="#" style="color: #ccc;">이전</a></li>`;
            }
            
            // 페이지 번호
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);
            
            if (startPage > 1) {
                html += `<li><a href="#" onclick="changePage(1)">1</a></li>`;
                if (startPage > 2) {
                    html += `<li><span>...</span></li>`;
                }
            }
            
            for (let i = startPage; i <= endPage; i++) {
                if (i === currentPage) {
                    html += `<li class="active"><a href="#">${i}</a></li>`;
                } else {
                    html += `<li><a href="#" onclick="changePage(${i})">${i}</a></li>`;
                }
            }
            
            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    html += `<li><span>...</span></li>`;
                }
                html += `<li><a href="#" onclick="changePage(${totalPages})">${totalPages}</a></li>`;
            }
            
            // 다음 버튼
            if (currentPage < totalPages) {
                html += `<li><a href="#" onclick="changePage(${currentPage + 1})">다음</a></li>`;
            } else {
                html += `<li><a href="#" style="color: #ccc;">다음</a></li>`;
            }
            
            html += '</ul>';
            paginationContainer.innerHTML = html;
        }

        // 숫자만 있는 페이지네이션
        function renderNumbersPagination() {
            const paginationContainer = document.getElementById('pagination-container');
            
            let html = '<ul class="pagination-numbers">';
            
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);
            
            if (startPage > 1) {
                html += `<li><a href="#" onclick="changePage(1)">1</a></li>`;
                if (startPage > 2) {
                    html += `<li><span>...</span></li>`;
                }
            }
            
            for (let i = startPage; i <= endPage; i++) {
                if (i === currentPage) {
                    html += `<li class="active"><a href="#">${i}</a></li>`;
                } else {
                    html += `<li><a href="#" onclick="changePage(${i})">${i}</a></li>`;
                }
            }
            
            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    html += `<li><span>...</span></li>`;
                }
                html += `<li><a href="#" onclick="changePage(${totalPages})">${totalPages}</a></li>`;
            }
            
            html += '</ul>';
            paginationContainer.innerHTML = html;
        }

        // 화살표가 있는 페이지네이션
        function renderArrowsPagination() {
            const paginationContainer = document.getElementById('pagination-container');
            
            let html = '<ul class="pagination-arrows">';
            
            // 이전 버튼
            if (currentPage > 1) {
                html += `<li class="prev"><a href="#" onclick="changePage(${currentPage - 1})">← 이전</a></li>`;
            } else {
                html += `<li class="prev"><a href="#" style="color: #ccc;">← 이전</a></li>`;
            }
            
            // 페이지 번호
            const startPage = Math.max(1, currentPage - 1);
            const endPage = Math.min(totalPages, currentPage + 1);
            
            for (let i = startPage; i <= endPage; i++) {
                if (i === currentPage) {
                    html += `<li class="active"><a href="#">${i}</a></li>`;
                } else {
                    html += `<li><a href="#" onclick="changePage(${i})">${i}</a></li>`;
                }
            }
            
            // 다음 버튼
            if (currentPage < totalPages) {
                html += `<li class="next"><a href="#" onclick="changePage(${currentPage + 1})">다음 →</a></li>`;
            } else {
                html += `<li class="next"><a href="#" style="color: #ccc;">다음 →</a></li>`;
            }
            
            html += '</ul>';
            paginationContainer.innerHTML = html;
        }

        // 카드형 페이지네이션
        function renderCardPagination() {
            const paginationContainer = document.getElementById('pagination-container');
            
            let html = '<ul class="pagination-card">';
            
            // 이전 버튼
            if (currentPage > 1) {
                html += `<li><a href="#" onclick="changePage(${currentPage - 1})">←</a></li>`;
            } else {
                html += `<li><a href="#" style="color: #ccc;">←</a></li>`;
            }
            
            // 페이지 번호
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);
            
            for (let i = startPage; i <= endPage; i++) {
                if (i === currentPage) {
                    html += `<li class="active"><a href="#">${i}</a></li>`;
                } else {
                    html += `<li><a href="#" onclick="changePage(${i})">${i}</a></li>`;
                }
            }
            
            // 다음 버튼
            if (currentPage < totalPages) {
                html += `<li><a href="#" onclick="changePage(${currentPage + 1})">→</a></li>`;
            } else {
                html += `<li><a href="#" style="color: #ccc;">→</a></li>`;
            }
            
            html += '</ul>';
            paginationContainer.innerHTML = html;
        }

        // 모던 페이지네이션
        function renderModernPagination() {
            const paginationContainer = document.getElementById('pagination-container');
            
            let html = '<ul class="pagination-modern">';
            
            // 이전 버튼
            if (currentPage > 1) {
                html += `<li><a href="#" onclick="changePage(${currentPage - 1})">이전</a></li>`;
            } else {
                html += `<li><a href="#" style="color: #ccc;">이전</a></li>`;
            }
            
            // 페이지 번호
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);
            
            for (let i = startPage; i <= endPage; i++) {
                if (i === currentPage) {
                    html += `<li class="active"><a href="#">${i}</a></li>`;
                } else {
                    html += `<li><a href="#" onclick="changePage(${i})">${i}</a></li>`;
                }
            }
            
            // 다음 버튼
            if (currentPage < totalPages) {
                html += `<li><a href="#" onclick="changePage(${currentPage + 1})">다음</a></li>`;
            } else {
                html += `<li><a href="#" style="color: #ccc;">다음</a></li>`;
            }
            
            html += '</ul>';
            paginationContainer.innerHTML = html;
        }

        // 인터랙티브 페이지네이션
        function renderInteractivePagination() {
            const paginationContainer = document.getElementById('pagination-container');
            
            let html = '<div class="pagination-interactive">';
            
            // 페이지 정보
            html += `<div class="page-info">페이지 ${currentPage} / ${totalPages}</div>`;
            
            // 버튼 그룹
            html += '<div class="page-buttons">';
            
            // 처음 버튼
            if (currentPage > 1) {
                html += `<button onclick="changePage(1)">처음</button>`;
            } else {
                html += `<button disabled>처음</button>`;
            }
            
            // 이전 버튼
            if (currentPage > 1) {
                html += `<button onclick="changePage(${currentPage - 1})">이전</button>`;
            } else {
                html += `<button disabled>이전</button>`;
            }
            
            // 다음 버튼
            if (currentPage < totalPages) {
                html += `<button onclick="changePage(${currentPage + 1})">다음</button>`;
            } else {
                html += `<button disabled>다음</button>`;
            }
            
            // 마지막 버튼
            if (currentPage < totalPages) {
                html += `<button onclick="changePage(${totalPages})">마지막</button>`;
            } else {
                html += `<button disabled>마지막</button>`;
            }
            
            html += '</div></div>';
            paginationContainer.innerHTML = html;
        }

        // 페이지 변경 함수
        function changePage(page) {
            if (page < 1 || page > totalPages) return;
            currentPage = page;
            displayPosts(currentPage);
            renderPagination(currentStyle);
            window.scrollTo(0, 0);
        }
    </script>
</body>
</html>
==========
'javascript' 카테고리의 다른 글

내컴퓨터 ip 확인하기 가져오기 ip가져오는 api 사이트 (1)	2024.10.14
자바스크립트로 랜덤 문자열 생성하기 (0)	2024.10.08
vanilla javascript navigator로 사용자 언어, 배터리 상태, 위치, 기타 정보 가져오기 (1)	2024.10.08
Vanilla JS URL Encoder Decoder 자바스크립트 URL 인코더 디코더 (0)	2024.09.20
Zip File Viewer Zip 파일 뷰어 (0)	2024.09.16
자바스크립트로 페이지네이션(pagination) 만들기

자바스크립트로 페이지네이션(pagination) 만들기

페이지네이션 사용 설명

1. 기본 페이지네이션

2. 숫자만 있는 페이지네이션

3. 화살표가 있는 페이지네이션

4. 카드형 페이지네이션

5. 모던 페이지네이션

6. 인터랙티브 페이지네이션

'javascript' 카테고리의 다른 글

'javascript' Related Articles

티스토리툴바
