🔗 티스토리 블로그 하단에 이전글 현재글 다음글 버튼 넣기

💡 블로그 네비게이션 디자인 2종 완성 가이드

이전글·현재글·다음글을 연결하는 네비게이션을 심플한 구조와 알약형 디자인 두 가지로 구현하는 방법을 다룹니다.
모든 링크는 현재 창에서 열리며, 반응형 환경에서도 자연스럽게 작동합니다.

미리보기

적용 전에 꼭 읽어주세요

처음 스킨이나 HTML을 수정하신다면, 아래 내용을 차근차근 확인해 주세요. 어렵지 않게 따라 하실 수 있도록 핵심만 정리했습니다. 🙂

① 변경 전 백업
현재 사용 중인 HTML, CSS, 스킨을 꼭 백업해 두세요. 문제가 생겨도 바로 되돌릴 수 있는 안전망이 됩니다.
② 기존 네비 중복 확인
일부 스킨에는 ‘이전글·다음글’ 네비가 기본 포함되어 있습니다. 중복으로 두면 디자인이 깨지거나 글이 두 번 표시될 수 있어요. 기존 블록은 삭제 대신 주석 처리를 권장합니다.
③ CSS 충돌 가능성
테마 전역 규칙과 새 코드가 겹치면 색상·폰트·정렬이 다르게 보일 수 있습니다. .am- 접두 클래스를 유지하세요.
④ 검색 색인 영향
구조 변경만으로 색인 불이익은 없습니다. 다만 숨김 대형 블록·중복 DOM은 속도를 저하시켜 SEO에 악영향일 수 있습니다.
⑤ 교체보다 추가 권장
테마 원본을 통째 교체하지 말고 “기존 + 추가”로 적용하세요.

방법 1. 심플 네비게이션

가벼운 테마에도 무리 없이 붙는 간결한 테이블형 레이아웃입니다. 제목은 2줄까지 자동 줄바꿈되며, 모바일에서 말줄임 처리가 됩니다.

HTML

<div class="post-nav-wrapper">
  <table class="post-nav">
    <tr>
      <td class="prev-post">
        <s_article_prev>
          <a href="[##_article_prev_link_##]" target="_self">
            <strong class="label">← 이전글</strong>: <span class="title">[##_article_prev_title_##]</span>
          </a>
        </s_article_prev>
      </td>
      <td class="current-post">
        📌 <strong class="label">현재글</strong>: <span class="title">[##_article_rep_title_##]</span>
      </td>
      <td class="next-post">
        <s_article_next>
          <a href="[##_article_next_link_##]" target="_self">
            <strong class="label">다음글 →</strong>: <span class="title">[##_article_next_title_##]</span>
          </a>
        </s_article_next>
      </td>
    </tr>
  </table>
</div>

CSS

.post-nav-wrapper{margin:40px 0;text-align:center}
.post-nav{width:100%;border-collapse:collapse;table-layout:fixed}
.post-nav td{padding:12px;font-size:15px;vertical-align:top}
.post-nav .prev-post{text-align:left}
.post-nav .current-post{text-align:center}
.post-nav .next-post{text-align:right}
.post-nav .label{font-weight:700}
.post-nav .current-post .title{color:#ff6600;font-weight:700}
.post-nav a{color:inherit;text-decoration:none}
.post-nav a:hover{text-decoration:none;background:transparent}
.post-nav a,.post-nav .title{white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.45}
@media (max-width:767px){
  .post-nav td{padding:6px 4px}
  .post-nav .title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

방법 1 결과 예시

방법 2. 좌우 알약형 네비게이션

좌측은 왼쪽만 둥근 알약, 가운데는 각진 직사각형, 우측은 오른쪽만 둥근 알약으로 방향성이 즉시 인지됩니다. PC에서는 3개가 한 줄, 모바일에서는 세로 정렬. 모든 링크는 현재 창에서 열립니다.

HTML

<nav class="am-post-nav" aria-label="이전·현재·다음 글 탐색">
  <s_article_prev>
    <a class="am-item am-prev" href="[##_article_prev_link_##]" target="_self" rel="prev">
      <span class="am-pill"><span class="am-title">[##_article_prev_title_##]</span></span>
    </a>
  </s_article_prev>

  <a class="am-item am-current" href="[##_article_rep_link_##]" target="_self" aria-current="page">
    <span class="am-pill"><span class="am-title">[##_article_rep_title_##]</span></span>
  </a>

  <s_article_next>
    <a class="am-item am-next" href="[##_article_next_link_##]" target="_self" rel="next">
      <span class="am-pill"><span class="am-title">[##_article_next_title_##]</span></span>
    </a>
  </s_article_next>
</nav>

CSS

.am-post-nav{box-sizing:border-box;font-family:'Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:14px auto 28px;padding:0 6px}
.am-post-nav .am-item{position:relative;display:block}
.am-post-nav .am-pill{display:block;width:100%;min-height:48px;padding:8px 12px;border:1px solid transparent;box-shadow:0 5px 12px rgba(0,0,0,.06);text-decoration:none;cursor:pointer;transition:transform .08s ease, box-shadow .18s ease, background .2s ease}
.am-post-nav .am-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;color:#0f172a;font-size:.98rem;font-weight:700}
.am-post-nav .am-item.am-prev .am-pill{background:#c8f2e9;border-color:#a9e7da;border-radius:999px 16px 16px 999px;padding-left:20px;padding-right:12px}
.am-post-nav .am-item.am-current .am-pill{background:linear-gradient(180deg,#ffe06a 0%, #f9c93a 100%);border-color:#f3be2e;border-radius:0}
.am-post-nav .am-item.am-next .am-pill{background:#ffd6e3;border-color:#ffc2d4;border-radius:16px 999px 999px 16px;padding-right:20px;padding-left:12px}
.am-post-nav .am-pill:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.10)}
.am-post-nav .am-item.am-current .am-pill:hover{background:linear-gradient(180deg,#ffe578 0%, #f7c12a 100%)}
@media (max-width:960px){.am-post-nav{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.am-post-nav{grid-template-columns:1fr}}
.am-post-nav a{color:inherit !important;text-decoration:none !important}
.am-post-nav ins.adsbygoogle{display:block !important;min-height:60px;}

방법 2. 좌우 알약형 네비게이션

📍 설치 위치 가이드 (초보자용)

✅ 설치 순서

백업 먼저! 스킨 편집 → HTML/CSS 변경 전에 스킨 백업 필수.
HTML 코드 추가 — <s_permalink_article_rep> 안에서 </s_tag_label> 다음 줄, <s_article_related> 직전.
CSS 추가 — 스킨 편집 > CSS 편집 맨 아래(또는 본문 하단 <style>).
미리보기 점검 — PC/모바일 동작 확인, 충돌 시 CSS를 맨 아래로 이동.
중복 네비 제거 — 기존 ‘이전/다음’ 네비가 있으면 주석 처리 또는 삭제.

주의사항·운영 팁

첫 글/마지막 글에서는 일부 칸이 비워질 수 있습니다(스킨별 처리 차이).
중복 컴포넌트는 UX/성능/색인에 불리—하나만 남기세요.
긴 제목 대비: 2줄 제한 + 말줄임 유지(모바일 가독성↑).

운영 전 체크리스트

변경 전 스킨 백업
HTML 삽입 위치 확인
CSS 충돌 여부 확인
모바일 말줄임 동작 확인
광고 노출 간격 확인

마무리

방법 1은 가볍고 빠르며, 방법 2는 클릭 유도와 시각적 완성도가 뛰어납니다. 블로그 톤앤매너와 카테고리 구성에 맞춰 선택해 적용해 보세요. 모든 링크는 현재 창에서 열려 사용자 이탈을 최소화합니다.

🔍 이 블로그 검색 (Search)

SetupGold – 비즈니스·투자·자금 지원까지

🌟 추천글

2026 정부지원금 한눈에 보기 | 개인·청년·소상공인·외국인 총정리 - Korean Government Support Funds