C Carbon · 02

사이트 발

Site footer

머리와 같은 검은 판에 칸을 나눠 이름·사이트 정보·함께 보는 사이트를 놓고, 아래에 고지 줄을 둬요. 가볍게 쓰려면 회색 한 덩어리 compact가 있어요.

쓰는 규칙디자인 출처 표기가 모든 페이지 발에 있어야 한다(KRDS 는 정해진 문장이 빠지면 검사가 막는다). 쿠팡과 관계없다는 고지는 굵게 쓴다.

다른 이름: SiteFooter
···
usage (Astro)
---
// src/layouts/Base.astro
import { SiteFooter } from '../components/registry';
---
<SiteFooter
  site={site}
  links={footerLinks(IS_HUB)}
  related={related}
  notice={FOOTER_TEXT.notice}
  medical={FOOTER_TEXT.medical}
  affiliate={FOOTER_TEXT.affiliate}
  credit={designCredit()}
  year={new Date().getFullYear()}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "SiteFooter": "columns" }
}
props (TypeScript)
export interface SiteFooterProps {
  site: SiteConfig;
  /** 소개·면책·개인정보·RSS */
  links: Link[];
  related: SiteLink[];
  /** 쿠팡 비공식 고지 — 굵게 */
  notice: string;
  medical: string;
  affiliate: string;
  /** 디자인 시스템 출처 표기 — 감싸는 요소에 data-design-credit 필수(seo:audit 가 KRDS 문구를 찾는다) */
  credit: { text: string; href?: string; creditsHref: string };
  year: number;
  variant?: VariantOf<'SiteFooter'>;
}

columns는 머리와 같은 검은 판이에요. 칸은 격자 네 개인데, 이름과 사이트 정보 칸 다음에 「함께 보는 육아 사이트」가 두 칸 너비로 이어져요. 사이트 링크가 세로로 둘씩 나뉘어 들어가서, 링크가 세 개면 오른쪽 끝 칸에는 한 줄만 있어요. 칸 아래에는 가는 선을 긋고 독립 사이트 고지, 의학 면책, 쿠팡 파트너스 안내, 출처 표기, 저작권을 줄마다 적어요. compact는 회색 한 덩어리예요. 링크 한 줄은 「/」로 나누고 사이트도 한 줄로 이어 붙여요. 고지 줄은 columns와 같아요.

링크와 사이트가 많으면 columns가 줄을 나눠 읽기 쉬워요. 링크가 적으면 compact가 훨씬 짧아요. 머리를 검은색으로 쓰는 사이트는 푸터도 검게 맞추면 위아래가 한 세트로 보여요.

출처 표기 줄은 두 변형 모두 모든 페이지에 들어가요. Carbon 토큰·아이콘과 IBM Plex Sans KR 글꼴 출처가 거기에 적혀요.

이럴 때 — 변형 2

  1. columns세 칸 함께 보는 사이트가 여럿이라 따로 한 칸이 필요할 때.쓰는 사이트 4곳: babyfood, babyplay, milestone, toddlerfood
  2. compact한 덩어리 발을 짧게 끝내고 싶을 때, 링크가 몇 개 안 될 때.쓰는 사이트 7곳: babysick, babysleep, birthprep, feeding, newborn, vaccination, 허브
페이지로 열기 ↗

항목 추가 요청

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