[Next.js 로 롤 정보 사이트 만들기] footer 위치 이슈

티스토리 뷰

🔥 프로젝트

[Next.js 로 롤 정보 사이트 만들기] footer 위치 이슈

developer jungminji 2024. 10. 5. 14:52

푸터의 위치를 원하는대로 배치해보자.

챔피언 목록처럼 데이터가 많아서 스크롤이 생길 경우 푸터가 자연스럽게 아래로 가게 되는데, 챔피언 상세 화면에서 스크롤이 생길 정도로 데이터가 많지 않으면 푸터가 중앙에 자리 잡고 있는 현상이 발생했다. 😮‍💨

문제점

목록은 푸터가 내가 원하는 대로 알아서 아래에 잘 자리 잡고 있다.

그러나. . 챔피언 상세 페이지에서는...

데이터의 양이 적기 때문에 스크롤이 생기지 않고 애매한 중앙에 위치해 있는 상태가 되었다.

내가 원하던 것은.. 스크롤이 생기면 스크롤이 끝나고 푸터가 보이고, 데이터가 별로 없어서 스크롤이 생기지 않는다면 뷰포인트 하단에 푸더가 보이도록 하는 것이다. 이를 해결해 보자.

변경 전 코드

<html lang="en">
  <body className="bg-black">
    <Providers>
      <header className="bg-gray-800 text-white py-4 fixed top-0 w-full z-10">
        <nav className="flex justify-around ">
          <Link href={"/"}>홈</Link>
          <Link href={"/champions"}>챔피언 목록</Link>
          <Link href={"/items"}>아이템 목록</Link>
          <Link href={"/rotation"}>챔피언 로테이션</Link>
        </nav>
      </header>
      <main className="pt-28">{children}</main>
      <footer className="bg-gray-800 p-4 mt-8 ">
        <div className="text-center text-white text-sm">
          <p>jungminji</p>
        </div>
      </footer>
    </Providers>
  </body>
</html>

해결 방법

<html lang="en">
  <body className="bg-black min-h-screen flex flex-col">
    <Providers>
      <header className="bg-gray-800 text-white py-4 fixed top-0 w-full z-10">
        <nav className="flex justify-around ">
          <Link href={"/"}>홈</Link>
          <Link href={"/champions"}>챔피언 목록</Link>
          <Link href={"/items"}>아이템 목록</Link>
          <Link href={"/rotation"}>챔피언 로테이션</Link>
        </nav>
      </header>
      <main className="pt-28 grow">{children}</main>
      <footer className="bg-gray-800 p-4 mt-8 ">
        <div className="text-center text-white text-sm">
          <p>jungminji</p>
        </div>
      </footer>
    </Providers>
  </body>
</html>

<body className="bg-black min-h-screen">

min-h-screen : min-height: 100vh 을 의미한다. 이 설정으로 인해 페이지의 높이가 적어도 화면의 전체 높이만큼 유지된다. 하지만, 이 설정만으로 푸터가 아래에 위치하지 않는다. body 의 자식들을 어떤 식으로 배치할지 아직 정해지지 않았기 때문이다. 이 상태에서는 body 가 뷰포트 전체를 차지하고 있지만 자식들은 그냥 생겨난 대로 알아서 위치해 있기 때문에 main 의 내용물이 적으면 스크롤이 발생하지 않고 자연스럽게 푸터도 하단이 아닌 애매한 곳에 있게 된다.

<body className="bg-black min-h-screen flex flex-col">

body 에 flexbox 를 사용하여 자식 요소들을 어떻게 배치할지에 대한 컨트롤이 가능하게 했다.

<main className="pt-28 grow">{children}</main>

grow : flex-grow : 1 을 명시해주면 body 의 flexbox 레이아웃 효과가 발동하게 된다. flex-grow : 1 은 main 남은 공간을 차지하도록 할 수 있다. 해당 속성값 덕분에 main 이 body 의 남은 모든 공간을 차지하려고 시도하고 이때 header 와 footer 은 각각 고정된 높이를 가지고 있으므로 header 와 footer 를 제외한 남은 공간을 전부 main 이 채우게 된다.

위와 같은 스타일을 적용해 주면 내가 원하던 대로 요소들이 이쁘게 위치하게 되었다!!

'🔥 프로젝트' 카테고리의 다른 글

[✈️ 최종프로젝트] supabase storage private bucket 사용해보기 (signed url 과 함께...) (1)	2024.10.27
[Next.js 프로젝트] React Hook Form 과 Zod 로 회원 가입 폼 만들기 (0)	2024.10.15
[Next.js 로 롤 정보 사이트 만들기] API KEY 발급 후 환경변수 설정 (0)	2024.09.27
[Next.js 로 롤 정보 사이트 만들기] 프로젝트 생성 및 레이아웃 구성 (0)	2024.09.25
[💁🏻‍♀️ mbti 테스트 만들기] 토큰 만료 이슈... 😵‍💫 (1)	2024.09.11

최근에 올라온 글

Total

Today

Yesterday

링크

Minji Log

티스토리 뷰

[Next.js 로 롤 정보 사이트 만들기] footer 위치 이슈

문제점

해결 방법

'🔥 프로젝트' 카테고리의 다른 글

티스토리툴바

티스토리 뷰

[Next.js 로 롤 정보 사이트 만들기] footer 위치 이슈

문제점

해결 방법

'🔥 프로젝트' 카테고리의 다른 글

티스토리툴바

해결 방법