더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Segoe UI', sans-serif;
height: 100vh;
justify-content: center;
background-color: #f4f4f4;
}
.container {
width: 50%;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.todo-input {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.todo-input input {
flex: 1;
padding: 10px;
font-size: 1rem;
}
.todo-input button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.todo-list {
list-style: none;
padding: 0;
}
.todo-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h2>To Do List</h2>
<div class="todo-input">
<input type="text" id="todo-text" placeholder="할 일을 입력하세요">
<button onclick="addTodo()">추가</button>
</div>
<ul class="todo-list" id="todo-list"></ul>
</div>
<script>
function addTodo() {
const text = document.getElementById('todo-text').value.trim();
if (text === '') return;
const todoList = document.getElementById('todo-list');
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `
<span>${text}</span>
<button onclick="deleteTodo(this)">🗑</button>
`;
todoList.appendChild(li);
document.getElementById('todo-text').value = '';
}
function deleteTodo(button) {
button.parentElement.remove();
}
</script>
</body>
</html>
'Project 기록장 > Planner' 카테고리의 다른 글
| [Planner] 1. 기획하기 (0) | 2025.04.04 |
|---|