[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

[TIL] 2023.05.04 Tailwind와 함께 프로젝트 시작!

Today I Learned 프로젝트 기초 세팅 및 UI 구현 시작 Programmers 문제 풀기 Tailwind 너무 궁금했던 Tailwind를 드디어 사용해 봤다! 오늘 처음으로 사용해 보는 건데 생각보다 어렵지는 않다. 그런데 아직 익숙해지지 않아서 그런지 계속 tailwind-cheat-sheet에서 검색하면서 코드 짜느라 시간이 조금 소요됐다. 그리고 아직은 Tailwind의 장점을 잘 모르겠다. 무엇보다도 모두 똑같이 생긴 div에 className만 적어서 구분하려니 이 div가 어떤 부분인지를 잘 모르겠다. 컴포넌트명 고민하느라 귀찮긴 했지만 직관적인 이름으로 한눈에 어떤 분인지 파악 가능했던 styled-components가 잠시 그립기도 했다 ㅠㅠ 그래도 아직 첫날이니까 Tailwin..

• format_list_bulleted JavaScript
• · 2023. 5. 4.
• textsms