Update_1

index.css

@@ -0,0 +1,113 @@
+/* *{
+    margin: 0;
+    padding: 0;
+} */
+
+.container{
+    width:auto;
+    font-family: "나눔스퀘어";
+}
+
+ol, ul{
+    list-style-type:none;
+}
+
+a{
+    text-decoration: none;
+    color:black;
+}
+
+#nav{
+    background-color: skyblue;
+    color:wheat;
+    text-align: center;
+    padding: auto;
+    font-family: "나눔스퀘어";
+}
+
+nav ul{
+    list-style: none;
+    padding: 0;
+}
+nav ul li{
+    display: inline;
+    margin-right: 20px;
+}
+
+#intro{
+    width:100%;
+    height:80px;
+}
+
+#intro h1{
+    float: left;
+    width: 50%;
+    height: 80px;
+    background-color: white;
+}
+
+#intro h1 a{
+    display: block;
+    padding: 22px 0 0 30px;
+    font-size:30px;
+}
+
+.box{
+    border: 2px solid lightgrey;
+    width:200px;
+    height: 200px;
+    float: left;
+    border-radius: 20px;
+}
+#b1{
+    background-color: lavender;
+    overflow: visible;
+    
+}
+#b2{
+    background-color: lavender;
+    overflow: visible;
+    border: 2px solid lightgrey;
+    width:200px;
+    height: 200px;
+    float: left;
+    border-radius: 20px;
+}
+#b3{
+    background-color: lavender;
+    overflow: visible;
+    border: 2px solid lightgrey;
+    width:200px;
+    height: 200px;
+    float: left;
+    border-radius: 20px;
+}
+#b4{
+    background-color: lavender;
+    overflow: visible;
+    border: 2px solid lightgrey;
+    width:200px;
+    height: 200px;
+    float: left;
+    border-radius: 20px;
+}
+#b5{
+    background-color: lavender;
+    overflow: visible;
+    border: 2px solid lightgrey;
+    width:200px;
+    height: 200px;
+    float: left;
+    border-radius: 20px;
+}
+#b6{
+    background-color: lavender;
+    overflow: visible;
+    border: 2px solid lightgrey;
+    width:200px;
+    height: 200px;
+    float: left;
+    border-radius: 20px;
+}
+
+