<!DOCTYPE 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>
<style>
header, nav, aside, footer, section{
color: white;
text-align: center;
border: 1px solid black;
background-color: blue;
}
header{
width : 100%;
height : 100px;
}
nav{
width : 100%;
height : 50px;
margin-top : 10px;
}
div{
margin-top: 10px;
}
aside{
width : 30%;
height : 200px;
}
section{
width : 35%;
height : 200px;
margin-left: 32%;
}
article{
background-color: green;
margin: 10px;
height: 40px;
}
footer{
width : 100%;
height : 100px;
margin-top : 20px;
}
</style>
</head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<div>
<aside style="float: left">
aside1
</aside>
<aside style="float: right">
aside2
</aside>
<section>
section
<article>
article1
</article>
<article>
article2
</article>
<article>
article3
</article>
</section>
</div>
<footer>
footer
</footer>
</body>
</html>
'2022 SW전문인재양성사업 > 웹 퍼블리싱' 카테고리의 다른 글
이미지 넘기기 (0) | 2022.07.26 |
---|---|
폼 데이터 서버 전송하기(미구현) (0) | 2022.07.26 |
Node.Js와 계산기 만들기 (0) | 2022.07.26 |
CSS 기초 (2) - transition (0) | 2022.07.26 |
CSS 기초 (1) (0) | 2022.07.26 |