# blog-html-snippets.md — HTML 스니펫 라이브러리

**작성일**: 2026-03-26
**버전**: v1.0
**작성자**: 이리스 (프론트엔드 전문가, dev1-team)
**태스크**: task-1093.1 (기반 설계: task-1087.1)
**참조 문서**:
- 원본 프롬프트: `/home/jay/.cokacdir/workspace/autoset/블로그작성 프롬프트.txt` (636줄)
- 통합 방안: `/home/jay/workspace/memory/specs/blog-prompt-integration-plan.md` (task-1087.1)
**용도**: Layer 2 — 티스토리 플랫폼 특화 HTML 마크업 라이브러리

> 원본 프롬프트(636줄)에서 HTML 관련 코드를 완전히 분리 추출. 변수 슬롯은 `{{VARIABLE_NAME}}` 형식(Mustache-like). 스타일 변경 없음.

---

## 목차

1. [TOC 템플릿](#1-toc-템플릿)
2. [섹션 헤더](#2-섹션-헤더)
3. [핵심 요약 박스](#3-핵심-요약-박스)
4. [FAQ 아코디언](#4-faq-아코디언)
5. [시각화 요소 5종](#5-시각화-요소-5종)
   - 5-1 체크포인트
   - 5-2 정보 박스
   - 5-3 비교 테이블
   - 5-4 강조 하이라이트
   - 5-5 글머리 기호
6. [AdSense 광고 블록](#6-adsense-광고-블록)
7. [광고 삽입 규칙](#7-광고-삽입-규칙)
8. [이미지-광고 충돌 방지 규칙](#8-이미지-광고-충돌-방지-규칙)

---

## 1. TOC 템플릿

**출처**: 원본 프롬프트 [2단계] 3번 "시선을 사로잡는 목차 디자인" (114-199줄)

변수 슬롯:
- `{{SECTION_TITLE}}` — 섹션 제목 텍스트
- `{{SECTION_ID}}` — 앵커 링크 ID (예: section1, section2)

```html
<style>
.toc-container {
  background-color: #f8f9ff;
  border: 2px solid #3b82f6;
  border-radius: 10px;
  padding: 20px;
  margin: 25px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.toc-container h2 {
  color: #1e40af;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #dbeafe;
  padding-bottom: 8px;
}
.toc-container ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.toc-container li {
  margin: 12px 0;
  padding-left: 0 !important;
  margin-left: 0 !important;
  position: relative;
  transition: all 0.3s ease;
  list-style-type: none !important; /* 추가: 모든 브라우저에서 리스트 스타일 제거 */
}
.toc-container li:hover {
  transform: translateX(5px);
}
/* 강화된 불릿 제거 */
.toc-container li::before,
.toc-container li::marker {
  content: none !important;
  display: none !important;
}
/* 모바일 대응을 위한 미디어 쿼리 추가 */
@media (max-width: 768px) {
  .toc-container li {
    list-style: none !important;
    list-style-type: none !important;
    -webkit-padding-start: 0 !important; /* iOS Safari 대응 */
  }
  .toc-container ul {
    -webkit-padding-start: 0 !important; /* iOS Safari 대응 */
  }
  /* 모바일에서 불릿 표시 방지를 위한 추가 규칙 */
  .toc-container li::before,
  .toc-container li::marker {
    display: none !important;
    content: '' !important;
  }
}
.toc-container a {
  color: #1f2937;
  text-decoration: none !important;
  font-size: 17px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-block;
  padding: 5px 10px;
  border-left: 3px solid #3b82f6;
}
.toc-container a:hover {
  color: #3b82f6;
  background-color: #eff6ff;
  border-radius: 0 5px 5px 0;
}
</style>

<div class="toc-container">
  <h2 data-ke-size="size26">📑 콘텐츠 목차</h2>
  <ul>
    <li>
      <a href="#{{SECTION_ID}}">1. {{SECTION_TITLE}}</a>
    </li>
    <li>
      <a href="#{{SECTION_ID}}">2. {{SECTION_TITLE}}</a>
    </li>
    <!-- 추가 목차 항목 -->
  </ul>
</div>
```

---

## 2. 섹션 헤더

**출처**: 원본 프롬프트 [3단계] 1번 "섹션 헤더 디자인" (203-211줄) + [5단계] 1번 결론 헤더 (390-394줄)

변수 슬롯:
- `{{SECTION_ID}}` — id 속성값 (예: section1, conclusion)
- `{{SECTION_ICON}}` — 이모지 아이콘 (예: 📌, 🎯, ❓)
- `{{SECTION_TITLE}}` — 섹션 제목 텍스트

```html
<br><br><br>
<h2 id="{{SECTION_ID}}" data-ke-size="size26">
  <span style="background: linear-gradient(90deg, #1e40af, #3b82f6); color: white; padding: 10px 15px; display: block; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
    <b>{{SECTION_ICON}} {{SECTION_TITLE}}</b>
  </span>
</h2>
```

**결론 섹션 헤더 변형** (원본 390-394줄):

```html
<h2 id="conclusion" data-ke-size="size26">
  <span style="background: linear-gradient(90deg, #1e40af, #3b82f6); color: white; padding: 10px 15px; display: block; border-radius: 8px;">
    <b>🎯 마치며</b>
  </span>
</h2>
<br>
```

---

## 3. 핵심 요약 박스

**출처**: 원본 프롬프트 [3단계] 3번 "핵심 콘텐츠 요약 섹션 추가" (220-239줄)

변수 슬롯:
- `{{SUMMARY_TITLE}}` — 요약 박스 상단 제목 (예: "섹션 주제의 핵심 콘텐츠 요약")
- `{{ITEM_1_CONTENT}}` — 1번 요약 항목 내용
- `{{ITEM_2_CONTENT}}` — 2번 요약 항목 내용
- `{{ITEM_3_CONTENT}}` — 3번 요약 항목 내용

> 내용의 개수는 작성 글 내용에 따라 다양하게 선정 (3-5개)

```html
<div style="background-color: #f0f7ff; padding: 20px; border-radius: 10px; margin-bottom: 30px; border: 1px solid #bfdbfe;">
  <p style="font-size: 18px; font-weight: bold; color: #1e40af; margin-bottom: 15px;">{{SUMMARY_TITLE}}</p>
<br>

  <div style="display: flex; align-items: flex-start; margin-bottom: 15px;">
    <span style="font-size: 20px; min-width: 30px;">&#x0031;&#xFE0F;&#x20E3;&nbsp;</span>
    <p style="margin: 0; font-weight: 600;">{{ITEM_1_CONTENT}}</p>
  </div>

  <div style="display: flex; align-items: flex-start; margin-bottom: 15px;">
    <span style="font-size: 20px; min-width: 30px;">&#x0032;&#xFE0F;&#x20E3;&nbsp;</span>
    <p style="margin: 0; font-weight: 600;">{{ITEM_2_CONTENT}}</p>
  </div>

  <div style="display: flex; align-items: flex-start; margin-bottom: 15px;">
    <span style="font-size: 20px; min-width: 30px;">&#x0033;&#xFE0F;&#x20E3;&nbsp;</span>
    <p style="margin: 0; font-weight: 600;">{{ITEM_3_CONTENT}}</p>
  </div>
</div>
```

**4번 항목 추가 시** (필요 시 복사):

```html
  <div style="display: flex; align-items: flex-start; margin-bottom: 15px;">
    <span style="font-size: 20px; min-width: 30px;">&#x0034;&#xFE0F;&#x20E3;&nbsp;</span>
    <p style="margin: 0; font-weight: 600;">{{ITEM_4_CONTENT}}</p>
  </div>
```

**5번 항목 추가 시** (필요 시 복사):

```html
  <div style="display: flex; align-items: flex-start; margin-bottom: 15px;">
    <span style="font-size: 20px; min-width: 30px;">&#x0035;&#xFE0F;&#x20E3;&nbsp;</span>
    <p style="margin: 0; font-weight: 600;">{{ITEM_5_CONTENT}}</p>
  </div>
```

---

## 4. FAQ 아코디언

**출처**: 원본 프롬프트 [4단계] "FAQ 섹션" (330-385줄)

특성: CSS-only 동작 (JS 의존성 없음)

변수 슬롯:
- `{{QUESTION}}` — 질문 텍스트
- `{{ANSWER}}` — 답변 텍스트

```html
<style>
  .faq-container {
    margin: 30px 0;
  }
  .faq-item {
    margin-bottom: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
  }
  .faq-question {
    background-color: #f3f4f6;
    padding: 15px 20px;
    font-weight: bold;
    color: #1e40af;
    font-size: 17px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
  }
  .faq-question:hover {
    background-color: #e5e7eb;
  }
  .faq-answer {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
  }
</style>

<h2 data-ke-size="size26">
  <span style="background: linear-gradient(90deg, #1e40af, #3b82f6); color: white; padding: 10px 15px; display: block; border-radius: 8px;">
    <b>❓ 자주 묻는 질문</b>
  </span>
</h2>

<div class="faq-container">
  <div class="faq-item">
    <div class="faq-question">📍 {{QUESTION}}</div>
    <div class="faq-answer">
      <p>{{ANSWER}}</p>
    </div>
  </div>

  <div class="faq-item">
    <div class="faq-question">📍 {{QUESTION}}</div>
    <div class="faq-answer">
      <p>{{ANSWER}}</p>
    </div>
  </div>

  <!-- 추가 FAQ 항목 -->
</div>
```

---

## 5. 시각화 요소 5종

### 5-1. 체크포인트 (✅)

**출처**: 원본 프롬프트 [3단계] 4번 → 5번 "콘텐츠 시각화 전략" > 체크포인트 (256-279줄)

변수 슬롯:
- `{{CONTENT}}` — 핵심 포인트 내용 텍스트

```html
<p data-ke-size="size16">
    ✅ <span style="color: #3b82f6;"><b>핵심 포인트:</b></span> {{CONTENT}}
</p>
<br>
```

---

### 5-2. 정보 박스 (💡)

**출처**: 원본 프롬프트 [3단계] 5번 "콘텐츠 시각화 전략" > 정보 박스 (281-287줄)

변수 슬롯:
- `{{CONTENT}}` — 유용한 부가 정보 텍스트

```html
<div style="background-color: #f0f9ff; padding: 20px; border-radius: 8px; border-left: 5px solid #0ea5e9; margin: 20px 0;">
    <p style="margin: 0;"><b>💡 알아두세요:</b> {{CONTENT}}</p>
</div>
<br>
```

---

### 5-3. 비교 테이블

**출처**: 원본 프롬프트 [3단계] 5번 "콘텐츠 시각화 전략" > 비교 테이블 (289-310줄)

변수 슬롯:
- `{{HEADER_1}}` — 첫 번째 열 헤더
- `{{HEADER_2}}` — 두 번째 열 헤더
- `{{CELL_CONTENT}}` — 각 셀 내용 (홀수 행: 배경색 #f8fafc, 짝수 행: 배경색 없음)

```html
<table style="border-collapse: collapse; width: 100%; margin: 25px 0; font-size: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
    <thead>
        <tr style="background: linear-gradient(90deg, #3b82f6, #60a5fa); color: white;">
            <th style="padding: 15px; text-align: center; border: 1px solid #dbeafe;">{{HEADER_1}}</th>
            <th style="padding: 15px; text-align: center; border: 1px solid #dbeafe;">{{HEADER_2}}</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: #f8fafc;">
            <td style="padding: 15px; text-align: center; border: 1px solid #dbeafe;">{{CELL_CONTENT}}</td>
            <td style="padding: 15px; text-align: center; border: 1px solid #dbeafe;">{{CELL_CONTENT}}</td>
        </tr>
        <tr>
            <td style="padding: 15px; text-align: center; border: 1px solid #dbeafe;">{{CELL_CONTENT}}</td>
            <td style="padding: 15px; text-align: center; border: 1px solid #dbeafe;">{{CELL_CONTENT}}</td>
        </tr>
    </tbody>
</table>
<br>
```

---

### 5-4. 강조 하이라이트

**출처**: 원본 프롬프트 [고급 전략] 4번 "시각적 몰입도 향상 요소" > 중요 문장 강조 (446-448줄)

변수 슬롯:
- `{{TEXT}}` — 강조할 텍스트

인라인 사용 (문장 내 삽입):

```html
<span style="color:#1e40af; font-weight:bold; background-color: #dbeafe; padding: 2px 5px; border-radius: 3px;">{{TEXT}}</span>
```

문장 전체 예시 (원본 447줄 패턴):

```html
<p data-ke-size="size16">특히 <span style="color:#1e40af; font-weight:bold; background-color: #dbeafe; padding: 2px 5px; border-radius: 3px;">{{TEXT}}</span>이 매우 중요합니다.</p>
```

---

### 5-5. 글머리 기호

**출처**: 원본 프롬프트 [고급 전략] 4번 "시각적 몰입도 향상 요소" > 핵심 정보 나열 (449-456줄)

변수 슬롯:
- `{{ITEM}}` — 리스트 각 항목 내용

```html
<ul style="padding-left: 20px; margin: 20px 0;">
    <li style="margin-bottom: 10px;">{{ITEM}}</li>
    <li style="margin-bottom: 10px;">{{ITEM}}</li>
    <li>{{ITEM}}</li>
</ul>
```

---

## 6. AdSense 광고 블록

**출처**: 원본 프롬프트 [3단계] 6번 "광고 삽입 위치" (312-328줄)

Publisher ID: `ca-pub-7649703201786189`
Ad Slot: `2156338161`

```html
<br><br><br>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7649703201786189"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7649703201786189"
     data-ad-slot="2156338161"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br><br><br>
```

---

## 7. 광고 삽입 규칙

**출처**: 원본 프롬프트 [3단계] 6번 주석 (314줄)

- 광고 블록은 **600자 간격**으로 삽입
- 광고 블록 앞뒤에 반드시 `<br><br><br>` 삽입 (위 섹션 6의 코드에 포함되어 있음)
- 섹션 내 콘텐츠가 600자를 초과할 때마다 광고 1회 삽입

---

## 8. 이미지-광고 충돌 방지 규칙

**출처**: `blog-prompt-integration-plan.md` 섹션 6 (243-246줄)

| 규칙 | 내용 |
|------|------|
| 광고-이미지 간격 | `<img>` 앞뒤 300자 이내에 광고 슬롯 배치 금지 |
| 테이블 후 이미지 | 비교 테이블 직후 최소 150자 단락 삽입 후 이미지 배치 |
| FAQ 내 이미지 | FAQ 아코디언 블록 내부에 이미지 삽입 금지 |
| 이미지 크기 규격 | HTML 컨테이너 max-width와 일치 — 표준: 720px, 모바일: 100% |

**이미지 크기 표준 코드**:

```html
<img src="{{IMAGE_URL}}" alt="{{ALT_TEXT}}" style="max-width: 720px; width: 100%;" />
```

---

## 변경 이력

| 버전 | 일시 | 변경 내용 |
|------|------|----------|
| v1.0 | 2026-03-26 | 초판 작성 — 원본 프롬프트 636줄에서 HTML 코드 전체 추출 (task-1093.1) |

---

*blog-html-snippets.md v1.0 | Layer 2 HTML 스니펫 라이브러리 | task-1093.1 | 2026-03-26*