Programming/HTML CSS
html 페이지(page)가 화면크기를 벗어나 스크롤(scroll)되는 경우에도 자주 사용하는 메뉴(menu)등을 담고 있는 특정영역은 스크롤(scroll)되지 않도록 화면에 고정시킬 수 있습니다.
<div id="bar">
  Bar Menu
</div>
<div id="body">
  Military Grid Reference System (MGRS) coordinates may be displayed at the bottom of the A-G Mode page on a black background.
</div>
고정바(bar)를 생성하려면 먼저 위에서 처럼 본문 영역(body 이름의 div)이외에 메뉴(menu)나 특정 내용을 담고 있는 div영역(bar)하나를 생성하도록 합니다. 이 div를 고정바(bar)로 활용할 것이므로 다음과 같이 고정시킬 영역에 대한 위치를 지정합니다.
#bar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 50px;
   background: yellow;
}
position을 fixed로 하여 화면에 고정되도록 하며 top 속성을 0으로 하여 화면 상단에 위치하도록 하였습니다. 만약 고정바(bar)가 왼쪽에 위치해야 하는 경우 left 속성을, 오른쪽인 경우 right를, 화면 아래의 경우 bottom 속성값만을 0으로 처리하면 됩니다.

이때 고정바(bar)를 제외한 본문영역은 고정바(bar)에 의해 가려질 수 있으므로 고정바(bar)가 위치한 영역과 크기에 따라 그 만큼의 margin이나 padding속성을 부여 하여 문제를 해결합니다. 예제에서는 고정바(bar)에 해당하는 'bar'이름의 div가 상단(top)에 위치하고 50px크기를 갖고 있으므로
#body {
   margin-top: 50px;
}
50px 만큼 margin-top 속성을 부여하면 됩니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 2차원/3차원 구현(transform)  (0) 2013.11.24
[CSS3] 스프라이트 이미지(sprite image) 활용  (0) 2013.08.29
[CSS3] 고정바(bar) 생성  (1) 2013.08.27
[CSS3] 글자 생략하기  (0) 2013.08.21
[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
1 0