Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS만으로 반응형 페이지네이션 만들기 – 예제 코드와 상세 해설

CSS만으로 반응형 페이지네이션 만들기

블로그 게시글, 퀴즈, 상품 목록 등 콘텐츠가 여러 페이지로 나뉘는 웹사이트라면 페이지네이션(pagination)은 빼놓을 수 없는 UI 요소입니다. 복잡한 JavaScript 없이 CSS만으로도 깔끔하고 반응형인 페이지네이션을 충분히 구현할 수 있습니다.

아래 예제 코드를 그대로 복사해 실행하면 바로 결과를 확인할 수 있습니다.

예제 코드

<!DOCTYPE html>
<html>
    <head>
        <style>
            .demo {
                display: inline-block;
            }
            .demo a {
                color: blue;
                float: left;
                padding: 3px 8px;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <h2>퀴즈 목록</h2>
        <div class="demo">
            <a href="prev.html">&lt;</a>
            <a href="quiz1.html">Quiz1</a>
            <a href="quiz2.html">Quiz2</a>
            <a href="quiz3.html">Quiz3</a>
            <a href="quiz4.html">Quiz4</a>
            <a href="next.html">&gt;</a>
        </div>
    </body>
</html>

코드 핵심 포인트

  • .demo { display: inline-block; } — 컨테이너가 내용물 크기에 맞춰 자동으로 조절되므로 어떤 화면 크기에서도 자연스럽게 배치됩니다.
  • .demo a { float: left; } — 페이지 링크들이 세로가 아닌 가로 방향으로 나란히 정렬됩니다.
  • padding: 3px 8px; — 각 링크의 클릭 영역을 넓혀 스마트폰 같은 터치 환경에서도 누르기 편합니다.
  • text-decoration: none; — 링크의 기본 밑줄을 제거해 더 깔끔한 디자인을 완성합니다.

맨 앞의 < 기호와 맨 뒤의 > 기호는 각각 이전 페이지와 다음 페이지로 이동하는 버튼 역할을 합니다. 실제 서비스에 적용할 때는 현재 머무는 페이지 번호에 배경색을 입혀 강조하거나, hover 효과를 추가하면 사용자 경험이 한층 더 좋아집니다.