한글 본문과 영문이 섞인 글의 typography

이 페이지는 prose.css의 모든 케이스를 한 페이지에서 검증합니다. 한글과 영문이 자연스럽게 섞여있을 때 mixed-script line-height parity가 어떻게 작동하는지, blockquote / code / table / image / figure / list / heading anchor 같은 요소가 vertical rhythm을 어떻게 따라가는지 직접 확인할 수 있습니다.

The text intentionally mixes scripts — Korean uses word-break: keep-all 으로 단어 단위로 줄바꿈되고, English words like "WordPress", "ActivityPub", "design system" 처럼 긴 단어는 overflow-wrap: anywhere로 안전하게 줄바꿈됩니다. 이 두 규칙이 함께 작동해야 narrow viewport에서 가로 스크롤 없이 깔끔하게 흘러갑니다.

강조 & 인라인 요소

본문에서 강조 (strong)는 굵게, 이탤릭 (em)은 기울임으로 표시됩니다. 인라인 코드 (code)는 surface-container 배경과 작은 radius로 pill처럼 보이고, 인라인 링크는 always-underline (WCAG 1.4.1 색상 단독 의존 회피).

추가로 형광펜 (mark)은 tertiary-container 색으로, ~~취소선 (del)~~과 ~~strikethrough (s)~~는 line-through에 색을 약간 죽인 on-surface-variant로, 밑줄 (ins)은 primary 색의 underline으로, HTML 같은 약자는 dotted underline + cursor: help로 표시됩니다.

리스트

Unordered (기본)

첫 번째 항목 — 짧은 한 줄.
두 번째 항목 — 좀 더 긴 본문이 들어가는 경우 어떻게 흘러가는지 확인할 수 있는 sample. 본문이 두 줄 이상 넘어가면 들여쓰기가 정렬되어야 합니다.
세 번째 항목 — 중첩
- 중첩 항목 a
- 중첩 항목 b
  - 3단계 중첩

Ordered

준비 단계
실행 단계
1. 세부 작업 1
2. 세부 작업 2
마무리

Task list (markdown)

Phase 1B — 33 컴포넌트 카탈로그
Phase 2A — base / prose / blocks 시트
Phase 2B — 정적 페이지 프로토타입
Phase 3 — WordPress 통합

Definition list

토큰 (token): 디자인 시스템에서 의미 단위로 추상화된 값. 예: --md-sys-color-primary는 "primary 액션 색"을 의미하며, 실제 hex 값은 light/dark scheme에 따라 다릅니다.
구성 (composition): 여러 토큰이 합쳐져 컴포넌트의 한 상태를 만드는 방식.

Blockquote

blockquote는 prose context에서 primary-bordered emphasis로 강조됩니다 (base.css는 약한 outline-variant border, prose.css가 primary로 bump).

좋은 디자인은 가능한 적은 디자인을 한다. 본질적이지 않은 모든 것을 빼버리는 것 — 그것이 좋은 디자인의 시작이다.
Dieter Rams

blockquote 다음에 다시 본문이 와도 vertical rhythm이 유지됩니다.

코드 블록

인라인 코드는 const x = 1; 처럼 본문 안에 자연스럽게 녹아들고, 블록 코드는 별도 컨테이너에 padding과 overflow-x scroll을 갖습니다.

// theme.js — Off-canvas nav drawer (excerpt)
function open() {
  if (drawer.open) return;
  drawer.showModal();
  allToggles.forEach(btn =>
    btn.setAttribute('aria-expanded', 'true'));
}

긴 한 줄 코드도 horizontal scroll로 처리됩니다 — 강제 줄바꿈 없이 원본 그대로 보존:

document.querySelectorAll('[role="toolbar"] [aria-pressed]').forEach(btn => btn.addEventListener('click', () => { ... }));

키 입력은 Ctrl + K 처럼 키 캡 스타일로 표시됩니다.

표

표는 .table-wrapper 또는 <figure> 안에 넣어 가로 overflow를 처리합니다. wrapper가 outer border + radius를 그리고, table 자체는 안쪽 cell 스타일만 담당.

토큰	값	용도
`--space-xs`	4px	가장 작은 spacing — inline gap, micro padding
`--space-sm`	8px	component 내부 element 간 gap
`--space-md`	16px	component padding 기본값
`--space-lg`	24px	section 내부 단락 간 spacing
`--space-xl`	32px	section 사이 spacing, heading 위 간격

이미지 & figure

figure 안에 이미지 + figcaption 쌍을 두면 캡션이 자동으로 작은 typography (body-small)와 on-surface-variant 색으로 표시되고, 가운데 정렬됩니다.

Figure 1. 그라데이션 placeholder — 외부 이미지 요청 없이 token primary-container → tertiary-container로 합성

헤딩 깊이 검증

vertical rhythm이 깊이별로 어떻게 작아지는지 확인:

h3 — title-large

h3 다음 본문 — top margin이 h2보다 작음.

h4 — title-medium

h4 다음 본문.

h5 — label-large

h5 다음 본문 — 가장 작은 spacing.

h6 — label-medium

h6 다음 본문.

섹션 구분 (HR)

HR은 prose context에서 큰 vertical margin (space-xl)으로 강한 break 효과:

HR 다음 새 단락. 위/아래 각각 32px 여백.

맺음말

이 페이지의 모든 요소가 정상적으로 보인다면 prose.css §1–§11 전부 작동하는 것입니다. 시각 점검 항목:

vertical rhythm — 모든 sibling 사이 일관된 spacing
headings — 깊이별 차등 spacing (h1/h2 큰 top → h6 작은 top)
blockquote — primary 색의 좌측 bar + 큰 padding
code — 인라인 pill + 블록 큰 padding + overflow-x
table — wrapper border + radius, header tint, last-row no-border
image / figure — radius-medium + figcaption center
list — item 간격, 중첩 들여쓰기, task list 체크박스 정렬
links — always-underline (a11y)

문제가 보이면 다음 chat에서 spot-fix.