-
[JavaScript] 투두리스트 만들기 - HTML 뼈대 잡기만학도 프로젝트/JavaScript TodoList 2024. 2. 18. 01:55
두 번째 프로젝트가 2020년에 완성됐는데, 2024년에 세 번째 프로젝트를 시작하네요. ㅎㅎㅎ
세 번째는 투두리스트를 만들어보려 합니다.
두 번째 프로젝트와 연계해서 날짜별로 투두리스트를 관리하는 큰 그림을 그려볼까 하는데, 일단은 투두리스트에만 집중해서 프로젝트를 완성시켜 볼게요.
기획
이번에도 손그림으로 간단하게 프로젝트를 그려봤습니다.
- 투두리스트 하면 제 머릿속에 떠오르는 세로로 긴 사각 박스를 그렸고, 손으로는 이렇게 그렸지만 가로 세로 1:1.61804 황금비로 만들어 보겠습니다.
- 상단에는 가운데 정렬로 Todo-list라는 타이틀이 들어가고,
- 그 아래는 input 태그랑 add 버튼으로 아이템을 생성(Create)하는 기능을 갖추고
- 그 아래는 생성된 아이템들을 나열(Read)하고, 각 아이템들 안에는 체크(Update) 기능과 타이틀 수정(Update), 제거(Delete) 기능을 갖추도록 해보려고 해요.
- 그리고 아이템들을 다룰 때(CRUD) LocalStorage를 활용해서 브라우저를 새로고침해도 잘 유지되도록 해보겠습니다.
(혹시 LocalStorage를 처음 들으신다면 [JavaScript] 자바스크립트 localStorage 가볍게 이해하기가 도움이 되길 바라요)
HTML 뼈대 잡기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MHD To Do List</title> </head> <body> <div class="todo-container"> <h1 class="title">To Do List</h1> <form id="todo-form"> <input type="text" id="todo-input" placeholder="어떤 계획이 있나요?" /> <button type="submit" id="submit-btn">Add</button> </form> <ul id="todo-list"> <li class="todo-item"> <input type="checkbox" class="item-checkbox"/> <span class="item-title">HTML 뼈대 잡기</span> <button class="edit-btn">Edit</button> <button class="delete-btn">Delete</button> </li> </ul> </div> </body> </html>기본적인 HTML 구조는 이전 프로젝트들과 크게 다르지 않습니다. (에디터에서 추천해 주는 html:5 템플릿 그대로 사용)
그러고 나서
- 황금비율을 갖출 div.todo-container
- 타이틀을 가질 h1.title
- 생성기능을 담당해 줄 form#todo-form
- 새로운 아이템 입력을 받을 input#todo-input
- 아이템 생성버튼 button#submit-btn
- 생성된 아이템들을 나열해 줄 ul#todo-list
이렇게 큰 구조를 갖추고서 생성될 아이템을 미리 만들었는데,
- 생성된 아이템 자체가 될 li.todo-item
- 체크 상태를 반영해 줄 input.item-checkbox
- 아이템 타이틀을 담는 span.item-title
- 수정을 담당해 줄 button.edit-btn
- 삭제를 담당해 줄 button.delete-btn
이렇게 아이템을 구성했습니다.
그래서 실행한 코드가 위와 같은 모습인데 일단은 따로 스타일링은 한 게 없어서 예쁘진 않지만, 얼추 기획에 맞게 필요한 구조들은 나온 것 같죠?
스타일링은 가장 마지막에 하는 걸로 하고, 다음에는 input 창에 타이틀을 입력하고 add 버튼을 누르면 ul#todo-list에 아이템이 추가되도록 해봅시다.
당연히 질문이나, 의문점이 드는 부분이라거나 제가 실수를 했다거나, 혹은 좀 더 좋은 방향이 있다면 댓글 부탁드립니다.
더 좋은 글을 쓰고 제가 성장하는 데에도 큰 도움이 될 거예요! :)
감사합니다.
'만학도 프로젝트 > JavaScript TodoList' 카테고리의 다른 글
[JavaScript] 투두리스트 만들기 - 생성한 아이템 저장하고 불러오기 (2) (0) 2024.03.24 [JavaScript] 투두리스트 만들기 - 생성한 아이템 저장하고 불러오기 (1) (0) 2024.03.01 [JavaScript] 투두리스트 만들기 - 할 일 생성 기능 (2) 2024.02.24