[1주차] 이윤서 과제 제출합니다.

README.md

@@ -57,4 +57,4 @@
 - [좋은 코드리뷰 방법](https://tech.kakao.com/2022/03/17/2022-newkrew-onboarding-codereview/)
 - [MDN 공식문서-createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
 - [MDN 공식문서-appendChild()](https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild)
-- [DOM 개념,HTML 요소 조작](https://poiemaweb.com/js-dom#3-dom-query--traversing-%EC%9A%94%EC%86%8C%EC%97%90%EC%9D%98-%EC%A0%91%EA%B7%BC)
+- [DOM 개념,HTML 요소 조작](https://poiemaweb.com/js-dom#3-dom-query--traversing-%EC%9A%94%EC%86%8C%EC%97%90%EC%9D%98-%EC%A0%91%EA%B7%BC)

todo.css

@@ -0,0 +1,307 @@
+:root {
+  --bg-color: #fff5f0;
+  --text-color: #5d4037;
+  --container-bg: #ffffff;
+  --accent-color: #ffab91;
+  --button-bg: #ffccbc;
+  --delete-btn-bg: #e65272;
+  --delete-btn-hover-bg: #c4415b;
+  --add-btn-bg: #799567;
+  --add-btn-hover-bg: #5c7348;
+}
+
+/* 다크 테마 - 블루베리 컨셉 */
+body.blueberry-mode {
+  --bg-color: #1a1c2c;
+  --text-color: #e0e0ff;
+  --container-bg: #252a41;
+  --accent-color: #7986cb;
+  --button-bg: #3f51b5;
+  --delete-btn-bg: #a180ad;
+  --delete-btn-hover-bg: #7b5e8c;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  font-family: Pretendard;
+  max-width: 500px;
+  margin: auto;
+  transition: all 0.4s ease;
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin: auto;
+}
+
+#date-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+title {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+#today-date {
+  font-size: 18px;
+}
+#today-day {
+  font-size: 18px;
+}
+#prev-btn,
+#next-btn {
+  background-color: transparent;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  color: var(--text-color);
+}
+#prev-btn:hover,
+#next-btn:hover {
+  color: var(--accent-color);
+}
+
+#add-btn {
+  background-color: var(--add-btn-bg);
+  border: none;
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  color: white;
+  border-radius: 100px;
+  text-align: center;
+}
+#add-btn:hover {
+  background-color: var(--add-btn-hover-bg);
+}
+#todo-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  background-color: transparent;
+  color: var(--text-color);
+}
+#todo-count {
+  font-size: 14px;
+  color: var(--text-color);
+  margin-left: 10px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+}
+#todo-form {
+  display: flex;
+  flex-direction: row;
+  background-color: var(--container-bg);
+  border: none;
+  padding: 10px;
+  border-radius: 100px;
+  gap: 10px;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  padding: 8px 10px 8px 16px;
+  border-radius: 30px; /* 둥근 모양 */
+  gap: 15px;
+}
+.todo-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: auto;
+  margin: 20px;
+  width: 100%;
+}
+.todo-item {
+  display: flex;
+  justify-content: space-between; /* 양 끝 정렬 */
+  align-items: center;
+  padding: 10px 20px;
+}
+.todo-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  margin-right: 10px;
+}
+
+#todo-text {
+  word-break: break-all;
+  white-space: normal;
+  overflow: visible;
+  text-align: left;
+  line-height: 1.4;
+}
+
+/* 완료 시 취소선 효과 */
+.todo-item.completed span {
+  text-decoration: line-through;
+  color: #aaa;
+}
+
+.delete-btn {
+  background-color: var(--delete-btn-bg);
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.delete-btn:hover {
+  background-color: var(--delete-btn-hover-bg);
+}
+
+/* 1. 기본 체크박스 숨기기 */
+.checkbox-container input {
+  display: none;
+}
+
+/* 2. 커스텀 체크박스 외형 */
+.custom-checkbox {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--accent-color);
+  border-radius: 6px; /* 살짝 둥근 사각형 */
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: transparent;
+  margin: 2px;
+}
+
+/* 3. 체크되었을 때 배경색 변경 */
+.checkbox-container input:checked + .custom-checkbox {
+  background-color: var(--accent-color);
+}
+
+/* 4. 체크 표시(V) 그리기 (가상 요소 활용) */
+.custom-checkbox::after {
+  content: "";
+  position: absolute;
+  display: none;
+
+  /* 체크 모양 만들기 */
+  left: 7px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* 5. 체크되었을 때 V 표시 보이기 */
+.checkbox-container input:checked + .custom-checkbox::after {
+  display: block;
+}
+
+#theme-btn {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: var(--button-bg);
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 폰트 */
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2")
+    format("woff2");
+  font-weight: 100;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2")
+    format("woff2");
+  font-weight: 200;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2")
+    format("woff2");
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2")
+    format("woff2");
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2")
+    format("woff2");
+  font-weight: 800;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2")
+    format("woff2");
+  font-weight: 900;
+  font-display: swap;
+}

todo.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="ko">
+  <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="todo.css" />
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1 class="title">To-Do List</h1>
+        <div id="date-container">
+          <button id="prev-btn" class="nav-btn">◀</button>
+          <p id="today-date" class="date">날짜</p>
+          <p id="today-day" class="day">요일</p>
+          <button id="next-btn" class="nav-btn">▶</button>
+        </div>
+      </header>
+      <main class="todo-list">
+        <form id="todo-form" class="input-group">
+          <input
+            type="text"
+            id="todo-input"
+            placeholder="오늘의 할 일은?"
+            required
+          />
+          <span id="todo-count">남은 할 일 0개</span>
+          <button type="submit" id="add-btn">등록</button>
+        </form>
+
+        <p id="todo-list"></p>
+
+        <button id="theme-btn"></button>
+      </main>
+    </div>
+
+    <script src="todo.js"></script>
+  </body>
+</html>