![[2021/12/21]국비지원 CSS3 3-(3) 과제2 : 3단 boxmodel](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F1CETm%2Fbtrr3nIz6Gx%2FAAAAAAAAAAAAAAAAAAAAABvCmc7-N_9ce1A3J_3rvKjRZSEmvMIFuogkJCPgzz44%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DK4mNOYBNFtXTqht37Wlpb%252B0NT9o%253D)
수업 중 과제 2
3단 boxmodel
사용한 css3
- width
- height
- padding
- margin
- background-color
- font-size
- color (font-color)
- font-weight
- border
작업내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3단 boxmodel<title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
body{font-size: 30px;color: #fff; font-weight: bold;}
#wrap{width:580px;height:580px;background-color: yellow; padding:10px;}
#top{width:530px;height:136px;background-color: red;
border: 5px solid #000;padding:20px;margin-bottom: 11px;}
#middle{width:530px;height:136px;background-color: green;
border: 5px solid #000;padding:20px;margin-bottom: 11px;}
#bottom{width:530px;height:136px;background-color: blue;border: 5px solid #000;padding:20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="top">Top</div>
<div id="middle">Middle</div>
<div id="bottom">Bottom</div>
</div>
</body>
</html>
결과물
