K KRDS · 01

사이트 머리

Site header

흰 바탕 위 얇은 회색 아래 선, 지금 주제는 진한 글자와 굵은 밑줄로 표시해요. 정부 누리집에서 보던 그 머리예요.

쓰는 규칙메뉴는 스크립트 없이 열리고 닫히고, 지금 보고 있는 주제는 화면 읽기 프로그램에도 「현재 페이지」로 알린다.

다른 이름: SiteHeader
···
usage (Astro)
---
// src/layouts/Base.astro
import { SiteHeader } from '../components/registry';
---
<SiteHeader site={site} nav={nav} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "SiteHeader": "bar" }
}
props (TypeScript)
export interface SiteHeaderProps {
  site: SiteConfig;
  /** 주제(카테고리) + 소개. 허브는 소개만 */
  nav: NavLink[];
  variant?: VariantOf<'SiteHeader'>;
}

세 변형 모두 흰 바탕에 아래 선 하나뿐이고 그림자나 색 띠가 없어요. 파란 둥근 네모 표식 옆에 사이트 이름이 굵게 놓여요. bar 는 이름 한 줄 오른쪽에 주제 메뉴가 늘어서고, stacked 는 이름과 한 줄 소개를 위에, 주제 탭을 선 아래 두 번째 줄에 둬요. compact 는 오른쪽에 테두리 있는 「전체 메뉴」 버튼 하나만 있어요.

주제가 적으면 bar, 탭을 늘 보여 주고 싶으면 stacked, 주제가 많아 설명까지 보여 주고 싶으면 compact 가 맞아요. 장식이 거의 없어서 차분하고 믿음직한 인상이지만, 개성을 내세우는 사이트에는 밋밋하게 보일 수 있어요.

KRDS 의 머리 구성을 따르되, 정부 상징과 「공식 전자정부 누리집」 띠는 정부 사이트로 오해받지 않도록 넣지 않았어요.

이럴 때 — 변형 3

  1. bar한 줄 주제가 3~5개라 이름 옆 한 줄에 다 들어갈 때. 폰에서는 메뉴를 펼쳐서 본다.쓰는 사이트 3곳: babyplay, babysick, feeding
  2. stacked두 줄 주제 탭을 늘 보여 주고 싶을 때 — 폰에서도 접지 않고 옆으로 밀어 본다.쓰는 사이트 4곳: babyfood, toddlerfood, vaccination, 허브
  3. compact전체 메뉴 주제가 많거나 주제마다 한 줄 설명·글 수를 보여 주고 싶을 때.쓰는 사이트 4곳: babysleep, birthprep, milestone, newborn
페이지로 열기 ↗

항목 추가 요청

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