Merge pull request #5 from Chanwoo-Jeong/week1

Week1
GO-SOPT-WEB · Apr 8, 2023 · f9eb662 · f9eb662
2 parents c2968db + 91c04e0
commit f9eb662
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 91 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/Week1-0401/MyStore.css b/Week1-0401/MyStore.css
@@ -40,17 +40,17 @@ header {
     user-select: none;
 }
 
-header menu {
+header aside {
     display: flex;
     flex-direction: row;
 
 }
 
-header menu a {
+header aside a {
     margin: 0 10px;
 }
 
-header menu a:hover {
+header aside a:hover {
     color: plum;
 }
 
@@ -59,20 +59,20 @@ header menu a:hover {
         padding: 20px;
     }
 
-    header>menu {
+    header>aside {
         display: none;
     }
 
-    header>menu a {
+    header>aside a {
         margin: 1rem;
     }
 
     #hamberger {
         display: block;
     }
 
-    #hamberger:hover+menu,
-    menu:hover {
+    #hamberger:hover+aside,
+    aside:hover {
         display: flex;
         flex-direction: column;
         position: fixed;
@@ -92,7 +92,6 @@ header menu a:hover {
 main {
     display: flex;
     flex-direction: row;
-
     margin: 10px;
     margin-top: 5rem;
     padding: 10px;
@@ -126,9 +125,8 @@ main nav .category:hover {
 /* 메인파트2 : cardSection */
 #cardSection {
     width: 100%;
-    height: 1000px;
+    height: 100%;
     padding: 0 50px;
-
     display: grid;
     grid-gap: 20px;
     grid-template-columns: repeat(6, 250px);

diff --git a/Week1-0401/MyStore.html b/Week1-0401/MyStore.html
@@ -16,33 +16,33 @@
 
 <body>
     <header>
-        <div class="logo">🐣찬우의 포켓몬 잡화점</div>
+        <h1 class="logo">🐣찬우의 포켓몬 잡화점</h1>
         <div id="hamberger">&#9776;</div>
-        <menu>
+        <aside>
             <a href="#">도감</a>
             <a href="#">포켓몬추가</a>
             <a href="#">찜목록</a>
-        </menu>
+        </aside>
     </header>
 
     <main>
         <nav>
-            <div class="category">
-                <input id="All" type="checkbox">
-                <label for="All">전체</label>
-            </div>
-            <div class="category">
-                <input id="Meun1" type="checkbox">
-                <label for="Meun1">진화1</label>
-            </div>
-            <div class="category">
-                <input id="Meun2" type="checkbox">
-                <label for="Meun2">진화2</label>
-            </div>
-            <div class="category">
-                <input id="Meun3" type="checkbox">
-                <label for="Meun3">진화3</label>
-            </div>
+            <p class="category">
+                <input id="all" type="checkbox">
+                <label for="all">전체</label>
+            </p>
+            <p class="category">
+                <input id="Evolution1" type="checkbox">
+                <label for="Evolution1">진화1</label>
+            </p>
+            <p class="category">
+                <input id="Evolution2" type="checkbox">
+                <label for="Evolution2">진화2</label>
+            </p>
+            <p class="category">
+                <input id="Evolution3" type="checkbox">
+                <label for="Evolution3">진화3</label>
+            </p>
         </nav>
         <section id="cardSection">
             <div class="card">

diff --git a/Week1-0401/Todo.css b/Week1-0401/Todo.css
@@ -36,7 +36,7 @@ header {
 }
 
 /* 메인 달력영역 */
-main #calendar {
+#calendar {
     border-radius: 10px;
     padding: 1rem;
     margin: 0.5rem;
@@ -46,38 +46,38 @@ main #calendar {
 }
 
 
-main #calendar #calendar-content #day-Week {
+#calendar #calendar-content #day-Week {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
 }
 
-main #calendar #calendar-content #day-Week .day {
+#calendar #calendar-content #day-Week .day {
     width: 2rem;
     height: 2rem;
     display: grid;
     place-items: center;
     margin: 0 auto;
 }
 
-main #calendar #calendar-content #todo-week {
+#calendar #calendar-content #todo-week {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
 }
 
-main #calendar #calendar-content #todo-week .dayBox {
+#calendar #calendar-content #todo-week .dayBox {
     width: 2rem;
     height: 4rem;
     display: grid;
     place-items: center;
     margin: 0 auto;
 }
 
-main #calendar #calendar-content #todo-week .dayBox .heart {
+#calendar #calendar-content #todo-week .dayBox .heart {
     font-size: 26px;
     position: relative;
 }
 
-main #calendar #calendar-content #todo-week .dayBox .heart .count {
+#calendar #calendar-content #todo-week .dayBox .heart .count {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -89,7 +89,7 @@ main #calendar #calendar-content #todo-week .dayBox .heart .count {
     color: white;
 }
 
-main #todolist {
+#todolist {
     height: 550px;
     margin: 2rem 1.5rem;
     display: flex;
@@ -99,25 +99,25 @@ main #todolist {
     overflow-y: scroll;
 }
 
-main #todolist::-webkit-scrollbar-button {
+#todolist::-webkit-scrollbar-button {
     width: 0;
     height: 0;
 }
 
-main #todolist::-webkit-scrollbar {
+#todolist::-webkit-scrollbar {
     width: 6px;
 }
 
-main #todolist::-webkit-scrollbar-track {
+#todolist::-webkit-scrollbar-track {
     background-color: transparent;
 }
 
-main #todolist::-webkit-scrollbar-thumb {
+#todolist::-webkit-scrollbar-thumb {
     border-radius: 3px;
     background-color: #cdcdf4;
 }
 
-main #todolist .category .category-title {
+#todolist .category .category-title {
     width: fit-content;
     height: fit-content;
     padding: 0.3rem;
@@ -161,43 +161,47 @@ main #todolist .category .category-title .title {
 }
 
 /* 메인 투두리스트 영역 */
-main #todolist .category .todo {
+#todolist .category {
+    min-width: 40%;
+}
+
+#todolist .category .todo {
     padding-top: 0.4rem;
     color: black;
     font-size: medium;
     display: flex;
     flex-direction: row;
 }
 
-main #todolist .category .todo label {
+#todolist .category .todo label {
     font-size: 1.5rem;
 }
 
-main #todolist .category .todo .heart {
+#todolist .category .todo .heart {
     display: none;
 }
 
-main #todolist .category .todo label::before {
+#todolist .category .todo label::before {
     content: '🤍';
     font-size: 1rem;
     margin-right: 0.2rem;
     display: inline-block;
 }
 
-main #todolist .category .todo .heart:hover+label::before {
+#todolist .category .todo .heart:hover+label::before {
     content: '❤️';
     font-size: 1rem;
     margin-right: 0.2rem;
     cursor: pointer;
 }
 
-main #todolist .category .todo .heart:checked+label::before {
+#todolist .category .todo .heart:checked+label::before {
     content: '❤️';
     font-size: 1rem;
     margin-right: 0.2rem;
 }
 
-main #todolist .category .category-title button {
+#todolist .category .category-title button {
     border-radius: 100%;
     border: none;
     color: white;