table로 생성 X
모든 속성은 div안에서 활용할 것!
#divExam1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
box-sizing: border-box;
}
/*보통 넓이는 부모요소 따라서 / 높이는 자식 전체를 감싸도록*/
.wrap {
width: 1000px;
border: 1px solid red;
}
.header {
height: 150px;
border: 1px dashed blue;
}
.content {
border: 1px dashed blue;
/*float사용 시 부모요소의 마지막에 overflow*/
overflow: hidden;
}
.footer {
height: 150px;
border: 1px dashed blue;
}
.content-1{
width: 20%;
height: 500px;
border: 1px double green;
float: left;
}
.content-2{
width: 80%;
height: 500px;
border: 1px double green;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header"></div>
<div class="content">
<div class="content-1"></div>
<div class="content-2"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 문제 및 실습 (div(3)-GO GREEN) (0) | 2020.10.15 |
|---|---|
| 문제 및 실습 (div(2)) (0) | 2020.10.15 |
| 00_CSS(애니메이션) (0) | 2020.10.13 |
| 04_CSS(색상배경(2)) (0) | 2020.10.13 |
| 04_CSS(색상배경(1)) (0) | 2020.10.13 |