스마트 인재개발원/HTML - CSS - JS
(스마트인재개발원) CSS 기초 flexbox, holy grail, wrap, float
앨런튜링_
2021. 5. 28. 17:26
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 700px;
height: 500px;
}
#header{
height: 10%;
background-color: #ea4335;
}
#nav{
height: 10%;
background-color: #ff5e00;
}
#side{
width: 30%;
height: 60%;
background-color: #4285f4;
float: right;
}
#section{
width: 70%;
height: 60%;
}
#section1{
height: 50%;
background-color: #34a853;
}
#section2{
height: 50%;
background-color: #fbbc05;
}
#footer{
clear: left;
height: 20%;
background-color: #8a8d92;
}
</style>
</head>
<body>
<div id="container">
<div id ="header"></div>
<div id ="nav"></div>
<div id ="side"></div>
<div id = "section">
<div id ="section1"></div>
<div id ="section2"></div>
</div>
<div id ="footer"></div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 700;
height: 500px;
}
#header{
height: 20%;
background-color: red;
}
#right{
width: 20%;
height: 70%;
background-color: salmon;
float: left;
}
#center{
width: 60%;
height: 70%;
background-color: seashell;
float: left;
text-align: center;
line-height: 250px;
}
#left{
width: 20%;
height: 70%;
background-color: salmon;
float: right;
}
#footer{
height: 20%;
background-color: red;
clear: both;
}
</style>
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "right"></div>
<div id = "center"> 명진쌤 사랑해요 </div>
<div id = "left"></div>
<div id = "footer"></div>
</div>
</body>
</html>
