통합 검증: Markdown·UI·이미지·CTA를 한 번에 확인하는 풀 커버리지 포스트

이 포스트는 테마가 실제로 얼마나 버티는지를 한 번에 확인하는 통합 점검용 페이지다.

하나의 글 안에 다음을 모두 넣었다.

• 마크다운 기본 문법
• 표, 리스트, 인용문, 각주, 취소선, 강조
• figure, inline image, 링크형 이미지
• CTA, collapse, raw HTML, LTR / RTL
• 코드 블록, 원문 코드 예시, 표 형식 설명
• 일반 독자가 읽기 쉬운 포스팅 톤과 운영용 점검 톤

이 페이지의 목표는 “예쁘게 보이기”가 아니라 “어디가 깨지는지 바로 보이기”다.

한눈에 보는 점검 항목

대표 비주얼

문장 사이에는 같은 인라인 이미지도 들어간다. 줄 높이가 과하게 흔들리면 바로 눈에 띈다.

기본 Markdown 문법

H3

H4

H5

H6

이 문장은 굵게, 기울임, 취소선, inline code를 한 번에 포함한다.
링크도 섞어 본다: 디자인 토큰 페이지로 이동.

• 첫 번째 항목
• 두 번째 항목
  • 중첩 항목
  • 중첩 항목 안의 inline code
• 세 번째 항목

1. 순서 있는 목록
2. 두 번째 순서 항목
3. 마지막 순서 항목

• 아직 확인 안 된 항목
• 이미 확인한 항목

인용문은 여백과 행간, 좌우 구분선의 존재감이 한 번에 드러나는 지점이다. 길이가 길어져도 카드처럼 떠 보이지 않아야 한다.

표와 비교

예외 문법과 경계 입력

이 문자열은 일부러 길게 만든다. 줄바꿈이 있어도, URL이 붙어 있어도, 괄호와 기호가 섞여도 레이아웃이 깨지지 않아야 한다: https://example.com/this/is/a/very/long/path/with/query?alpha=1&beta=2&gamma=3

| 문법 | 경계 | 확인 |
| --- | --- | --- |
| pipe | A \| B | 셀이 쪼개지지 않는가 |
| backtick | `inline` | 코드가 잘 닫히는가 |
| ampersand | A & B | 엔티티가 오염되지 않는가 |

raw HTML 카드

collapse와 안내문

<article class="post-card">
  <header class="post-card__header">
    <h2 class="post-card__title">통합 검증 포스트</h2>
    <p class="post-card__meta">마크다운, 이미지, CTA, 표, 코드, 방향성을 한 번에 확인</p>
  </header>

  <div class="post-card__body">
    <p>이 구조는 실제 블로그 글에서도 재사용할 수 있는 가장 기본적인 카드 패턴이다.</p>
  </div>
</article>

원문 코드 예시 2

.post-card {
  padding: var(--space-lg);
  border: var(--border-width-thin) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-sm);
}

원문 코드 예시 3

title: "통합 검증"
summary: "한 페이지 풀 커버리지 포스트"
categories:
  - theme-upgrade
  - verification
tags:
  - markdown
  - ui

CTA와 행동 유도

자주 놓치는 항목

마무리

이 한 페이지가 안정적이면, 나머지 페이지도 대부분 같은 기준으로 버틸 가능성이 높다.