12월 19일 복기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>twittler</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="flex.css" />
</head>
<body>
<div id="container">
<div class="box w10">
<div class="icon">아이콘 1</div>
<div class="icon">아이콘 2</div>
<div class="icon">아이콘 3</div>
</div>
<div class="box w30">
<div class="area h40">영역1</div>
<div class="area h40">영역2</div>
<div class="area h20">영역3</div>
</div>
<div class="box w60">
<div class="area h80">영역4</div>
<div class="area h20">영역5</div>
</div>
</div>#container {
display: flex;
border: 1px dotted red;
padding: 1rem;
min-height: 90vh;
}
.box {
display: flex;
flex-direction: column;
margin: 1rem;
border: 2px red solid;
}
.icon {
margin: 0.5rem;
border: 1px orange dotted;
}
.area {
margin: 0.5rem;
border: 1px blueviolet dotted;
}
.w10 {
flex: 1 1 0%;
}
.w30 {
flex: 3 1 0%;
}
.w60 {
flex: 6 1 0%;
}
.h20 {
flex: 2 1 0%;
}
.h40 {
flex: 4 1 0%;
}
.h80 {
flex: 8 1 0%;
}
임지택입니다.