Todo list 기능
- 할 일을 기록할 수 있다
- 저장된 일을 목록으로 보여준다
- 할 일을 삭제 할 수 있다
- 완료 상태로 만들 수 있다
CSS 파일 추가하기
- CSS는 HTML에 스타일을 적용하기 위해 사용한다.
- HTML 내부
<style>태그로 작성할 수도 있지만 유지보수가 어렵다. - 외부 CSS 파일을 만들어 HTML에 연결하는 방식이 일반적이다.
- CSS 파일은
<link>태그를 사용해 불러온다.
내부 스타일 방식
<style>
.red {
color: #ff0000;
}
</style>
<h1 class="red">Todo list</h1>- 스타일을 HTML 내부에 직접 작성한다.
- 구조와 디자인이 섞여 관리가 불편하다.
외부 CSS 파일 방식
todo.css
.red {
color: #ff0000;
}HTML 연결
<link rel="stylesheet" href="./todo.css" />
<h1 class="red">Todo list</h1>- CSS를 별도 파일로 분리한다.
- HTML과 스타일을 따로 관리할 수 있다.
- 여러 페이지에서 동일한 CSS를 재사용할 수 있다.
외부 CSS 방식을 사용하는 이유
- HTML과 디자인이 분리되어 구조가 깔끔해진다.
- 여러 페이지에서 재사용 가능하다.
- 유지보수와 수정이 쉽다.
Todo 화면 구성
사용자가 할 일을 입력할 수 있는 입력창(input)이 필요하다.
입력된 할 일을 표시할 목록(ul, li)이 필요하다.
할 일을 추가하는 버튼이 필요하다.
각 할 일 항목에는 체크박스와 삭제 버튼을 포함한다.
기본 HTML 구조
- 웹/앱 강의 듣기
입력창: 새로운 할 일을 적는다.
추가 버튼: 입력된 내용을 목록에 추가한다.
리스트(ul): 할 일 항목을 저장한다.
리스트 항목(li): 체크박스, 텍스트, 삭제 버튼으로 구성된다.
화면 구성 요소 정리
입력창 → 사용자 입력 처리
버튼 → 입력된 내용 추가
리스트 → 할 일 목록 표시
체크박스 → 완료 여부 표시
삭제 버튼 → 특정 항목 제거
todo.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="./todo.css" />
</head>
<body>
<div class="container">
<div class="title">
<h1>Todo list</h1>
</div>
<div class="contents">
<div class="input-div">
<input type="text" id="inputBox" />
<button id="addButton">추가하기</button>
</div>
<ul>
<li>
<input type="checkbox" id="checkBox" />
웹/앱 강의 듣기
<button id="deleteButton">X</button>
</li>
<li>
<input type="checkbox" id="checkBox" />
인터넷 쇼핑 입금하기
<button id="deleteButton">X</button>
</li>
<li>
<input type="checkbox" id="checkBox" />
투두 리스트 완성하기
<button id="deleteButton">X</button>
</li>
</ul>
</div>
</div>
<script src="./todo.js"></script>
</body>
</html>
- 입력창(input) → 새로운 할 일을 입력
- 추가 버튼(button) → jQuery로 입력값을 ul에 추가
- ul/li 구조 → 할 일 목록 표시
- checkbox → 완료 표시용
- delete 버튼 → 항목 삭제용
- todo.js → 전체 동작(추가, 삭제, 완료 변경)을 담당
todo.css
body {
background: #a1d0ff;
}
.container {
width: 300px;
margin: auto;
}
.title,
.contents {
background: white;
box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.15);
}
.title {
text-align: center;
}
.contents {
padding: 10px;
}
.input-div {
display: flex;
}
#inputBox {
flex-grow: 1;
height: 30px;
}
li {
list-style: none;
margin: 20px 0px;
}
#deleteButton {
margin: 0px 5px;
}
'러닝커뮤니티 > 웹프로그래밍' 카테고리의 다른 글
| 5회차 오답노트 (0) | 2025.12.06 |
|---|---|
| jQuery todo 리스트 페이지 동적 화면 적용 (0) | 2025.12.06 |
| JQuery 소개 및 기본함수 (0) | 2025.12.05 |
| 4회차 오답 노트 (0) | 2025.12.04 |
| 자바스크립트 반복문(while문, For문) (0) | 2025.12.04 |