말하는나무 PR. Mahannamu/맞춤제작 견적서 Customization Quote Request
retry 1 - content와 aside(=ad)를 나누고 flexbox를 적용
Mr.코딩
2023. 7. 29. 03:24
가장 큰 덩어리를 본문(content)와 우측 광고가 실릴 부분 ─ 이렇게 2개로 나눔.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom-made Request Form</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="total">
<div class="content">내용</div>
<aside class="ad">광고</aside>
</div>
</body>
</html>
CSS에서 플렉스박스를 적용하면, 디폴트인 가로로 배열됨.
content width를 뷰포트의 75%로 지정.
.total {
display: flex;
}
.content {
border: 1px solid black;
width: 75vw;
}
