Footer(푸터) Sticky(스티키) 만들기

안녕하세요. 이번 시간에는 Sticky 기능에 대해 알아보도록 하겠습니다.

우선 Sticky는 달라붙는/끈적끈적한 이라는 의미를 가지고있습니다. 이 의미를 부여하면 Footer Sticky는 ‘Footer 영역이 달라붙어 있다’ 겠죠?

Footer Sticky는 Footer 영역이 고정되어 있어 웹사이트의 스크롤을 올리고, 내려도 고정되어 있는 것입니다.

일반적 테마에서는 Header Sticky기능을 제공합니다. Header Sticky 기능은 스크롤을 올리고, 내려도 Header가 따라다니는 것이죠. 보통 Header에는 사이트의 로고나 메뉴들이 들어가기 때문에

사용자 입장에서는 편리한 기능이라고 할 수 있습니다.

Header Sticky 기능은 편리한 기능이고 자주 사용하는 기능인데 Footer Sticky 기능은 어디에 사용하는 것일까요?

Footer Sticky 기능은 Header Sticky 기능 보다는 사용 빈도가 적습니다.

Footer Sticky는 사이트 내에서 상담 신청을 받거나 어떠한 정보를 계속 노출해야될 때 사용합니다. 이벤트 공지나 광고같은 것들이 될 수 있겠죠?

Sticky에 관한 플러그인은 여러가지가 존재합니다. 하지만 대부분이 자신이 원하는 방법으로 커스텀하기가 어렵습니다.

Default로 사용되는 Footer영역은 꾸미기가 편리하기 때문에 Default Footer에 Sticky를 넣는 것은 효율적입니다.

 

Footer 영역을 Sticky로 만드는 방법은 어렵지 않습니다.

테마의 [사용자 정의하기] – [Custom CSS]에 다음과 같은 코드만 넣으면 됩니다.

.absolute-footer {
background: rgba(0,128,128);
bottom: 0px;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
left:0;
padding: 0px 0;
position:fixed;
font-size:16px;
width:100%; z-index:99999;
float:left;
vertical-align:middle;
margin: 0px 0 0;
opacity: 1;
font-weight: bold;
}

.absolute-footer 는 Footer영역의 클래스 명입니다. 잘 확인하고 추가해야합니다.

이렇게 추가하게되면 조금 부자연스럽게 추가가 됩니다. Footer 부분이 바로 위 영역을 잡아먹기 때문입니다.

Footer 영역만큼 하단에 빈 영역을 만들어주는 것도 자연스럽게 보이는 방법중에 하나입니다. 참고하세요 🙂

 

여기까지 Footer 영역을 Sticky로 만드는 방법이었습니다. 더 좋은 방법이 있다면 알려주세요 🙂

감사합니다.

 

 

댓글 남기기