Front/HTML
HTML Step 18
NOOWGNAJ
2022. 7. 11. 21:23
반응형
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 3일차 4 HTML4.0 + CSS2.0 응용 오브젝트 모양만들기 </title>
<style>
body{
margin: 10px;
padding : 0;
}
.b1{
width : 320px;
height : 240px;
background-color: blue;
position: relative;
}
.b2{
width : 160px;
height : 240px;
background-color: red;
position: absolute;
left :50%;
}
.b3{
width : 160px;
height : 120px;
background-color: green;
position: absolute;
top : 50%;
}
.b4{
width : 80px;
height : 120px;
background-color: yellowgreen;
position: absolute;
}
.b5{
width : 80px;
height : 60px;
background-color: yellow;
position: absolute;
top : 50%;
left : 100%;
}
.b6{
width : 50px;
height : 60px;
background-color: black;
position: absolute;
margin-left: 30px;
}
.b7{
width : 50px;
height : 40px;
background-color: purple;
position: absolute;
margin-top : 20px;
}
.b8{
width : 20px;
height : 40px;
background-color: gray;
position: absolute;
margin-left : 30px;
}
.b9{
width : 20px;
height : 20px;
background-color: pink;
position: absolute;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="b1">
<div class="b2">
<div class="b3">
<div class="b4">
<div class="b5">
<div class="b6">
<div class="b7">
<div class="b8">
<div class="b9">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>반응형