<!DOCTYPE html>
<html lang="ko">
<head>
<title> 12.sticky </title>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul{background-color: brown; }
#s1 li:nth-child(1){background-color: red;}
#s1 li:nth-child(2){background-color: green; }
#s1 li:nth-child(3){background-color: blue;}
#header{
position: sticky;
top: 0;
height: 70px;
background-color: black;
width: 100%;
color: white;
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<header id="header">
<h1>아이티윌</h1> </header>
<hr>
<section id="s1">
<h1>position: sticky</h1>
<ul>
<li>서울</li>
<li>부산</li>
<li>제주</li>
</ul>
</section>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
<p> KOREA</p>
</body>
</html>
