자바스크립트를 사용하여 CSS Grid를 활용한 ToDo 앱 만들기
#Javascript #CSSGrid #ToDo앱
CSS Grid는 웹 개발에서 레이아웃을 구성하는 강력한 기술입니다. 이번에는 자바스크립트를 사용하여 CSS Grid를 활용한 ToDo 앱을 만들어 보겠습니다. 이 앱은 사용자가 할 일 목록을 관리할 수 있는 간단한 인터페이스를 제공합니다.
기능 목록
- 사용자는 할 일을 입력할 수 있는 입력 필드를 사용할 수 있어야 합니다.
- 사용자는 ‘추가’ 버튼을 클릭하여 할 일을 목록에 추가할 수 있어야 합니다.
- 사용자는 할 일 목록에서 개별 항목을 선택하여 완료했음을 표시할 수 있어야 합니다.
- 사용자는 선택한 항목을 삭제할 수 있어야 합니다.
HTML 구조
다음과 같이 HTML 구조를 설계합니다.
<div class="todo-app">
<h1>ToDo 앱</h1>
<input type="text" id="task-input" placeholder="할 일을 입력하세요">
<button id="add-button">추가</button>
<ul id="task-list"></ul>
</div>
CSS 스타일링
CSS Grid를 사용하여 앱의 레이아웃을 설계합니다.
.todo-app {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
gap: 10px;
}
#task-list {
list-style-type: none;
grid-row: 4 / span 1;
overflow-y: auto;
}
자바스크립트 로직
자바스크립트를 사용하여 앱의 기능을 구현합니다.
const taskInput = document.getElementById('task-input');
const addButton = document.getElementById('add-button');
const taskList = document.getElementById('task-list');
addButton.addEventListener('click', function() {
const task = taskInput.value;
if (task !== '') {
const li = document.createElement('li');
li.textContent = task;
taskList.appendChild(li);
taskInput.value = '';
}
});
taskList.addEventListener('click', function(event) {
const target = event.target;
if (target.tagName === 'LI') {
target.classList.toggle('completed');
}
});
taskList.addEventListener('contextmenu', function(event) {
event.preventDefault();
const target = event.target;
if (target.tagName === 'LI') {
target.remove();
}
});
위의 코드는 기본적인 ToDo 앱의 동작을 구현한 것입니다. 우리는 자바스크립트를 사용하여 할 일을 추가하고, 완료한 항목을 표시하며, 삭제할 수 있는 기능을 제공하였습니다.
CSS Grid를 사용하여 앱의 레이아웃을 지정하고, 자바스크립트로 요소들을 조작하는 간단한 로직을 작성함으로써 ToDo 앱을 만들었습니다. 이 기본적인 앱의 구조를 바탕으로 여러가지 기능을 추가하여 더욱 발전시킬 수도 있습니다.
자세한 내용은 GitHub에서 전체 소스 코드를 확인할 수 있습니다: https://github.com/example/todo-app