전체적인 프레임을 만들었으니 그것을 HTML로 구현했습니다.
사용한 프로그램은 Visual Studio Code로 Extensions으로 Live Preivew입니다.
가장 첫번째 작업으로 전체적인 HTML 구조를 만들어줍니다.
<!DOCTYPE html>
<html lang="en"> // ko 사용할 수도 있지만 en으로 했습니다.
<head>
</head>
<body>
</body>
</html>
그리고나서 head 부분을 채워줄 건데 ToDo List가 이 프로젝트의 목표이니 Title을 To Do List로 만들고
html, css, js의 파일명은 ToDoList.html, ToDoList.css, ToDoList.js로 했습니다.
html 문서에 css, js 파일을 연결시켜줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="ToDoList.css">
</head>
<body>
<script src="ToDoList.js"></script>
</body>
</html>
이제부터 본격적으로 <body>에 구조 만들기 시작!
상단 헤드 부분 만들기
<h1> 태그는 HTML 문서에서 가장 중요한 헤딩(heading)을 정의하는 요소입니다. HTML에서 헤딩 태그는 <h1>부터 <h6>까지 존재하며, 숫자가 클수록 중요도가 낮은 헤딩을 의미합니다.
- <h1>부터 <h6>까지의 크기 표
| <h1> | 32pt |
| <h2> | 24pt |
| <h3> | 19.2pt |
| <h4> | 16pt |
| <h5> | 13.28pt |
| <h6> | 10.72pt |
- <h1>은 너무 크니까 <h2>로 해서 만들기
<h2 id="title">To Do List</h2>
id = "title"은 추후 js로 쉽게 이벤트 처리하기 위해서 임의로 붙였습니다.
그 다음은 계획이나 할 일을 적어넣는 칸이 필요합니다.
입력칸 만들기
<input type="text" id="plan" placeholder="Enter your task">
글자 데이터를 넣는 거니 input type ="text"에 id는 plan을 적어주고 처음보는 사용자가 쉽게 이해할 수 있도록 placeholder에 "Enter you task"라고 적었습니다.
버튼 만들기
내용을 적었으면 그것을 표에 입력해줄 버튼도 필요합니다.
<input type="button" id="submit" value="Add Task">
표 제목 만들기
<table id="emptyTable">
<thead>
<tr>
<th>No</th>
<th>Content</th>
<th>Done</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Tasks will be dynamically added here -->
</tbody>
</table>
만들고 나면 글자 길이만큼 No, Content, Done, Delete만 있는 표 상단이 나올 것입니다. 나머지 테이블 바디는 js로 DOM 이벤트로 받아서 새로 생성하려고 합니다.
리셋 버튼 만들기
<input type="button" id="reset" value="Reset">
전반적인 HTML 요소를 구현했습니다.
이걸 보기도 좋게 하고 나중에 잘 찾아서 js로 연결하기 위해서 차곡차곡 정리합시다.
그리하여 전체적인 코드는
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="ToDoList.css">
</head>
<body>
<h2 id="title">To Do List</h2>
<div id="inputSection">
<label for="plan">
<input type="text" id="plan" placeholder="Enter your task">
</label>
<input type="button" id="submit" value="Add Task">
<input type="button" id="reset" value="Reset">
</div>
<table id="emptyTable">
<thead>
<tr>
<th>No</th>
<th>Content</th>
<th>Done</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Tasks will be dynamically added here -->
</tbody>
</table>
<script src="ToDoList.js"></script>
</body>
</html>
'Side Project' 카테고리의 다른 글
| HTML, CSS, JavaScript로 Calendar 만들기 - 기획 (0) | 2024.07.11 |
|---|---|
| HTML, CSS, JavaScript로 To Do List 만들기 - CSS로 꾸미기 (0) | 2024.07.08 |
| HTML, CSS, JavaScript로 To Do List 만들기 - JavaScript로 기능 구현하기 (0) | 2024.07.07 |
| HTML, CSS, Javascript로 To Do List 만들기 - CSS로 간단히 정렬하기 (0) | 2024.07.07 |
| HTML, CSS, JavaScript로 To Do List 만들기 - 기획 (0) | 2024.07.05 |
