자주 묻는 질문 접고 펼치기

질문 3개의 답변이 처음에는 접혀 있고, 클릭·키보드로 열고 닫히는 FAQ를 화면에서 확인했습니다.

1. Codex에서 새 작업을 열고 아래 제작 프롬프트를 그대로 붙여 넣습니다. 2. 완성된 demo.html을 브라우저에서 엽니다. 3. 첫 질문을 두 번 눌러 답과 열림 표시가 나타났다 사라지는지 봅니다. Tab으로 둘째 질문에 이동해 Enter와 Space를 눌러봅니다.

가게 안내용 연습 페이지에 질문과 답 세 쌍을 넣어줘. 처음에는 답을 접어 두고 질문을 누르면 해당 답이 열리며 다시 누르면 닫히게 해줘. 마우스뿐 아니라 키보드로도 사용할 수 있게 하고, 열린 질문을 사용자가 알아볼 수 있도록 표시해줘. 나는 코딩을 처음 해. 어려운 말은 짧게 풀어 설명하고, 먼저 현재 상황을 확인한 뒤 요청한 범위만 진행해줘. 확인할 수 없는 내용은 추측하지 말고 알려줘. 내 실제 데이터나 비밀값을 사용하지 말고, 새 유료 서비스나 외부 API를 추가하지 마. 작업을 마치면 내가 직접 확인할 순서와 실행하지 못한 부분을 나누어 알려줘.

질문 세 개의 답변이 처음에는 모두 접혀 있었다. 첫 질문을 클릭하면 그 답변과 열림 표시만 나타났고 다시 누르면 닫혔다. Tab으로 둘째 질문으로 이동해 Enter로 열고 Space로 닫은 뒤 Enter로 다시 열었다. 같은 동작을 390×844에서도 다시 확인했고, 가로 넘침 없이 모든 조작 요소가 화면에 들어왔다.

키보드로 질문을 열 수 없는지 확인하고, 클릭과 키보드 조작을 각각 시험한 결과를 알려줘.

요청 조건을 읽고 제작·검사한 예제입니다. 문장만 넣은 독립적인 1회 생성 실험은 아닙니다. VibeAZ 자체 제작 · 확인한 예제 파일과 환경에서의 결과입니다. Chrome 한 버전과 1280×900·390×844 화면에서 확인했습니다. 별도 기기, 다른 브라우저나 코딩 도구에서의 동작은 확인하지 않았습니다.