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>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="left-manu">
<div><img src="lotso.jpeg" class="lotso-p">
<div class="name">
<h4 style="margin: 0;">랏소</h4>
<p style="margin: 0;">1시간전</p>
</div>
</div>
<div class="contents">
<h4 style="margin: 0;">내용이다이이다다디</h4>
<p style="margin: 0;">내용이다이이다다디내용이다이이다다디내용이다이이다다디내용이다이이다다디내용이다이이다다디내용이다이이다다디내용이다이이다다디
</p>
</div>
</div>
<div class="right-box">
<img src="lotso.jpeg" style="width: 90%;">
</div>
</div>
</body>
</html>```
CSS
<.container{
width: 800px;
display : block;
margin-left : auto;
margin-right : auto;
}
.left-manu{
width: 80%;
height: 200px;
/* background: aqua; */
float: left;
}
.right-box{
width: 20%;
height: 200px;
/* background: gray; */
float: left;
}
.lotso-p{
width: 40px;
float: left;
}
.name{
float: left;
}
.contents{
clear: both;
}
레이아웃을 만들때는 `<div></div>` 박스태그를 사용해준다.
가장큰 박스부터 점점 작은 박스를 사용하여 박스들을 구성해준다.
float를 쓰고 나면 항상 clear 속성이 필요. float속성 사용 후 다음 태그들은 이상한 자리에서 나타난다. 그럴땐 `clear : both` 속성을 사용 해준다.
float은 요소들을 붕 띄우는 속성을 가지니 다음 요소들에게 꼭꼭 clear 을 사용해준다.
