Problem Solving
[CSS] Requirements Q11: Number Box
Isaac S. Lee
2023. 10. 11. 18:19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main {
width: 770px;
margin: 0px auto;
}
.number {
border: 1px solid black;
border-radius: 5px;
width: 150px;
height: 50px;
font-size: 2.2em;
text-align: center;
float: left;
margin-right: 2px;
}
hr {
border: 0px;
border-top: 1px solid black;
}
.pixel {
float: left;
border: 1px solid black;
width: 74px;
height: 74px;
background-image: url(https://drive.google.com/uc?export=download&id=1BtgKt2qjFEAW9AGXs8YOeOLrqy2U89vI);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
transition: all .4s;
transition-timing-function: linear;
}
#one:hover~.one {
background-position: center 74px;
}
#two:hover~.two {
background-position: center 74px;
}
#three:hover~.three {
background-position: center 74px;
}
#four:hover~.four {
background-position: center 74px;
}
#five:hover~.five {
background-position: center 74px;
}
</style>
</head>
<body>
<div id="main">
<div id="one" class="number">1</div>
<div id="two" class="number">2</div>
<div id="three" class="number">3</div>
<div id="four" class="number">4</div>
<div id="five" class="number">5</div>
<div style="clear:both;"></div>
<hr>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel four five"></div>
<div class="pixel four five"></div>
<div class="pixel"></div>
<div class="pixel one"></div>
<div class="pixel one"></div>
<div class="pixel four"></div>
<div class="pixel two three four"></div>
<div class="pixel two three"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel one two three four five"></div>
<div class="pixel one two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two four four"></div>
<div class="pixel two four four"></div>
<div class="pixel four"></div>
<div class="pixel one four"></div>
<div class="pixel one four"></div>
<div class="pixel four"></div>
<div class="pixel three four five"></div>
<div class="pixel three four five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three five"></div>
<div class="pixel two three five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three five"></div>
<div class="pixel two three five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
</div>
<textarea style="width:770px; height: 500px; margin-top: 300px;margin-right: auto; margin-left: auto; display: block;">
<div id="main">
<div id="one" class="number">1</div>
<div id="two" class="number">2</div>
<div id="three" class="number">3</div>
<div id="four" class="number">4</div>
<div id="five" class="number">5</div>
<div style="clear:both;"></div>
<hr>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel four five"></div>
<div class="pixel four five"></div>
<div class="pixel"></div>
<div class="pixel one"></div>
<div class="pixel one"></div>
<div class="pixel four"></div>
<div class="pixel two three four"></div>
<div class="pixel two three"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel one two three four five"></div>
<div class="pixel one two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two four four"></div>
<div class="pixel two four four"></div>
<div class="pixel four"></div>
<div class="pixel one four"></div>
<div class="pixel one four"></div>
<div class="pixel four"></div>
<div class="pixel three four five"></div>
<div class="pixel three four five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three five"></div>
<div class="pixel two three five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel two three five"></div>
<div class="pixel two three five"></div>
<div class="pixel two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel one two three five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three four five"></div>
<div class="pixel two three five"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div style="clear:both;"></div>
</div>
</textarea>
</body>
</html>