CSS 페이지 스크롤시 헤더를 고정시키기
페이지 스크롤시 헤더를 고정시키기
페이지를 스크롤해 아래의 내용을 위로 올릴 때 헤더를 고정시키려면 position:fixed를 이용한다.
<style>
div#header{
background-color:#02c7ea;
position:fixed;
width:100%;
top:0;
left:0;
}
div#logo{
float:left;
width:50%;
padding:10px 0 0 20px;
}
ul.nav{
float:left;
list-style:none;
width:45%;
}
ul.nav li{
float:left;
}
ul.nav a{
line-height:40px;
color:#FFFFFF;
padding:0 15px;
text-decoration: none;
}
</style>
<div id="header">
<div id="logo"><img src="flower.jpg" width="50" height="50"></div>
<div>
<ul class="nav">
<li><a href="#">회사소개</a></li>
<li><a href="#">제품정보</a></li>
<li><a href="#">기술정보</a></li>
<li><a href="#">게시판</a></li>
<li><a href="#">공지사항</a></li>
</ul>
</div>
</div>
<div align="center"><img src="rue.jpg"></div>
<스크롤하기 전>
<스크롤한 후 - 해더가 고정되어 있음>
