Skip to content
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

Jump to bottom

[1주차] 박지수 미션 제출합니다. #11

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

[1주차] 박지수 미션 제출합니다. #11

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e43e3ee
feat: html 구현
jsomnium Sep 7, 2024
3a98b25
style: css 설정
jsomnium Sep 7, 2024
bc1bf1d
feat: 할 일 추가 기능, 오늘 날짜 띄우기
jsomnium Sep 7, 2024
e66a020
feat: 엔터키로 할 일 추가
jsomnium Sep 7, 2024
6c0f6a4
docs: 문서 수정
jsomnium Sep 7, 2024
e84a2e8
docs: 문서 수정(2)
jsomnium Sep 7, 2024
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
80 changes: 80 additions & 0 deletions jsomnium/todo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #121212;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

header {
position: absolute;
top: 0;
left: 0;
padding: 20px;
}

main {
width: 300px;
}

.todo-container {
Copy link
Collaborator

Choose a reason for hiding this comment

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

image 투두 리스트가 컨테이너를 초과하는 것에 대한 오버 플로우 처리가 되어있지 않은 것 같아요! overflow 속성을 사용해서 할일이 컨테이너 밖을 삐져나오지 않도록 처리하면 좋을 것 같아요!

background-color: #1f1f1f;
padding: 20px;
border-radius: 10px;
}

.todo-header {
margin-bottom: 20px;
}

.todo-header h2 {
margin-bottom: 5px;
}

#todoList {
list-style: none;
padding: 0;
margin-bottom: 20px;
}

#todoList li {
background-color: #2c2c2c;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}

.todo-input {
display: flex;
justify-content: space-between;
}

input {
flex-grow: 1;
padding: 10px;
border-radius: 5px;
border: none;
margin-right: 10px;
}

button {
padding: 10px 20px;
background-color: #4caf50;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}
3 changes: 2 additions & 1 deletion jsomnium/todo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="todo.css">
</head>

<body>
Expand All @@ -17,6 +17,7 @@ <h1>✔ To Do</h1>
<section class="todo-container">
<div class="todo-header">
<h2>오늘 할 일</h2>
<div>9월 7일 토요일 (날짜)</div>
<p id="currentDate"></p>
</div>

Expand Down