[2024 중앙 해커톤] Footer 만들기

2024 / 07 / 19

Footer를 만들어 페이지 아랫부분을 정돈된 느낌이 들도록 변경했다.

Footer란?

사이트 최하단에 있는 영역으로 보통 저작권 정보나 개인정보처리 방침, 이용약관 등 정책 페이지 링크를 두는 요소.
(출처 : https://www.beusable.net/blog/?p=4391)

보통 Footer와 Navbar를 합쳐서 Toolbar라고 하는듯.

따라서 Footer 제작 후 새 폴더 "toolbar"를 만들고 이 안에 Footer, Navbar 컴포넌트를 이동시켰다.

Footer 구조와 CSS

우리 프로젝트에는 아직 Footer에 넣을 정보가 별로 없기 때문에 로고와 임시 이메일 주소와 인스타그램 아이디, 저작권 표시를 넣었다.

구조

결과물

/* 틀div css*/

margin-top: auto;
width: 100%;
border-top: 1px solid gray;
display: flex;
flex-direction: column; /* (로고와 정보 세로 정렬) */

/* 안쪽 div css */
styled.div;
display: flex;
flex-direction: row;

결과물

다음과 같이 페이지 크기에 따라 Footer 위치가 조절된다.
핵심은 margin-top: auto 로 설정하여 위에 있는 요소에 맞게 Footer 위치가 알맞게 적용되도록 하는 것이다.

메인 페이지

마이페이지

---

할 일

- AI 모델 구상해보기

- "추구하는 삶" 선택 리스트 구현

 

오늘의 소감

컴포넌트화 과정에서 파일 확장자명을 실수로 jsx가 아니라 tsx로 하는 바람에 시간을 엄청 잡아먹었다. 다음에는 그러지 말아야겠다.