K KRDS · 16

자주 묻는 질문

FAQ

테두리 상자 안에 질문 줄을 쌓고 꺾쇠로 펼쳐요. 모두 펼친 변형은 질문 앞 파란 「Q」, 답 앞 「A」예요.

쓰는 규칙화면에 보이는 질문·답과 검색엔진에 알려 주는 질문·답이 같은 내용이어야 한다.

다른 이름: Faq아코디언
···
usage (Astro)
---
// src/pages/[post].astro
import { Faq } from '../components/registry';
---
<Faq items={post.data.faq} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Faq": "accordion" }
}
props (TypeScript)
export interface FaqProps {
  items: FaqItem[];
  variant?: VariantOf<'Faq'>;
}

accordion 은 둥근 테두리 상자 안에서 질문이 굵게 한 줄씩 있고 오른쪽 꺾쇠를 눌러 답이 열려요. open 은 답이 모두 펼쳐져 있고 질문 앞에 파란 Q, 답 앞에 진한 회색 A 글자가 붙으며 질문 묶음마다 회색 선으로 나눠요.

질문이 많으면 accordion 이 짧고, 답이 중요하거나 검색에서 한눈에 읽히게 하려면 open 이 맞아요. open 은 정부 누리집 자주 묻는 질문의 말투 그대로예요.

accordion 은 KRDS 아코디언을 따랐어요.

이럴 때 — 변형 2

  1. accordion펼침 줄 질문이 다섯 개를 넘거나 답이 길 때.쓰는 사이트 4곳: babyplay, babysleep, birthprep, toddlerfood
  2. open모두 펼침 질문이 서너 개로 적고 답이 짧을 때 — Q·A 를 다 펼쳐 둔다.쓰는 사이트 7곳: babyfood, babysick, feeding, milestone, newborn, vaccination, 허브
페이지로 열기 ↗

항목 추가 요청

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