주요 기능
- 메모 추가
텍스트를 입력한 후 "추가" 버튼을 누르면 새로운 메모가 리스트에 추가됩니다.
- 메모 삭제
메모마다 삭제 버튼이 있어 원하는 메모를 클릭하여 제거할 수 있습니다.
- 데이터 저장
모든 메모는 **로컬 스토리지(Local Storage)**에 저장되며, 새로고침 후에도 메모가 유지됩니다.
예상 화면 흐름
1. 입력 창과 버튼
- 화면 상단에 텍스트를 입력하는 인풋 필드와 "추가" 버튼이 있습니다.
2. 메모 리스트
- 입력된 메모는 리스트 형태로 아래에 나타나며, 각각의 메모에는 삭제 버튼이 표시됩니다.
- 삭제 버튼을 클릭하면 해당 메모가 제거됩니다.
UI 디자인 아이디어
- 심플한 디자인
- 테마 선택
- 다크 모드 또는 컬러풀한 테마 옵션을 제공합니다.
- 애니메이션
- 메모 추가 및 삭제 시 페이드 효과 또는 슬라이드 효과를 적용해 사용자 경험을 향상시킵니다.
예상 코드 흐름
1. HTML
- 입력 필드, 버튼, 메모 리스트를 위한 기본 구조.
2. CSS
- 메모 카드와 버튼 스타일링을 포함한 심플하고 직관적인 디자인.
3. JavaScript
- 메모 추가/삭제 기능 구현.
- 로컬 스토리지 연동으로 데이터 유지 기능 제공.