style 개선?

ramen4598 · Mar 27, 2023 · a826580 · a826580
1 parent 3dba6a6
commit a826580
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 6 deletions.
diff --git a/src/lib/color.js b/src/lib/color.js
@@ -14,16 +14,26 @@ var Links = {
     }
   },
 };
+var Lists = {
+  setColor: function (color) {
+    var Lists = document.querySelectorAll("li");
+    for (var i = 0; i < Lists.length; i++) {
+      Lists[i].style.backgroundColor = color;
+    }
+  },
+}
 function nightDayHandler(self) {
   if (self.value === "night") {
     Body.setBackgroundColor("black");
     Body.setColor("white");
     self.value = "day";
     Links.setColor("white");
+    Lists.setColor("black");
   } else {
     Body.setBackgroundColor("white");
     Body.setColor("black");
     self.value = "night";
     Links.setColor("black");
+    Lists.setColor("white");
   }
-}
+}
diff --git a/src/style.css b/src/style.css
@@ -1,4 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+html{
+  height: 100%;
+  width : 100%;
+}
 body {
+  height: 100%;
   margin: 0;
 }
 a {
@@ -19,17 +27,46 @@ h1 {
 }
 #grid ul {
   border-right: 1px solid gray;
-  width: 100px;
+  border-bottom: 1px solid gray;
+  width: 100%;
+  height: 90%;
   margin: 0;
-  margin-left: 10px;
-  padding: 30px;
-  font-size: 30px;
+  padding: 5%;
+  font-size: 25px;
+}
+
+#grid ul :hover {
+  width: 100%;
+  border: 1px solid gray;
+  background-color: #f0f0f0;
+}
+
+#grid ul li{
+  list-style: none;
+  width: 100%;
+  margin-top : 5px;
+  margin-bottom: 5px;
+  padding-left: 2%;
+  padding-right: 2%;
+  border: 1px solid #E0E0E0;
+  background-color: #f9f9f9;
+}
+#grid ul li :hover {
+  border-style: none;
 }
+
+#grid ul li a{
+  display: inline-block;
+  width: 100%;
+}
+
 #grid {
+  height: 100%;
   display: grid;
-  grid-template-columns: 170px 1fr;
+  grid-template-columns: 25% 1fr;
 }
 #article {
+  height: 90%;
   padding-left: 20px;
 }