HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MZZNZZ</title>
<link rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="container">
<header id="header"><h1>제목</h1></header>
<aside id="leftsideber"><h3>광고</h3></aside>
<section id="content"><h3>본문</h3></section>
<aside id="rightsideber"><h3>광고</h3></aside>
<footer id="footer"><h3>하단</h3></footer>
</div>
</body>
</html>
제목, 광고, 본문, 하단을 나눠서 만들었어.
CSS
#container {
width: 1200px;
margin: 20px auto;
background-color: rgb(0, 101, 189);
}
#header {
width: 100%;
height: 120px;
background-color: rgb(202, 239, 253);
}
#leftsideber {
width: 300px;
height: 600px;
background-color: rgb(245, 253, 255);
float: left;
}
#content {
width: 600px;
height: 600px;
background-color: rgb(168, 255, 255);
float: left;
}
#rightsideber {
width: 300px;
height: 600px;
background-color: rgb(245, 253, 255);
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: rgb(147, 185, 219);
clear: both;
}
이런식으로 만드는 법을 습득 해야할 거양!
'프론트엔드 > HTML' 카테고리의 다른 글
| grid 활용2 (문으로 이용한 활용) (0) | 2023.10.25 |
|---|---|
| grid 활용법 (0) | 2023.10.25 |
| CSS 띄움을 이용한 레이아웃 + CSS clear의 활용 (0) | 2023.10.25 |
| 애니메이션 201페이지 참고 (0) | 2023.10.23 |
| doors 홈페이지 만들기 (0) | 2023.10.18 |