안녕하세요, 김코딩입니다!
지난번에 입력값으로 To-Do 리스트를 만들고 삭제 버튼까지 넣어봤죠? 오늘은 이 리스트를 더 멋지게 만들어볼게요. CSS로 스타일을 추가해서 예쁘게 꾸미고, localStorage로 데이터를 저장해서 새로고침해도 할 일이 사라지지 않게 해볼게요. 자바스크립트가 점점 강력해지는 걸 느껴보세요!
1. CSS로 스타일 추가하기
CSS는 웹 페이지의 디자인을 담당해요. 자바스크립트와 연동하면 기능과 외형을 모두 갖춘 멋진 결과물을 만들 수 있죠. 지난 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");
button.addEventListener("click", function() {
let task = input.value;
if (task !== "") {
let item = document.createElement("li");
item.textContent = task + " ";
let deleteButton = document.createElement("button");
deleteButton.textContent = "삭제";
deleteButton.addEventListener("click", function() {
list.removeChild(item);
});
item.appendChild(deleteButton);
list.appendChild(item);
input.value = "";
}
});
</script>
</body>
</html>
변화: 입력창과 버튼이 깔끔해지고, 리스트 항목이 회색 배경에 예쁘게 표시돼요. 삭제 버튼은 빨간색으로 돋보이죠.
설명: <style> 태그 안에 CSS를 썼어요. padding, background-color 등으로 모양을 바꿨습니다.
꿀팁: CSS는 따로 .css 파일로 분리할 수도 있지만, 초보자는 이렇게 HTML 안에 넣는 게 편해요!
해보기: 위 코드를 todo.html로 저장하고 브라우저에서 열어보세요.
2. localStorage로 데이터 저장하기
지금까지는 새로고침하면 리스트가 사라졌죠? localStorage를 사용하면 브라우저에 데이터를 저장해서 유지할 수 있어요. 저장하고 불러오는 기능을 추가해봅시다:
<!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");
item.textContent = 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) {
currentTasks.push(item.textContent.replace(" 삭제", "")); // "삭제" 텍스트 제거
});
tasks = currentTasks;
localStorage.setItem("tasks", JSON.stringify(tasks));
}
</script>
</body>
</html>
동작: 할 일을 추가하면 localStorage에 저장되고, 새로고침해도 남아있어요. 삭제하면 저장된 데이터도 업데이트돼요.
설명: localStorage.setItem으로 저장하고, getItem으로 불러왔어요. JSON.stringify와 JSON.parse는 배열을 문자열로 변환하거나 되돌리는 역할을 합니다.
꿀팁: localStorage는 브라우저에만 저장돼요. 새 브라우저나 시크릿 모드에서는 안 보일 수 있어요!
해보기: 이 코드를 실행하고 할 일을 추가한 뒤 새로고침해보세요. 사라지지 않죠?
3. 마무리: 이제 뭐가 가능할까요?
오늘은 CSS로 To-Do 리스트를 예쁘게 꾸미고, localStorage로 데이터를 저장해봤어요. 이제 여러분의 할 일 리스트는 새로고침해도 유지되고, 보기에도 좋아졌죠! 다음 글에서는 체크박스 추가하기나 카테고리 나누기 같은 기능을 넣어서 더 실용적으로 만들어볼까요? 댓글로 아이디어 남겨주세요!
[…] 지난번에 To-Do 리스트에 스타일과 저장 기능을 넣어봤죠? 오늘은 한 단계 더 나아가서 체크박스를 추가하고, 완료된 항목을 다르게 표시해보겠습니다. 이걸 배우면 진짜 To-Do 앱처럼 느껴질 거예요. 같이 만들어봅시다! […]