P Primer · 13

본문

Body text

깃허브 문서 본문처럼 제목 아래에 가는 선이 그어지고(open 은 선 없이 크게), 표·체크리스트·인용도 그 모양을 따라요.

쓰는 규칙본문 글자는 폰 17px·넓은 화면 18px, 줄 간격 1.8 — 어느 팩도 이걸 줄이지 않는다. 글 구조는 공통이고 팩은 모양만 바꾼다.

다른 이름: Prosemarkdown-body
···
usage (Astro)
---
// src/pages/[post].astro
import { Prose } from '../components/registry';
---
<Prose>
  <Content />
</Prose>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Prose": "ruled" }
}
props (TypeScript)
export interface ProseProps {
  variant?: VariantOf<'Prose'>;
  careVariant?: VariantOf<'CareGuide'>;
  /** 정적 페이지(소개 등)처럼 표·병원 카드가 없는 글 */
  plain?: boolean;
}

ruled는 표에 가로선만 있고 타임라인은 세로선 위 작은 회색 점, 시기는 굵은 글자예요. boxed는 GitHub 표처럼 칸마다 선이 있고 짝수 줄이 연한 회색이며, 타임라인은 상자 하나에 줄을 나눠요. open은 표 머리만 회색이고 세로선이 없고, 제목 아래 선이 없이 크게 쓰며, 타임라인은 시기를 작은 회색 글자로 묶은 목록이에요. 모든 변형에서 인용은 왼쪽 띠 없이 네 면 테두리, 체크리스트는 네모 칸이에요.

표가 많은 글은 boxed가 읽기 쉽고, 담백하게 가려면 ruled나 open이에요. 데모는 폭이 좁아 표가 작게 보여서 폰에서 셀이 빽빽할 수 있어요. 위급도 안내 상자도 이 본문 안에서 그려요.

읽는 글자 크기와 줄 간격 규칙은 원본이 아니라 사이트 공통 스타일에서 와요.

이럴 때 — 변형 3

  1. ruled가로선 표가 많고 차분하게 읽혀야 할 때 — 표는 가로선만, 타임라인은 점과 선.쓰는 사이트 4곳: feeding, toddlerfood, vaccination, 허브
  2. boxed칸 선 용량표·월령표처럼 칸을 짚어 가며 읽어야 할 때.쓰는 사이트 4곳: babyfood, babysick, milestone, newborn
  3. open넓은 여백 시기별 내용이 많은 글 — 큰 소제목, 시기 칸 | 내용.쓰는 사이트 3곳: babyplay, babysleep, birthprep
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.