[1주차] 최지원 미션 제출합니다.

index.html

@@ -13,27 +13,35 @@
         <h1 class="today"></h1>
       </header>
       <nav class="box-style">
-        <span class="intro ment-style">당신의 할 일을 작성해보세요 ✏️</span>
-        <button class="showInput ment-style">입력창 불러오기</button>
+        <span class="ment-style">당신의 할 일을 작성해보세요 ✏️</span>
+        <button class="show-input ment-style">입력창 불러오기</button>
       </nav>
-
-      <main class="contents box-style">
+      <main class="box-style">
         <section class="todo">
-          <div class="todoTop">
+          <div class="todo-top">
             <h2 class="ment-style">What I have to do</h2>
-            <form class="inputBox box-style">
+            <form class="input-box box-style">
               <input class="input" />
-              <button class="submitBtn">작성하기</button>
+              <button class="submit-btn">작성하기</button>
             </form>
           </div>
           <ul class="todoList"></ul>
         </section>
-
         <section class="did">
           <h2 class="ment-style">What I did</h2>
           <ul class="didList"></ul>
         </section>
       </main>
+      <footer>
+        <span>
+          <span class="today"><b>T</b>otal: </span>
+          <span class="count"></span>
+        </span>
+        <span>
+          <span class="today"> <b>A</b>ccomplishment: </span>
+          <span class="accomplishment"></span>
+        </span>
+      </footer>
     </div>
   </body>
   <script src="script.js"></script>

script.js

@@ -25,8 +25,8 @@ const initTodoList = () => {
 };
 
 /* todo 입력, 토글, 삭제 */
-const form = document.querySelector(".inputBox");
-const showMessage = document.querySelector(".showInput");
+const form = document.querySelector(".input-box");
+const showMessage = document.querySelector(".show-input");
 
 const init = () => {
   form.addEventListener("submit", addTodoItem);

style.css

@@ -5,14 +5,14 @@ body {
 
 .container {
   width: 100%;
-  max-width: 600px;
+  max-width: 37.5rem;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 62.5rem) {
   .container {
     width: 80%;
   }
@@ -28,71 +28,81 @@ header {
   color: #85b6ff;
   font-family: "Pretendard";
   font-weight: 300;
-  font-size: 15px;
+  font-size: 0.938rem;
 }
 
 nav {
   width: 100%;
-  height: 50px;
+  height: 3.125rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
-  margin-bottom: 20px;
+  padding: 0 1.25rem;
+  margin-bottom: 1.25rem;
 }
 
 main {
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 20px;
+  padding: 0.625rem 1.25rem;
 }
 
-button {
-  border: none;
-  background-color: transparent;
-}
-
-.todoTop {
+.todo-top {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
 
-.inputBox {
+.input-box {
   width: 50%;
-  height: 30px;
+  height: 1.875rem;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 0.625rem;
 }
 
 input {
-  width: 30%;
+  width: 70%;
   border: transparent;
   font-family: "Pretendard";
 }
 
-.submitBtn {
+input:focus {
+  outline: none;
+}
+
+@media screen and (max-width: 41.875rem) {
+  input {
+    width: 60%;
+  }
+}
+
+button {
+  border: none;
+  background-color: transparent;
+}
+
+.submit-btn {
   color: #85b6ff;
   font-family: "Pretendard";
   font-weight: 600;
-  font-size: 18px;
+  font-size: 0.938rem;
 }
 
 .ment-style {
   color: #458fff;
   font-family: "Pretendard";
   font-weight: 600;
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 
 .box-style {
-  border-radius: 30px;
-  border: 1px solid #85b6ff;
+  border-radius: 1.875rem;
+  border: 0.063rem solid #85b6ff;
 }
 
 ul li {
@@ -105,24 +115,35 @@ ul {
   padding-left: 0;
 }
 
+footer {
+  width: 12.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-self: flex-start;
+}
+
+/*todo 항목 스타일*/
+
 .todo-item {
   display: flex;
   align-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 0.938rem;
 }
 
 .todo-text,
 .did-text {
   color: #458fff;
   font-family: "Pretendard";
   font-weight: 300;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .todo-check img {
-  width: 20px;
+  width: 1.25rem;
 }
 
 .todo-del img {
-  width: 12px;
+  height: 0.688rem;
+  padding-bottom: 0.125rem;
 }