← 갤러리로 돌아가기

✅ 투두리스트

할 일을 추가하고 체크하면 진행률이 실시간으로 계산됩니다 — 어떤 주제의 수업에도 쓸 수 있는 가장 기본적인 예시
💡 직접 추가해보세요. 입력하고 엔터를 누르거나 버튼을 누르면 목록에 추가됩니다. 체크박스로 완료 표시, ✕로 삭제할 수 있어요.
0 / 0

🧾 이 투두리스트, 이런 프롬프트로 만들었어요

아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.

"투두리스트"를 단일 HTML 파일로 만들어줘.

- 텍스트 입력창 + 추가 버튼(엔터로도 추가 가능)
- 추가한 항목은 목록에 체크박스와 함께 표시
- 체크하면 취소선이 그어지고 "완료" 상태가 됨
- 각 항목 오른쪽에 삭제(✕) 버튼
- 상단에 "완료 / 전체" 진행률을 막대바로 표시하고, 실시간으로 갱신되게 해줘
- 목록이 비어있을 때는 "할 일이 없습니다" 같은 안내 문구를 보여줘
- 데이터는 새로고침하면 초기화돼도 괜찮음(로컬 저장 없이 메모리에서만 관리)
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어 UI로 출력해줘
이 페이지는 AI(Claude)가 만든 예시 도구입니다 — 강의 데모용