logweft.

HTML-L2-031 / 내장 상호작용

details 접기 펼치기

초급

문제

details와 summary로 FAQ를 만드세요. 질문 "저장이 되나요?", 답변 문단 "이 브라우저에 저장됩니다."를 작성하고 처음에는 접혀 있어야 합니다.

예시 텍스트·ID·참조 관계를 유지하면서 의미에 맞는 HTML을 작성하세요.

확인할 조건

  • 질문
  • 답변
  • 기본 접힘
힌트

open 속성이 있으면 처음부터 펼쳐집니다.

해설·정답 보기

네이티브 details는 별도 스크립트 없이 접기와 키보드 조작을 제공합니다.

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<main><details><summary>저장이 되나요?</summary><p>이 브라우저에 저장됩니다.</p></details></main>
</body>
</html>
모르는 문법은 코드 사전에서 ↗
index.html화면·구조 확인

코드는 이 브라우저에 자동 저장돼요.

풀이 결과

코드를 작성하고 채점하기를 눌러보세요.

    학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.

    어떤 기록을 찾으세요?

    키워드를 입력하면 기록을 찾아드려요.