커스텀 푸터 만들기

  아임웹 연구소 소장 해준  |  2017 . 09 . 25

시작에 앞서
푸터(Footer)란 마이크로소프트 워드로 치면 페이지 별로 반복적으로 표시되는 '꼬리말' 영역을 말합니다. 아임웹에서는 사용자분들의 이해를 돕기 위해 하단섹션 또는 하단영역이라고도 부르는데요. 푸터 영역에는 일반적으로 사업자 정보, 통신판매업신고번호, 사이트맵 외 소셜 링크 등을 표시합니다.




아임웹은 기본적으로 테마마다 푸터 디자인을 제공합니다. 그러나 푸터 디자인을 마음대로 커스텀하고 싶으셨던 분들도 계실 것입니다. 저도 그중 한 명이었습니다.

빈 섹션을 하나 추가해 푸터 섹션을 만들고, 모든 페이지마다 [복사/붙여넣기] 신공을 통해 추가하는 것도 하나의 방법이지만, 페이지가 매우 많을 경우 이 방법은 대단히 불편합니다. 이보다 더 간편한 방법이 있습니다.

그건 바로 섹션 반복을 활용하는 것입니다.




1단계, 커스텀 푸터 섹션 준비 및 위치 확인하기
빈 섹션을 하나 추가하고, 추가한 섹션에 여러 위젯을 추가해 푸터 디자인을 해줍니다. 그 후 푸터 섹션을 가장 하단으로 이동시켜주세요. 옮기고자 하는 섹션에 마우스 커서를 대고, 마우스 오른쪽 버튼을 클릭하시면 [위로 이동], [아래로 이동] 메뉴가 나타납니다.

*섹션 반복 기능을 적용할 섹션은 반드시 페이지 본문 최하단에 위치해 있어야 합니다.





2단계, 하단 설정 패널 열기
1) 기존 하단 섹션에 마우스 커서를 놓고, 마우스 오른쪽 버튼을 열어주세요.
2) 보조 메뉴가 나타나면 [하단 설정]을 클릭합니다.





3단계, 기존 푸터 콘텐츠 편집하기
1) 표시 요소에서 하단에 들어갈 요소들을 모두 체크 해제합니다.
2) 상하 여백은 필요하신 만큼 입력해주세요.
3) 배경은 새롭게 제작한 푸터 섹션과 같은 배경색으로 지정해줍니다.




4) 나머지 텍스트는, 마우스 더블-클릭을 통해 편집이 가능합니다.
*사업자 정보를 입력하실 수 있으며, 딱히 필요 없으신 경우 모두 삭제하셔도 무방합니다.





4단계, 섹션 반복하기
이제 모든 페이지에서 커스텀 푸터가 나타나도록, 섹션 반복 기능을 적용해줄 차례입니다.

1) 아래 그림처럼 [섹션 반복]할 섹션 빈 영역에 마우스 커서를 놓고, 마우스 오른쪽 버튼을 클릭합니다.
2) 보조 메뉴가 나타나면 [섹션 반복]을 클릭해주세요.





5단계, 정상적으로 적용되었는지 확인하기
긴 글 따라 오시느라 고생 많으셨습니다. 이제 다른 메뉴로 이동해, 새롭게 추가한 푸터가 잘 적용되었는지 확인해주세요.


해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.