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

💡 블로그 네비게이션 디자인 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. 좌우 알약형 네비게이션

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

✅ 설치 순서

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

주의사항·운영 팁

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

운영 전 체크리스트

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

함께 보면 좋은 글

💬 HTML 주석 완전정복
삭제 없이 숨기고 복원하는 똑똑한 블로그 관리법 예시를 중심으로 정리했습니다. GSC 도메인 속성 vs www 속성 차이 완전정리
구글 검색 색인 효율을 높이는 정확한 설정법을 단계별로 안내합니다. 티스토리 서브도메인 연결 완벽 가이드
DNS·CNAME 설정부터 SSL 적용까지, 실제 연결 예시를 중심으로 정리했습니다.

마무리

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

Previous

Next