Skip to content

Commit

Permalink
Edit Project3
Browse files Browse the repository at this point in the history
  • Loading branch information
@ByeongJu-Jeon
ByeongJu-Jeon committed Sep 30, 2024
1 parent 85e72f4 commit 0516756
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 85 deletions.
175 changes: 121 additions & 54 deletions 전병주/project3.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Expand All @@ -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;
}
51 changes: 20 additions & 31 deletions 전병주/project3.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

0 comments on commit 0516756

Please sign in to comment.