C Carbon · 16

자주 묻는 질문

FAQ

질문 줄마다 위에 가는 선이 있고 오른쪽에 꺾쇠가 있어요. 펼친 답은 오른쪽 여백을 남겨 둬요. 전부 펼친 Q·A 두 칸 모양도 있어요.

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

다른 이름: FaqAccordion
···
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은 질문이 가는 글씨로 한 줄씩 있고 오른쪽에 꺾쇠가 있어요. 마우스를 올리면 바탕이 바뀌고, 펼친 답은 오른쪽 25%를 비워 둬요. 누르면 바로 열리고 닫히는 접는 상자예요. open은 모두 펼쳐서 넓은 화면에서 질문은 왼쪽 굵은 글씨, 답은 오른쪽에 두고 줄마다 위 선을 둬요.

질문이 적고 답이 길면 accordion이 화면을 아끼고, 질문이 네다섯 개로 짧고 모두 읽히길 원하면 open이 좋아요. 검색 결과에 답이 바로 보이게 하려면 open이에요. 데모처럼 질문이 네 개일 때 open은 accordion보다 두 배 남짓 길어요.

이럴 때 — 변형 2

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

항목 추가 요청

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