<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>레이아웃</title>
</head>
<style>
header{
/*
position: fixed => 다른 요소와 상관없이 자신은 그 위치를 계속 유지한다
다른 요소와 겹칠 수 있게 된다
*/
position: fixed;
background-color: #ffd6de;
width: 100%;
height: 50px;
}
aside{
display: inline-block;
position: sticky;
/*
자기 위치에 있다가 스크롤 때문에 시야에서 사라져야할 경우에는 스크롤을 따라 움직인다.
기준이 되는 부모요소가 있어야함
*/
background-color: aquamarine;
width: 5%;
height: 100px;
vertical-align: top;
}
main{
margin-top: 50px;
display: inline-block;
background-color: #d4ffca;
width: 80%;
}
div{
border: 2px solid black;
margin: 10px 0;
background-color: white;
height: 200px;
}
footer{
background-color: #c2eeff;
height: 50px;
}
</style>
<body>
<header></header>
<aside></aside>
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<aside></aside>
<footer></footer>
</body>
</html>
