collection50 / todo-list Goto Github PK

1. 무엇을?

• section 태그를 div 태그로 변경합니다.

2. 상세 설명

• section 태그에는 h2~h6 태그를 활용한 텍스트가 입력되어야 합니다.
• 하지만 내용 작성이 필요 없으므로, 웹 접근성 향상을 위해 section 태그를 div 태그로 변경합니다.

3. 추가 사항

• 더하여 head, body 태그 바깥에 있던 script 태그를 body 태그 안으로 위치하게 합니다.

1. 무엇을?

• 추가된 todo에 마우스를 올리면 delete button이 보여집니다.

2. 상세 설명

• todo에 hover 시, delete 버튼이 보여지도록 합니다.
• 마우스가 올려져있지 않을 경우, delete 버튼은 숨겨져 보이지 않습니다.

3. 추가 사항

• 요소를 hover 시, 다른 요소에 효과를 부여할 수 있는 방법을 배웠습니다.
• CSS의 자손, 후손을 선택하는 방식과 동일합니다.
• 위는 visibility 속성을 활용하여 해결하였습니다.

결과

1. 무엇을?

• ul, li 태그를 div 태그로 변경합니다.

2. 상세 설명

• li 태그 내의 div, button 태그가 존재하고 있기에, ul, li 태그를 삭제한 후 div 태그를 통해 리스트를 구현합니다.

3. 추가 사항

1. 문제 정의

• 할 일의 길이가 2줄 이상이 될 때 삭제 버튼의 위치가 글자의 중앙이 아닌 위쪽으로 쏠려 나타나는 현상이 발생했습니다.

2. 원인 파악

• margin, padding, display 등 view와 관련된 css 문제일 것이라고 예상됩니다.

3. 해결

• view 관련 css를 수정하여 해결할 것입니다.

4. 결과 확인

• margin: 0; 을 활용하여 해결하였습니다.
• div 태그의 가운데 정렬을 활용할 땐, margin: 0;이 굉장히 유용하다는 것을 배웠습니다.
  

1. 문제 정의

• todo 목록이 여러 개가 되어 리스트 영역을 벗어날 시 스크롤이 생성됩니다.
• 하지만 스크롤이 생성될 때 스크롤 바가 차지하는 영역으로 인해 todo가 밀리는 현상이 발생합니다.

2. 원인 파악

• css padding 값과 관계된 것으로 보입니다.
• 해당 div에는 padding 값이 할당되지 않아서 발생한 현상처럼 보입니다.

3. 해결

• padding, width 값을 조정하여서 해결해야 합니다.

4. 결과 확인

1. 무엇을?

• 한 파일에 통합되어있던 JS, CSS 파일을 기능별로 분류하여 모듈화합니다.

2. 상세 설명

• 각 기능과 목적에 맞게 JS, CSS 파일을 모듈화하여 유지 및 보수성을 증가합니다.
• 코드의 가독성을 증가합니다.
• 오류를 최소화합니다.

3. 추가 사항

1. 무엇을?

• 추가된 todo 클릭 시 체크된 상태로 만들어야 합니다.

2. 상세 설명

• 완료되지 않은 todo 클릭 => 완료 처리
• 완료된 todo 클릭 => 미완료 처리
• 완료되었을 경우 취소선 처리

3. 추가 사항

1. 무엇을?

• todo를 삭제할 버튼을 생성합니다.

2. 상세 설명

• 각 todo를 삭제할 수 있도록 하는 버튼 생성합니다.
• 버튼 클릭 시 해당 todo가 삭제됩니다.

3. 추가 사항

• 버튼의 색상 및 모양 변경

1. 무엇을?

• 날짜를 나타내는 텍스트를 추가합니다.

2. 상세 설명

• header 태그 내에 날짜를 나타내는 텍스트를 추가합니다.
• 연월일은 크게, 요일은 작게 나타냅니다.

3. 추가 사항

1. 문제 정의

• TODO 추가 안 됨
• TODO 입력 시 html 화면에 나타나지 않는 상황 발생

2. 원인 파악

• todoArray에 새로운 데이터 추가만 했을 뿐, DOM에 전달되지 않은 듯함

3. 해결

• 새로 추가된 todoArray를 렌더링 할 수 있도록 해야 함

4. 결과 확인

• 추가할 때마다 제대로 동작 확인
  

1. 무엇을?

• 남은 할 일을 확인할 수 있도록 합니다.

2. 상세 설명

• todo 추가, 완료, 삭제 시 남은 할 일의 개수를 상단에서 확인할 수 있도록 합니다.

3. 추가 사항

• css까지 함께 추가하였습니다.