• More Info…

🐧 Header / Footer 위치 잡기 (tailwind)

사전 세팅

body에 css 추가

• relative
• min-h-screen
  • 본문 내용이 적어서 메인의 크기가 작아도 footer 위치를 하단으로 고정시키기위함

Header 항상 상단에 고정

• header
  • fixed, top-0, h-20
• body
  • pt-20

Footer 하단에 고정

• footer
  • fixed, bottom-0, h-40
• body
  • pb-40

🐧 layout shift 방지

스크롤바로 인한 헤더 영향 방지

중앙에 고정해놓은 헤더의 컴포넌트들이 스크롤바가 생기면 width에 변화로 인해 layout shift가 생기는 경우

• min-w-[100vw] 추가

참고 커밋: https://github.com/loegnah/loegnah-page/pull/8/commits/06bc0f29c0f441423a27dc114e53235bf430bf3d