가장 큰 덩어리를 본문(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;
}
'말하는나무 PR. Mahannamu > 맞춤제작 견적서 Customization Quote Request' 카테고리의 다른 글
| 전체 구획 및 logo 부분, 중앙 정렬 및 간격 주기│의뢰서 단계별 갈무리 1-2 (0) | 2023.07.28 |
|---|---|
| 의뢰서 단계별 갈무리 1 (0) | 2023.07.28 |
| 4-2. 견적 의뢰서 제작 갈무리 (0) | 2023.07.25 |
| 3. 드롭다운을 삽입하고, 버튼 부분의 사이즈를 조절, 그리고 뷰포트 기준으로 아이템들이 줄어들다가 800px 이하에서 header, main, ad-area가 사라지게 함. (0) | 2023.07.24 |
| 2. 로고 이미지를 삽입함 (0) | 2023.07.24 |
| 1. 덩어리별로 구역을 나눔 (0) | 2023.07.24 |
| 이 코드만으로 14개의 섹션(구역)이 생성된 거지? (0) | 2023.07.23 |
| 오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. (0) | 2023.07.23 |
