연습문제 1
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>practice</title>
<link rel="stylesheet" href="css/practice.css">
</head>
<body>
<div class="flex-container">
<header class="header">#header</header>
<section class="content">
<div class="box left">#left</div>
<div class="box center">#center</div>
<div class="box right">#right</div>
</section>
<footer class="footer">#footer</footer>
</div>
</body>
</html>
- css
/* 연습문제 1 */
*{
box-sizing: border-box;
}
.flex-container{
display: flex;
flex-direction: column;
border: 1px solid gray;
width: 500px;
height: 300px;
}
.header, .footer{
background-color: gray;
flex-basis: 20%;
text-align: center;
}
.content{
display: flex;
flex-basis: 60%;
}
.left{
flex-basis: 30%;
background-color: skyblue;
border-right: 1px solid gray;
text-align: center;
}
.center{
flex-basis: 50%;
background-color: lightgray;
text-align: center;
}
.right{
flex-basis: 20%;
background-color: orange;
border-left: 1px solid gray;
text-align: center;
}
연습문제 2
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>practice</title>
<link rel="stylesheet" href="css/practice.css">
</head>
<body>
<div class="flex-container2">
<div class="Header">Header</div>
<div class="main">
<div class="Nav">Nav</div>
<div class="Content">
<div class="Content2">Content</div>
<div class="Footer">Footer</div>
</div>
</div>
</div>
</body>
</html>
- css
.flex-container2{
display: flex;
flex-direction: column;
border: 1px solid white;
width: 500px;
height: 300px;
}
.Header{
height: 20%;
background-color: red;
text-align: center;
}
.main{
display: flex;
height: 80%;
}
.Nav{
background-color: yellow;
width: 30%;
text-align: center;
}
.Content{
width: 70%;
display: flex;
flex-direction: column;
}
.Content2{
background-color: greenyellow;
height: 80%;
text-align: center;
}
.Footer{
background-color: aqua;
height: 20%;
text-align: center;
}
