728x90
JS를 사용하여 기본적인 투두 리스트를 만들어 봅시다.
✅ 기본 세팅
우선 위와 같이 폴더 안에 3개의 파일을 만들어 줍시다.
✅ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo List</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Todo List</h1>
<div>
<input id="todo" type="text" />
<button id="addBtn">+</button>
</div>
<div id="todoBox"></div>
<script src="script.js"></script>
</body>
</html>
타이틀과 인풋 박스를 만들어주고
아래에 Todo를 추가할 리스트 박스를 만들어줍니다.
또한, css와 js를 html에 연결해줍니다.
728x90
'실습 > JavaScript' 카테고리의 다른 글
| [JavaScript] 투두 리스트(Todo-List) 만들기 (3) (0) | 2023.12.28 |
|---|---|
| [JavaScript] 투두 리스트(Todo-List) 만들기 (2) (0) | 2023.12.28 |