From 0516756aafdcd47dab982415a522830f0efb84c0 Mon Sep 17 00:00:00 2001
From: ByeongJu-Jeon <skhu202114128@gmail.com>
Date: Mon, 30 Sep 2024 01:20:25 +0900
Subject: [PATCH] Edit Project3

---
 .../project3.css"                             | 175 ++++++++++++------
 .../project3.html"                            |  51 ++---
 2 files changed, 141 insertions(+), 85 deletions(-)

diff --git "a/\354\240\204\353\263\221\354\243\274/project3.css" "b/\354\240\204\353\263\221\354\243\274/project3.css"
index ebd31ce..b8dc65e 100644
--- "a/\354\240\204\353\263\221\354\243\274/project3.css"
+++ "b/\354\240\204\353\263\221\354\243\274/project3.css"
@@ -1,4 +1,6 @@
 * {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
 
@@ -7,96 +9,161 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  margin: 0;
 }
 
-table {
-  border-collapse: collapse;
+span {
+  color: blue;
+  font-weight: bold;
+  margin: 7px;
 }
 
-td {
+p {
+  margin-bottom: 3px;
+}
+.main {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 400px;
+  height: 130px;
   border: 1px solid black;
-  width: 80px;
-  height: 80px;
-  text-align: center;
+  padding: 10px;
+  z-index: 0;
 }
 
-.container {
-  border: 1px solid black;
-  box-shadow: 10px 10px 5px gray;
+.table {
+  position: relative;
+  display: table;
+  width: 150px;
+  height: 150px;
   cursor: pointer;
+  z-index: 1;
+  top: 60px;
+  left: 60px;
+  background-color: white;
+  box-shadow: 10px 10px 5px gray;
 }
 
-.part-1:hover {
-  background-color: red;
+.row-1 {
+  display: table-rows;
 }
 
-.part-2:hover {
-  background-color: blue;
+.row-2 {
+  display: table-rows;
 }
 
-.part-3:hover {
-  background-color: green;
+.row-3 {
+  display: table-rows;
 }
 
-.part-4:hover {
-  background-color: yellow;
+.A-1 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  padding-top: 13px;
+  cursor: pointer;
+}
+.A-2 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+.A-3 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
 }
 
-.part-5:hover {
-  background-color: orange;
+.B-1 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  padding-top: 13px;
+  cursor: pointer;
+}
+.B-2 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+.B-3 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
 }
 
-.part-6:hover {
-  background-color: blueviolet;
+.C-1 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  padding-top: 13px;
+}
+.C-2 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+.C-3 {
+  display: table-cell;
+  border: 1px solid black;
+  width: 50px;
+  height: 50px;
+  text-align: center;
 }
 
-.part-7:hover {
-  background-color: aqua;
+table {
+  border-collapse: collapse;
 }
 
-.part-8:hover {
-  background-color: darkblue;
+.A-1:hover {
+  background-color: red;
 }
 
-.part-9:hover {
-  background-color: coral;
+.A-2:hover {
+  background-color: blue;
 }
 
-.box-1 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid gray;
+.A-3:hover {
+  background-color: green;
 }
 
-.box-2 {
-  background-color: white;
-  padding: 20px;
-  border-radius: 8px;
-  width: 800px;
-  height: 250px;
-  position: relative;
+.B-1:hover {
+  background-color: yellow;
 }
 
-.byeongju {
-  padding-top: 50px;
-  margin-bottom: 3px;
-  font-size: 18px;
+.B-2:hover {
+  background-color: orange;
 }
 
-.box-1 {
-  position: absolute;
-  z-index: 1;
+.B-3:hover {
+  background-color: blueviolet;
 }
 
-.container {
-  position: absolute;
-  background-color: white;
-  z-index: 2;
-  bottom: 100px;
+.C-1:hover {
+  background-color: aqua;
 }
 
-strong {
-  color: blue;
+.C-2:hover {
+  background-color: darkblue;
+}
+
+.C-3:hover {
+  background-color: coral;
 }
diff --git "a/\354\240\204\353\263\221\354\243\274/project3.html" "b/\354\240\204\353\263\221\354\243\274/project3.html"
index d697dfb..e20fb1b 100644
--- "a/\354\240\204\353\263\221\354\243\274/project3.html"
+++ "b/\354\240\204\353\263\221\354\243\274/project3.html"
@@ -1,42 +1,31 @@
 <!DOCTYPE html>
-<html lang="ko">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="project3.css" />
     <title>project3</title>
+    <link rel="stylesheet" href="project3.css" />
   </head>
   <body>
-    <div id="box1" class="container">
-      <table class="table-box">
-        <tr>
-          <td class="part-1">1</td>
-          <td class="part-2">2</td>
-          <td class="part-3">3</td>
-        </tr>
-
-        <tr>
-          <td class="part-4">4</td>
-          <td class="part-5">5</td>
-          <td class="part-6">6</td>
-        </tr>
-
-        <tr>
-          <td class="part-7">7</td>
-          <td class="part-8">8</td>
-          <td class="part-9">9</td>
-        </tr>
-      </table>
+    <div class="main">
+      <p><span>학번 : </span>202114128</p>
+      <p><span>이름 : </span>전병주</p>
     </div>
-
-    <div id="box2" class="box-1">
-      <div id="box2" class="box-2">
-        <div class="byeongju">
-          <span><strong>학번:</strong></span> 202114128
-        </div>
-        <div class="byeongju">
-          <span><strong>이름:</strong></span> 전병주
-        </div>
+    <div class="table">
+      <div class="row-1">
+        <div class="A-1">1</div>
+        <div class="A-1">2</div>
+        <div class="A-1">3</div>
+      </div>
+      <div class="row-2">
+        <div class="B-1">4</div>
+        <div class="B-2">5</div>
+        <div class="B-3">6</div>
+      </div>
+      <div class="row-3">
+        <div class="C-1">7</div>
+        <div class="C-2">8</div>
+        <div class="C-3">9</div>
       </div>
     </div>
   </body>