Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yiyoonseo wants to merge 5 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ea90e5a
Feat: 날짜 이동 기능 구현
yiyoonseo Mar 11, 2026
5a59c07
Feat: UI 구현
yiyoonseo Mar 11, 2026
66964ee
Feat: 할 일 관리 기능 구현
yiyoonseo Mar 11, 2026
132ac1b
Feat: 테마 적용
yiyoonseo Mar 11, 2026
d863b58
Deploy: 재배포
yiyoonseo Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
307 changes: 307 additions & 0 deletions todo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

Comment on lines +1 to +12
Copy link
Copy Markdown

@ryu-won ryu-won Mar 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css 변수 활용하셨네요! 시간 부족하셨을텐데 꼼꼼하게 잘 챙기셨습니당👍

/* 다크 테마 - 블루베리 컨셉 */
Copy link
Copy Markdown

@ryu-won ryu-won Mar 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

블루베리 컨셉 귀여워요..ㅎ

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 {
Copy link
Copy Markdown

@ryu-won ryu-won Mar 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요건 id가 아니라 class로 변경하는 게 좋을 것 같아요! todo 아이템이 여러개일 수 있는데 한 페이지에 딱 하나만 존재해야 하는 id 와 맞지 않는 것 같아요!

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;
}
40 changes: 40 additions & 0 deletions todo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Copy Markdown

@ryu-won ryu-won Mar 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기서 p태그 보단 ul태그가 더 적합할 것 같아요! renderTodo 에서는 안에 li태그만 만들고 있어서요!


<button id="theme-btn"></button>
</main>
</div>

<script src="todo.js"></script>
</body>
</html>
Loading