자주 묻는 질문

FAQ

질문 줄이 테두리 상자 안에 쌓이고 오른쪽 꺾쇠로 펼쳐요. 모두 펼친 변형은 상자 없이 굵은 질문 아래에 답이 바로 이어져요.

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

다른 이름: 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은 상자 없이 질문을 굵은 제목처럼, 답을 그 아래 본문 글자로 쓰고 묶음마다 아래 선을 그어요.

질문이 많고 지면을 아끼려면 accordion, 검색에 걸리게 하거나 한 번에 읽히게 하려면 open이에요. accordion은 접힌 모습이 단정하지만 답이 안 보여서 클릭이 필요해요.

이럴 때 — 변형 2

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