안녕하세요, 김코딩입니다!
지난번에 To-Do 리스트에 스타일과 저장 기능을 넣어봤죠? 오늘은 한 단계 더 나아가서 체크박스를 추가하고, 완료된 항목을 다르게 표시해보겠습니다. 이걸 배우면 진짜 To-Do 앱처럼 느껴질 거예요. 같이 만들어봅시다!
1. 체크박스 추가하기(To-Do 리스트)
체크박스는 할 일을 완료했는지 표시하는 데 유용해요. 각 항목에 체크박스를 넣고, 체크 여부를 관리해봅시다:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
#taskInput { padding: 5px; width: 200px; }
#addButton { padding: 5px 10px; background-color: #4CAF50; color: white; border: none; }
#taskList { list-style-type: none; padding: 0; }
#taskList li { margin: 5px 0; padding: 5px; background-color: #f0f0f0; }
#taskList button { margin-left: 10px; background-color: #ff4444; color: white; border: none; }
</style>
</head>
<body>
<input id="taskInput" placeholder="할 일을 입력하세요">
<button id="addButton">추가</button>
<ul id="taskList"></ul>
<script>
let input = document.getElementById("taskInput");
let button = document.getElementById("addButton");
let list = document.getElementById("taskList");
// 저장된 할 일 불러오기
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
tasks.forEach(function(task) {
addTask(task);
});
// 할 일 추가 함수
function addTask(task) {
let item = document.createElement("li");
let checkbox = document.createElement("input");
checkbox.type = "checkbox";
item.appendChild(checkbox);
item.appendChild(document.createTextNode(" " + task + " "));
let deleteButton = document.createElement("button");
deleteButton.textContent = "삭제";
deleteButton.addEventListener("click", function() {
list.removeChild(item);
updateStorage();
});
item.appendChild(deleteButton);
list.appendChild(item);
}
// 버튼 클릭 시 추가
button.addEventListener("click", function() {
let task = input.value;
if (task !== "") {
addTask(task);
tasks.push(task);
updateStorage();
input.value = "";
}
});
// localStorage 업데이트
function updateStorage() {
let currentTasks = [];
list.querySelectorAll("li").forEach(function(item) {
let text = item.childNodes[1].textContent.trim(); // 체크박스 다음 텍스트
currentTasks.push(text);
});
tasks = currentTasks;
localStorage.setItem("tasks", JSON.stringify(tasks));
}
</script>
</body>
</html>
변화: 각 할 일 앞에 체크박스가 생겼어요. 체크할 수 있지만 아직 스타일은 바뀌지 않아요. 설명: <input type="checkbox">로 체크박스를 만들고, appendChild로 항목에 추가했어요. 꿀팁: document.createTextNode로 텍스트를 넣으면 공백도 조절할 수 있어요!
해보기: 이 코드를 todo.html로 저장하고 할 일을 추가해서 체크해보세요.
2. 완료된 항목 표시하기(To-Do 리스트)
체크박스를 체크하면 완료된 항목임을 표시하려면 CSS와 자바스크립트를 같이 써야 해요. 체크 시 텍스트에 취소선을 추가해봅시다:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
#taskInput { padding: 5px; width: 200px; }
#addButton { padding: 5px 10px; background-color: #4CAF50; color: white; border: none; }
#taskList { list-style-type: none; padding: 0; }
#taskList li { margin: 5px 0; padding: 5px; background-color: #f0f0f0; }
#taskList button { margin-left: 10px; background-color: #ff4444; color: white; border: none; }
.completed { text-decoration: line-through; color: #888; } /* 완료 스타일 */
</style>
</head>
<body>
<input id="taskInput" placeholder="할 일을 입력하세요">
<button id="addButton">추가</button>
<ul id="taskList"></ul>
<script>
let input = document.getElementById("taskInput");
let button = document.getElementById("addButton");
let list = document.getElementById("taskList");
// 저장된 할 일 불러오기
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
tasks.forEach(function(task) {
addTask(task);
});
// 할 일 추가 함수
function addTask(task) {
let item = document.createElement("li");
let checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.addEventListener("change", function() {
if (checkbox.checked) {
item.classList.add("completed"); // 체크 시 완료 스타일
} else {
item.classList.remove("completed"); // 해제 시 원래대로
}
});
item.appendChild(checkbox);
item.appendChild(document.createTextNode(" " + task + " "));
let deleteButton = document.createElement("button");
deleteButton.textContent = "삭제";
deleteButton.addEventListener("click", function() {
list.removeChild(item);
updateStorage();
});
item.appendChild(deleteButton);
list.appendChild(item);
}
// 버튼 클릭 시 추가
button.addEventListener("click", function() {
let task = input.value;
if (task !== "") {
addTask(task);
tasks.push(task);
updateStorage();
input.value = "";
}
});
// localStorage 업데이트
function updateStorage() {
let currentTasks = [];
list.querySelectorAll("li").forEach(function(item) {
let text = item.childNodes[1].textContent.trim();
currentTasks.push(text);
});
tasks = currentTasks;
localStorage.setItem("tasks", JSON.stringify(tasks));
}
</script>
</body>
</html>
변화: 체크박스를 체크하면 할 일에 취소선이 생기고 색이 회색으로 변해요. 해제하면 원래대로 돌아옵니다. 설명: classList.add와 remove로 .completed 클래스를 추가/제거하며 스타일을 바꿨어요. CSS에서 text-decoration: line-through로 취소선을 넣었습니다. 꿀팁: change 이벤트는 체크박스 상태가 바뀔 때마다 실행돼요!
해보기: 이 코드를 실행하고 할 일을 체크해보세요. 완료된 느낌이 나죠?
3. 마무리: 이제 진짜 To-Do 앱 같죠?
오늘은 체크박스를 추가하고 완료된 항목을 스타일로 표시해봤어요. 이제 여러분의 To-Do 리스트는 할 일을 추가하고 삭제할 뿐만 아니라 완료 여부까지 관리할 수 있어요! 다음 글에서는 완료된 항목 따로 보기나 할 일 수정 기능을 추가해볼까요? 댓글로 원하는 기능을 알려주세요!
포커스 키워드인 자바스크립트와 To-Do 리스트를 사용한 체크박스 기능 추가를 통해 더 실용적인 앱을 만들 수 있었습니다. 이번 포스팅을 통해 체크박스와 완료된 항목 표시를 배우셨으니, 이를 활용하여 더 복잡한 To-Do 앱을 만들 수 있겠죠? 계속해서 다양한 기능을 추가하는 방법을 배워보세요!
이 글을 기반으로 SEO 최적화를 잘 맞춰 적용했습니다. 필요한 사항이 더 있으면 언제든지 말씀해주세요!