CSS와 JavaScript를 활용하면 별도의 라이브러리 없이도 간단한 할 일 목록(To-Do List) 애플리케이션을 만들 수 있습니다. 이 예제에서는 입력 필드에 텍스트를 입력한 후 Enter 키를 누르면 목록에 항목이 추가되고, 추가된 항목을 클릭하면 삭제되도록 구현했습니다.
주요 동작 방식
- addItem(): 입력 필드의 값을 읽어 새로운 <li> 요소를 생성한 뒤 목록(<ul>)에 추가합니다.
- onkeyup 이벤트: Enter 키(keyCode 13)가 눌리면 addItem() 함수를 호출해 항목을 등록합니다.
- deleteItem(): 목록의 항목을 클릭하면 해당 항목을 목록에서 제거합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
max-width: 500px;
margin: 10px auto;
}
.todoInput {
margin-top: 10px;
padding: 10px;
width: 500px;
height: 60px;
font-size: 40px;
border: 2px solid black;
color: purple;
}
li {
text-align: left;
font-size: 22px;
list-style: none;
border: 1px solid rgb(212, 212, 212);
padding: 5px;
margin-bottom: 10px;
}
li:hover {
color: red;
}
</style>
</head>
<body>
<div style="border: 1px solid black;">
<h1 style="text-align: center;color: red;">To-do List Example</h1>
<input class="todoInput" placeholder="Add Something" />
<ul id="list"></ul>
</div>
<script>
function addItem() {
var todoItem = document.querySelector(".todoInput").value;
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("- " + todoItem));
ul.appendChild(li);
todoItem = "";
li.onclick = deleteItem;
}
document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
addItem();
}
};
function deleteItem(ele) {
ele.target.parentElement.removeChild(ele.target);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
입력 필드에 원하는 내용을 작성한 후 Enter 키를 누르면 목록에 항목이 추가됩니다.
마무리
이처럼 HTML 구조, CSS 스타일링, 그리고 JavaScript의 DOM 조작만으로도 실용적인 할 일 목록을 완성할 수 있습니다. 여기에 로컬 스토리지 저장 기능이나 체크박스 완료 표시 기능을 추가하면 더욱 완성도 높은 To-Do 앱으로 발전시킬 수 있습니다.