함께 보는 사이트

Related sites

「함께 보는 육아 사이트」. 사이트마다 검은 둥근 글자 표식이 있고, 색은 쓰지 않아요.

쓰는 규칙사이트는 모노그램(이름 글자 표식)과 이름으로 구분한다 — 사이트마다 다른 색을 쓰지 않는다.

다른 이름: RelatedSites

···

usage (Astro)

---
// src/pages/index.astro
import { RelatedSites } from '../components/registry';
---
<RelatedSites heading="함께 보는 육아 사이트" sites={related} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "RelatedSites": "cards" }
}

props (TypeScript)

export interface RelatedSitesProps {
  heading: string;
  sites: SiteLink[];
  variant?: VariantOf<'RelatedSites'>;
}

cards 는 테두리와 옅은 그림자가 있는 카드 세 장이 나란히 서고, 표식·이름·소개 한 줄과 오른쪽 꺾쇠가 들어가요. list 는 상자 없이 표식, 이름, 소개, 오른쪽에 글 수(16편)를 놓고 줄마다 가는 선을 그어 두 열로 나뉘어요. inline 은 「같은 편집 원칙으로 만든 사이트예요:」 한 문장 안에 밑줄 링크만 있어요.

자매 사이트로 보낼 때 눈에 띄게 하고 싶으면 cards, 글 수까지 보여 주려면 list, 광고처럼 보이기 싫으면 inline 이에요. 표식이 모두 같은 검은색이라 사이트마다 개성은 드러나지 않아요.

이 페이지에서 사이트 카드는 cards 변형에만 써요.

이럴 때 — 변형 3

cards상자 사이트가 3~6곳이고 한 줄 소개를 보여 주고 싶을 때.쓰는 사이트 4곳: babyplay, birthprep, milestone, 허브
list줄 사이트가 많거나 글 수를 나란히 비교하게 하고 싶을 때.쓰는 사이트 4곳: babyfood, babysick, babysleep, feeding
inline문단 홈 아래를 짧게 끝내고 싶을 때 — 한 문단 안의 링크로.쓰는 사이트 3곳: newborn, toddlerfood, vaccination