To-Do List 웹사이트 만들기
1. 사용언어
HTML, CSS, JavaScript
HTML : 웹사이트 형식 구성 (뼈대 담당)
CSS : to-do list 디자인 담당 (미모 담당)
JavaScript : 작동 기능 담당 (내용물 담당)
2. 웹사이트 기능요약
1) 주요기능
ㆍ인풋박스에 할 일 입력 후 ‘추가’ 버튼을 누르면 할 일 목록에 내용이 추가된다.
ㆍ중요한 일이나 특징을 주고 싶은 일은 하트버튼을 눌러 강조할 수 있다.
ㆍ수행한 일은 체크 버튼을 눌러 완료처리 할 수 있다.
ㆍ할 일을 잘못 입력했을 경우 X표시를 눌러 삭제할 수 있다.
2) 세부기능
ㆍ추가버튼에 hover를 적용해 마우스를 올리면 색이 기존 darkblue에서 darkcyan로 변화.
ㆍ인풋박스에 할 일 입력 후 엔터키나 추가버튼을 눌러 내용을 추가할 수 있다.
ㆍ인풋박스에 아무것도 입력하지 않고 추가 또는 엔터키를 입력할 경우 리스트에 내용이 추가되지 않는다.
3) 자율학습 추가기능
ㆍ인풋박스에 안내 문구가 적혀있다.
ㆍ안내문구가 눈에 잘 띄게 하기위해 dodgerblue 컬러를 입혔다.
ㆍ인풋박스에 아무것도 입력하지 않고 추가할 경우 경고창이 나온다.
ㆍ체크 버튼을 누르면 해당 할 일이 [가운데 줄+연회색] 처리된다.
3. 코드 및 시연
코드는 Github 나 다른 적절한 방법을 익힌 후에 결과물을 업로드할 예정이다.
<시연 모습>
1) 인풋박스에 "여기에 할 일을 입력해주세요." 안내 문구가 적혀있다.
대상파일: index.html
강의내용: 인풋박스 안내문구 없음.
자율학습: 인풋박스에 안내문구로 "할 일을 입력하세요." 세팅
<추가 코드>
<div class="input-container">
<input type="text" class="input-text" placeholder="할 일을 입력하세요.">
2) 안내문구가 눈에 잘 띄게 하기위해 dodgerblue 컬러를 입혔다.
대상파일: style.css
자율학습: placeholder에 색깔 넣음.
<추가 코드>
.input-text::placeholder{
color:dodgerblue;
}
3) 인풋박스에 아무것도 입력하지 않고 추가할 경우 경고창이 나온다.
대상파일: main.js
강의내용: 공백 입력 시 추가버튼 또는 엔터키 작동 안함.
자율학습: 할 일 입력창에 아무것도 입력 안하고 추가버튼 또는 엔터키 누르면 "할 일을 입력해주세요." 경고창 띄움.
<추가 코드>
if(inputText.value.trim() === "") {
alert('할 일을 입력해주세요.')
return
}
4) 체크 버튼을 누르면 해당 할 일이 [가운데 줄+연회색] 처리된다.
대상파일: style.css
강의내용: 텍스트 가운데줄 생성
자율학습: 텍스트 가운데줄 생성 + lightgray로 컬러변경
<추가 코드>
.done .item{
text-decoration: line-through;
color: lightgray
}
4. 기타
1) 지나간 알파벳도 다시 보자.
오타가 몇 군데 있어서 html에서 list로 명명하고 css List로 명명해서 디자인이 적용 안되는 오류가 있었다.
덕분에 모든 코드를 다시 살펴봐야했다.
2) footer까지 넣으려고 했으나 리스트를 많이 작성해서 스크롤이 생기면 하단에 footer가 고정되지 않는 문제가 발생했다. 스크롤시 하단에 footer가 고정되도록 하는 방법에 대해 더 고민해봐야겠다. 얘 때문에 완료 카테고리로 넘기지를 못함.
▲자꾸 스크롤 중간에 고개 내미는 footer
참고자료
SeSAC 바닐라 Javascript + Vue.js 과정