details와 summary로 접이식 정보 만들기

이번 단계에서 배울 내용

<details>는 사용자가 열고 닫을 수 있는 정보 영역입니다. 그 안의 <summary>는 항상 보이는 제목이자 열기 버튼 역할을 합니다.

JavaScript를 작성하지 않아도 브라우저가 클릭과 키보드 동작을 처리하므로 자주 묻는 질문처럼 필요할 때 펼쳐 보는 내용에 알맞습니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<details>
  <summary>배송은 얼마나 걸리나요?</summary>
  <p>보통 2~3일이 걸립니다.</p>
</details>

해야 할 일

비밀번호 변경 질문과 답변을 하나의 접이식 영역으로 만드세요. 영역에는 answer라는 id를 지정하고, 질문은 summary, 답변은 문단으로 둡니다.

완성 조건

• answer라는 id의 <details>를 한 개 만듭니다.
• <details> 바로 안에 <summary>를 한 개 둡니다.
• <details> 바로 안에 답변 문단 <p>를 한 개 둡니다.
• summary의 글은 비밀번호를 어떻게 바꾸나요?입니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

1. 에디터에서 index.html을 엽니다.
2. TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
3. 미리보기에서 결과를 확인한 뒤 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

도움말: <details> 안에는 <summary>를 먼저, 답변 <p>를 그다음에 작성하세요.