티스토리 포스트에 타임라인 삽입하는 법 (HTML 활용)

티스토리 포스트에 타임라인 삽입하는 법 (HTML활용)

 

 

티스토리 포스트에 타임라인 삽입하는 법 (HTML 활용)

 

타임라인HTMLCSS반응형접근성티스토리

 

 

📑 목차

• 개요: 언제 타임라인을 쓰나
• 기본 타임라인(HTML/CSS)
• 아이콘/애니메이션 옵션
• 접근성·모바일·SEO 주의점
• 이미지 슬롯·OG·ALT 규칙
• 배포 전 체크리스트
• 최종 정리

 

개요: 언제 타임라인을 쓰나

 

프로젝트 진행, 업데이트 기록, 연재 로드맵처럼 시간 순서가 중요한 글은 타임라인이 가독성과 회전율을 높입니다. OG/요약·표·내부 링크와 함께 사용하면 체류와 탐색이 안정적으로 개선됩니다.

 

핵심: 본문 1열 구조에서 간결한 카드형 타임라인이 가장 안전합니다.

 

 

세로형 카드형 타임라인이 모바일에서도 가장 읽기 좋습니다

 

기본 타임라인(HTML/CSS)

 

아래 블록을 티스토리 HTML 모드에 붙여넣으면 즉시 동작합니다.

 

<div class="timeline" role="list" aria-label="업데이트 타임라인">
  <article class="t-item" role="listitem">
    <time class="t-time" datetime="2025-03-10">2025.03.10</time>
    <div class="t-card">
      <h4>버전 2.0 출시</h4>
      <p>새 스킨과 목차 스티키를 적용했습니다.</p>
    </div>
  </article>
  <article class="t-item" role="listitem">
    <time class="t-time" datetime="2025-02-20">2025.02.20</time>
    <div class="t-card">
      <h4>GA4 이벤트 추가</h4>
      <p>scroll_90, view_second_post를 수집합니다.</p>
    </div>
  </article>
</div>

 

/* 본문 CSS에 추가(스킨 편집 > CSS) — 위의 DEMO 스타일과 동일 */
.timeline{position:relative;margin:22px 0;padding-left:28px}
.timeline::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:linear-gradient(#dbeafe,#2563eb)}
.t-item{position:relative;margin:0 0 18px}
.t-item::before{content:"";position:absolute;left:-2px;top:.45em;width:10px;height:10px;border:2px solid #2563eb;background:#fff;border-radius:50%}
.t-time{display:inline-block;font-size:12px;color:#6b7280;margin-bottom:4px}
.t-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}

 

 

팁: 6개 이상이면 .timeline grid 클래스로 2열 카드형(데스크톱) 전환을 고려하세요.

 

아이콘/애니메이션 옵션

 

<!-- 아이콘(이모지/문자) 간단 적용 -->
<h4>🚀 버전 2.0 출시</h4>

<!-- 등장 애니메이션(안전한 수준) -->
.t-card{transition:transform .3s ease, box-shadow .3s ease}
.t-item:hover .t-card{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06)}

 

과도한 모션은 INP를 악화할 수 있습니다. 스크롤 트리거 라이브러리는 가급적 지양하고, CSS 전환만 사용하세요.

 

접근성·모바일·SEO 주의점

 

• 접근성: role="list"/role="listitem", <time datetime>을 포함.
• 모바일: 1열 기본, 데스크톱에서만 2열 그리드(미디어쿼리).
• SEO/광고: 타임라인과 광고 사이에 여백을 두고, 광고 컨테이너는 min-height로 CLS 방지.

 

이미지 슬롯·OG·ALT 규칙

 

• 대표 썸네일: 1200×630, “타임라인 삽입 가이드” 12~16자 문구.
• 본문 이미지: WebP, 크기 고정, loading="lazy" 적용.
• ALT: “시간순 카드형 타임라인 UI 예시”처럼 구조가 보이게.

 

HTML(리스트 / 타임) + CSS( 라인 / 노드 /카드 )의 결합이 핵심입니다

 

배포 전 체크리스트

 

1. <time datetime>의 날짜 형식이 ISO(YYYY-MM-DD)인가?
2. 모바일(375px)·데스크톱(1280px)에서 줄바꿈/여백이 깨지지 않는가?
3. 광고와 겹치지 않도록 상하 마진이 충분한가?
4. 색 대비(AA)와 포커스 가능 요소의 접근성이 보장되는가?

 

가독성과 회전율을 높이되 성능 지표를 함께 자켜야 합니다

 

최종 정리

 

티스토리 본문에 타임라인을 넣는 가장 쉬운 방법은 순수 HTML/CSS의 카드형 세로 타임라인입니다. 접근성과 성능 원칙을 지키고, 2열 그리드는 데스크톱에서만 적용하세요. 동일 템플릿으로 업데이트 로그·로드맵·연재 목차 등 다양한 용도로 재사용할 수 있습니다.