Layout: 슬라이드처럼 Footer 꾸미기

Footer에는 별 아이디어가 없다가... 마음에 드는 디자인을 발견하여 제작해보았다.

완성된 형태는 위와 같으며 참고한 디자인은 두가지다.

1. Yummygum 하단 슬라이드 형태 디자인.
2. Apple 하단의 사이트맵 형태의 디자인.

슬라이드 디자인

원리

슬라이드 디자인의 원리는 다음과 같다. 총 3개의 구역이 필요하다.

• A: Footer가 시작되는 부분

  • main body와 바로 연결되는 부분으로 셋 중 z-index가 제일 크다.

• B: A를 밀어 올려주는 역할을 하는 부분

  • z-index는 셋중 가장 낮다.
  • A를 밀어올려 C가 드러나게 하는 역할을 한다.
  • 그러므로 C가 다 보일 수 있도록, 높이가 최소 C 이상이다.

• C: 숨어있는 부분

  • 맨 아래에 고정되어 숨어있다가 드러나는 부분이다.
  • A한테는 가려지고, B보단 위에 있어야 한다. z-index는 A와 B사이 값이다.

즉, C부분은 z-index값으로 숨겨져있을 뿐 항상 모든 페이지에서 하단에 붙어있다. 스크롤은 <header>와 <main>을 지나, A+B의 높이만큼만 이동을 하는데, B의 z-index 값이 가장 낮다 보니, C가 보이게 되는 것이다.

기본 HTML, CSS 구조

const Footer = (props) => {

  return (
    <footer className="footer">
      <section className="set front">A</section>
      <section className="set pusher" />  // 여기가 B구역
      <section className="set behind">C</section>
    </footer>
  );
};

export default Footer;

.front {
  position: relative;
  z-index: 1;
}

.pusher {
  position: relative;
  z-index: -2;
}

.behind {
  position: fixed;
  display: block;
  z-index: -1;
  bottom: 0;
}

마무리

z-index와 높이 조절로 꽤 재밌는 footer를 만들어냈다.
복잡하고 어렵지 않게, 마음에 드는 모양으로 완성돼서 만족스럽다!

Reference & Learn More

MDN z-index