[1주차] 김현민 미션 제출합니다.

css/board.css

@@ -0,0 +1,72 @@
+.boards {
+  width: 100%;
+  padding: 5rem 0;
+}
+
+.board {
+  width: 100%;
+  font-size: 6rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 8rem;
+  font-family: "GangwonState";
+}
+
+.boardName {
+  margin-bottom: 4rem;
+}
+
+.boardInput {
+  width: 60rem;
+  height: 5rem;
+  padding: 1rem;
+  margin-right: 2rem;
+  font-size: 3.5rem;
+  border: none;
+  border-bottom: 1px solid transparent;
+  border-image: linear-gradient(to left, white, black);
+  border-image-slice: 1;
+  background-color: transparent;
+}
+
+.todoWrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 3rem;
+}
+
+.addTodoList {
+  width: 8rem;
+  height: 7rem;
+  padding: 1rem;
+  font-size: 8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+}
+
+.addListWrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5rem;
+}
+
+.deleteBtn {
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 1rem;
+  border: none;
+  font-size: 4rem;
+  color: gray;
+}
+
+.todoCheckbox {
+  margin-right: 1.2rem;
+  width: 3rem;
+  height: 3rem;
+}

css/header.css

@@ -0,0 +1,217 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+section {
+  display: block;
+}
+body {
+  position: relative;
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html {
+  font-size: 10px; /* Default font size */
+
+  /* Media query for tablet */
+  @media (min-width: 768px) and (max-width: 1023px) {
+    font-size: 8px;
+  }
+
+  /* Media query for mobile */
+  @media (min-width: 450px) and (max-width: 768px) {
+    font-size: 6px;
+  }
+  @media (max-width: 450px) {
+    font-size: 4px;
+  }
+}
+
+@font-face {
+  font-family: "GangwonState";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/GangwonState.woff2")
+    format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Giants-Inline";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Inline.woff2")
+    format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.container {
+  padding-top: 6rem;
+  min-width: 370px;
+  min-height: 100vh;
+  background: linear-gradient(to right, #dddddd, #ffffff, #dddddd);
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  padding: 5rem;
+}
+
+header > div {
+  font-size: 10rem;
+  font-weight: 500;
+  font-weight: 600;
+  margin-bottom: 4rem;
+  font-family: "Giants-Inline";
+}
+
+header > button {
+  font-size: 5rem;
+  position: absolute;
+  background: transparent;
+  border-radius: 1rem;
+  right: 0;
+}
+
+.headerBtn {
+  width: 17rem;
+  height: 6rem;
+  padding: 2rem;
+  display: flex;
+  align-items: center;
+  border-radius: 1rem;
+}
+
+.headerBtnWrapper {
+  font-size: 4rem;
+  display: flex;
+  align-items: center;
+  margin: 2rem 0;
+}
+
+#totalTodo {
+  background-color: wheat;
+}
+
+#nowTodo {
+  background-color: skyblue;
+  margin: 0 3rem;
+}
+
+#doneTodo {
+  background-color: pink;
+}

index.html

@@ -3,12 +3,37 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vanilla Todo</title>
-    <link rel="stylesheet" href="style.css" />
+    <title>Todo List</title>
+    <link rel="stylesheet" href="./css/header.css" />
+    <link rel="stylesheet" href="./css/board.css" />
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <header>
+        <div class="todoTitle">TO-DO LIST</div>
+        <div class="headerBtnWrapper">
+          <div class="headerBtn" id="totalTodo"></div>
+          <div class="headerBtn" id="nowTodo"></div>
+          <div class="headerBtn" id="doneTodo"></div>
+        </div>
+      </header>
+      <div class="todoBoardList"></div>
+      <div class="boards">
+        <div class="board" id="toDoBoard">
+          <div class="addListWrapper">
+            <input
+              class="boardInput"
+              id="todoBoardInput"
+              placeholder="입력하세요"
+            />
+            <button class="addTodoList" id="todoAdd">+</button>
+          </div>
+          <div id="todoList"></div>
+        </div>
+      </div>
+    </div>
   </body>
-  <script src="script.js"></script>
-</html>
+  <script src="./script/header.js"></script>
+  <script src="./script/todo.js"></script>
+</html>