에러로그
아래와 같은 사이트 메인 페이지 내 하단에 위치하는 메뉴바를 구현하고자했다. 처음에는 윈도우 화면의 스크롤을 조작해서 설정해야할 줄 알았는데 position: sticky; 라는 속성을 사용하면 css 코드 몇 줄로 간단하게 구현할 수 있는 기능 같았다. 이에 조금 더 찾아보니 플로팅 버튼이나 스티키 헤더같은 경우로 종종 사용되는 경우 같았다. sticky 속성 설정과 위치값만 설정하면 간단하게 해결할 수 있는 부분일 줄 알았는데 생각보다 시간이 좀 걸렸다.. 응애 나 코린이... 플로팅 헤더로는 자료가 많지만 하단에 고정하는 예시는 많이 없는 것 같기에 간단하게 구현했던 방법을 기록해보려한다. 내가 시도했던 다양한 방법들을 기록해놓은 관계로 하단에 3줄요약도 적어놨다.
나의 멋진 해결
/* 스크롤 메뉴바 컴포넌트의 CSS(scroll/style.ts) */
import styled from 'styled-components';
export const Container = styled.div`
background-color: #fff;
border-top: 1px solid #0d6717;
width: 100%;
height: 80px;
display: flex;
align-items: center;
z-index: 10;
!position: sticky;
!bottom: 0;
`;
사실 느낌표로 앞부분에 표시해준 이 설정만 해주면 끝이다. position: sticky; 속성을 추가해준 뒤 고정하려하는 부분의 위치를 top, right, left, bottom 의 속성으로 위치값 설정을 추가해주면 끝. 헤더가 유동적으로 움직이다 고정되는 스티키 헤더의 경우는 top:0 속성을 주지만 나는 하단 부분에 고정하고 싶었던거라 bottom: 0; 설정을 주어서 하단 부분에 고정했다.
내가 한 삽질
사실 이런 기능을 처음 붙여보는거라 당연하게도 삽질을 좀 했는데 삽질을 생각보다 좀 오랜 시간 해버렸다. 기존에 알고 있던 헤더들이랑 위치가 정 반대이기도 하고 컴포넌트화 한 하단 메뉴바에 css 설정을 어디에 해야하는지 감이 잘 안와서 이것저것 다 해봤다. 우선은 임포트해오는 페이지가 아닌 컴포넌트에 position: sticky; 속성을 적용해주어야한다. 임포트 해오는 페이지에서 속성을 설정해주는 경우에는 아래와 같이 원하는 느낌이 안나오고 깨진다.
컴포넌트를 상단에 위치하게해서 잘 안되는 건가 싶어 메인페이지 기준으로 화면의 끝 부분(전체 코드에서는 중간 지점)에 컴포넌트를 위치시키고 임포트 해온 메인페이지에서 스티키 속성을 부여해봤다. 두근두근 결과는
이에 낙담하지않고 이번에는 임포트 해오는 페이지가 아닌 하단 메뉴바 컴포넌트 내에서 스티키 속성을 부여했다. 하단에 고정되어야하니 bottom: 0; 까지 설정해주고 확인해봤다. 두구두구
이때 sticky 속성은 컴포넌트 내에서 부여해야하고 최종적으로 고정시키고 싶은 위치를 임포트한 페이지에서 설정해야되는걸 알게됐고 메인페이지에서 임포트해온 컴포넌트 태그를 하단에 작성한 결과 아래와 같이 아주 이쁘게 성공할 수 있었다.
하단 플로팅 메뉴바 적용 3줄요약
- position: sticky; top, right, left, bottom(고정시키고싶은 위치): number; -> 컴포넌트 내에 작성(위치 속성도 필수로 부여야해야함)
- import 해온 컴포넌트 태그의 위치 -> 최종적으로 고정하고 싶은 위치에 작성
- 부모요소의 height 설정 -> 필수!! 단, height: 100%; 의 경우는 해당사항없음, % 대신 다른 태그를 사용하도록 하자
