detail , summary 이용 FAQ 페이지 구현

 <details> / <summary>

 

HTML 기본 요소 중 하나,

<details>
  <summary>제목</summary>
  내용 내용 내용...
</details>

 

브라우저가 자동으로

• 제목(summary) 부분은 항상 보이게 하고
• 그 아래 내용은 접힌 상태로 숨겨두었다가
• 사용자가 제목을 클릭하면 열렸다 닫혔다 하는 토글 UI를 만들어줌

 

 

어떻게 동작 할까?

 

 

기본 상태 : <details>가 닫힌 상태 → summary만 보이고 답변은 숨김

 

유저가 summary 영역 클릭

→ 브라우저가 자동으로 <details open> 상태로 바꿈 → 안쪽 내용(<div> ...)이 화면에 나타남

 

다시 한 번 클릭 → open 제거 → 또 접힘

 

<!-- 닫힌 상태 -->
<details>
  <summary>질문</summary>
  <p>답변</p>
</details>

<!-- 열린 상태 (브라우저가 이렇게 바꿈) -->
<details open>
  <summary>질문</summary>
  <p>답변</p>
</details>

 

 

 

구현해보기

<details key={idx}>
  <summary>
    <span>Q.</span>
    <span>{item.q}</span>
  </summary>
  <div>
    <span>A.</span>
    <p>{item.a}</p>
  </div>
</details>

 

• <details> :
  • 하나의 Q&A 아이템 전체를 감싸는 컨테이너
  • 열림/닫힘 상태를 내부적으로 갖고 있음 (open 속성)
• <summary> :
  • 사용자가 클릭해서 열고 닫는 헤더 / 질문 부분
  • 여기 클릭하면 details가 열렸다 닫혔다 함
• <div> ... </div> :
  • 실제 답변(A. + 내용)이 들어있는 부분
  • details가 접혀 있으면 안 보이고, 열리면 보임

 

 

 

한 줄 요약

• summary = <details> 안에서 “클릭해서 열고 닫는 제목 영역”
• 내가 구현한 코드에서는 Q. + 질문 텍스트 전체가 그 역할 , 클릭하면 그 아래의 A. + 답변 내용이 토글되는 구조