To-Do List 웹사이트 만들기
1. 사용언어
HTML, CSS, JavaScript
HTML : 웹사이트 형식 구성 (뼈대 담당)
CSS : to-do list 디자인 담당 (미모 담당)
JavaScript : 작동 기능 담당 (내용물 담당)
2. 웹사이트 기능요약
1) 주요기능
ㆍ인풋박스에 할 일 입력 후 ‘추가’ 버튼을 누르면 할 일 목록에 내용이 추가된다.
ㆍ중요한 일이나 특징을 주고 싶은 일은 하트버튼을 눌러 강조할 수 있다.
ㆍ수행한 일은 체크 버튼을 눌러 완료처리 할 수 있다.
ㆍ할 일을 잘못 입력했을 경우 X표시를 눌러 삭제할 수 있다.
2) 세부기능
ㆍ추가버튼에 hover를 적용해 마우스를 올리면 색이 기존 darkblue에서 darkcyan로 변화.
ㆍ인풋박스에 할 일 입력 후 엔터키나 추가버튼을 눌러 내용을 추가할 수 있다.
ㆍ인풋박스에 아무것도 입력하지 않고 추가 또는 엔터키를 입력할 경우 리스트에 내용이 추가되지 않는다.
3) 자율학습 추가기능
ㆍ인풋박스에 안내 문구가 적혀있다.
ㆍ안내문구가 눈에 잘 띄게 하기위해 dodgerblue 컬러를 입혔다.
ㆍ인풋박스에 아무것도 입력하지 않고 추가할 경우 경고창이 나온다.
ㆍ체크 버튼을 누르면 해당 할 일이 [가운데 줄+연회색] 처리된다.
ㆍ하단에 고정된 footer 추가 및 수평,수직 중앙 정렬
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
}
5) 하단에 고정된 footer 추가 및 수평, 수직 중앙 정렬
대상파일: style.css
강의내용: footer 없음.
자율학습: footer를 추가하고 footer가 스크롤 길이와 관계없이 항상 하단에 고정되도록 함.
자율학습: 추가한 footer contents를 수평, 수직 중앙정렬함.
<추가코드1 : footer를 추가하고 footer가 스크롤 길이와 관계없이 항상 하단에 고정>
footer{
position: relative;
left: 0;
width: 100%;
transform: translateY(-100%);
background-color: #fbfbfb;
color:rgb(94, 92, 92);
}
<추가코드2 : footer contents를 수평, 수직 중앙정렬>
.footerflexbox{
display: flex;
height: 60px;
justify-content: center;
align-items: center;
}
#footercontents{
display: flex;
}
4. 기타
1) 애증의 footer
footer 영역을 추가하는 것은 무척 쉬웠으나 추가된 footer를 하단에 고정하는 작업이 오래걸렸다. 될듯하면서도 원하는 형태로 고정되질 않아서 한참을 고민했다. 하단에 고정하고서는 footer contents를 수직 중앙 정렬하는데 또 시간이 걸렸다. CSS에서 수평정렬은 간단하게 할 수 있지만, 수직 정렬은 참 어려웠다.
2) 강의를 보고 배운 것에 내가 스스로 공부하고 넣고 싶은 기능들도 함께 넣어봤다. 처음으로 만들어낸 결과물이라 뿌듯하다. 앞으로도 이것저것 만들어봐야겠다. 완성한 To-Do List 코드를 업로드할 방법은 아직 고민중이다. 아마도 github로 공유하게 될 듯하다.
▲수고했다 나 자신
참고자료
SeSAC 바닐라 Javascript + Vue.js 과정