플로팅 레이어 | 웹페이지 별로 다른 레이어 만들기

<바로가기>

• 레이어 만들기
• 중앙 정렬

Floating Layer는 웹페이지 화면 공간을 효율적으로 구성하기에 대단히 유용하다. 블로그 내 각각의 웹페이지 별로 독특한 메뉴나 즐겨찾기, 특히 콘텐츠가 많은 게시글에 <바로가기 목차> 등을 추가하면 화면 스크롤과 관계없이 고정되어 가독성을 크게 향상할 수 있다. 지금 보는 화면 오른쪽 플로팅 레이어는 웹페이지 내용에 전혀 지장을 주지 않고, 블로그 탬플릿 레이아웃과 별도로 활용할 수 있어 매우 편리하다.

레이어 만들기

웹페이지 별로 다른 레이어를 만들기 위해서는 웹페이지 안에 html을 이용해서 div와 스타일(CSS)을 만들어야 한다. 블로그 전체에 적용을 시키려면 블로그 탬플릿 안(body)에 한 개만 만들면 된다.

div 만들기

플로팅 레이어는 컴퓨터 화면이 최대로 확대되면 플로트(float) 되지 않고 원래의 위치(페이지 내 태그 작성 위치)에 표시된다. 따라서 ‘바로가기’ 태그는 페이지 맨 위쪽에 위치하는 것이 바람직하다.

<div class='floating'>
<ul>

<li><a href="#making">레이어 만들기</a></li>
<li><a href="#align">중앙 정렬</a></li>
</ul>
</div>

목록(list) 만들기

리스트 항목별 URL을 지정하기 위해서 목표(id나 class)가 지정되어야 하므로 ‘바로가기’ 할 문단의 제목이나 div에 id를 만들고 리스트의 URL과 일치시킨다.

<ul>
<li><a href="#making">레이어 만들기</a></li>
<li><a href="#align">중앙 정렬</a></li>
</ul>

스타일 지정

absolute

콘테츠 화면 구성 요소(body)에 대한 절대적 개념의 속성으로, 스크롤 시 플로팅 요소가 화면과 함께 움직인다.

fixed

콘테츠 화면 구성 요소(body)에 대한 상대적 개념의 속성으로, 콘테츠 화면이 움직여도 고정이 되어 이동되지 않는다. 효율적인 화면 공간 활용 방법을 소개하는 본 게시글의 목적과 부합한다.

<style>
.floating{
  position:fixed;
  top:150px;
  left:50%;
  z-index:100;
  margin-left:30%;//확대 축소 대비
  width:200px;
  height:300px;
}
</style>

레이어 중앙 정렬

레이어의 기준을 왼쪽이나 오른쪽으로 잡게 되면 화면이 확대되거나 축소될 때 웹페이지 내용과 중첩되기 때문에 중앙을 기준으로 정렬해야 한다. 기본적으로 레이어의 위치는 오른쪽과 왼쪽을 기준으로 한다. 중앙 정렬을 하기 위해서 left:50%나 right:50%로 설정한 후에 콘텐츠(body) 폭(반)을 계산해서 좌우 여백을 지정하면 콘텐츠와 중첩되지 않도록 레이어를 배치할 수 있다.

의 관련글