HTML, CSS, JavaScript로 To Do List 만들기 - 기획

To Do List의 형태를 만들어보기로 했습니다.

 

기본적인 구상을 하고 간단한 프레임으로 구상을 구체화 시킵니다.

 

 

그림판으로 간단하게 프레임으로 작성한 뒤 필요한 기능적 부분과 디자인 부분을 분석합니다.

 

디자인 부분

To Do List를 표현할 제목

할 일을 입력할 칸

내용을 추가시키는 버튼 (파란색)

투두리스트의 속성 표시 (목록의 헤드)

No, Content, Done의 내용이 들어갈 공간 디자인 (전체적인 목록 디자인)

단추의 디자인 ( 성공, 삭제 )

 

기능적 부분

내용이 추가 되면 자동적으로 목록에 업데이트 되도록 만들기

삭제 버튼을 누르면 해당 부분 지우기

성공 버튼을 누르면 글씨 색깔( 회색 ), 초록색 버튼 눌러져 있기

 

지금 보니 추가할 기능이 또 있습니다. 전체 내용을 리셋하는 기능도 있으면 좋겠으니 디자인 부분에 리셋 버튼의 존재 추가와 그 버튼의 기능도 구현해야 할 기능적 부분으로 추가하겠습니다.