매일 작성하는 개발 일기
close
프로필 배경
프로필 로고

매일 작성하는 개발 일기

  • 분류 전체보기 (592)
    • JavaScript (39)
    • Flutter (25)
    • HTML CSS (2)
    • 알고리즘 (334)
      • Programmers (170)
      • Baekjoon (164)
    • CS (11)
      • 컴퓨터 구조 (5)
      • 네트워크 (6)
    • 스파르타코딩클럽 (166)
      • 내일배움캠프 (152)
      • 웹개발 종합반 (9)
      • 앱개발 종합반 (5)
    • 개발 기록장 (8)
    • 프로젝트 (1)
    • 회고 (6)
  • 홈
  • JavaScript
  • Flutter
  • 태그
  • 방명록
[CSS] Tailwind로 콘텐츠의 길이와 상관없이 푸터를 항상 하단에 고정하기

[CSS] Tailwind로 콘텐츠의 길이와 상관없이 푸터를 항상 하단에 고정하기

문제 상황데이터를 로드하는 과정 혹은 콘텐츠가 없을 때, 푸터가 화면의 중간까지 올라온다. 사용자에게 일관적인 UI를 제공하기 위해 콘텐츠의 길이가 짧을 때에도 푸터를 항상 화면 아래에 고정하는 방향으로 수정했다. Next.js 및 Tailwind 구현 코드📌 Next.js 및 Tailwind를 기준으로 설명한다./* globals.css */html,body { min-height: 100vh; ✅ 화면 전체 높이 확보}`global.css` 파일에서 `html, body`에 `min-height: 100vh`를 추가한다. export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( ..

  • format_list_bulleted HTML CSS
  • · 2025. 4. 6.
  • textsms
  • navigate_before
  • 1
  • navigate_next
GitHub Link 포트폴리오 링크
전체 카테고리
  • 분류 전체보기 (592)
    • JavaScript (39)
    • Flutter (25)
    • HTML CSS (2)
    • 알고리즘 (334)
      • Programmers (170)
      • Baekjoon (164)
    • CS (11)
      • 컴퓨터 구조 (5)
      • 네트워크 (6)
    • 스파르타코딩클럽 (166)
      • 내일배움캠프 (152)
      • 웹개발 종합반 (9)
      • 앱개발 종합반 (5)
    • 개발 기록장 (8)
    • 프로젝트 (1)
    • 회고 (6)
인기 글
최근 글
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바