[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] 내일배움캠프 React 과정 2022.11.15

Today I Learned 웹 퍼블리싱 강의 2주차, 3주차 수강 웹 퍼블리싱 2주차 강의 내용 padding 값으로 텍스트 정렬하기 .api_atcmp_wrap .atcmp_fixer .atcmp_header { position: relative; padding: 8px 18px 0; } /* 전체삭제 텍스트 */ .api_atcmp_wrap .atcmp_fixer .atcmp_header .option { position: absolute; top: 9px; right: 18px; } 최근 검색어와 전체삭제를 양 끝에 위치하기 위해 padding 값을 이용해서 정렬을 해주었다. 좌측의 최근 검색어는 따로 위치를 설정할 것은 없고 우측의 전체 삭제 텍스트는 추가적으로 right: 18px;을 넣어준다..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 15.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.14

Today I Learned 웹 퍼블리싱 강의 1주차~2주차 수강 웹 퍼블리싱 강의 1주차 내용 CSS transition transition: all 0.3s ease-in-out; transition에 어떤 다양한 효과들이 있는지 궁금해서 검색해봤다. https://poiemaweb.com/css3-transition a태그 밑줄, 색상 제거하기 a { text-decoration: none; color: inherit; } color: inherit; 상위 클래스에서 지정한 색깔을 그대로 가져오는 문법 나는 color: white 로 색상을 직접 변경하는 방법을 사용했었는데 강의를 들으면서 inherit라는 더욱 간단한 속성도 알게 되었다. css에 이렇게 코드를 작성하면 모든 a 태그에 적용된다...

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 14.
• textsms

html과 css만으로 top 이동 버튼 추가하기

다른 팀들의 발표를 보고 나도 버튼 누르면 최상단으로 이동해주는 top 버튼을 구현해보고 싶어졌다. 근데 구글링 해보니 대부분의 게시물에서는 자바스크립트를 이용하는데 나는 아직 자바스크립트를 이용해 본 적이 없기 때문에 조금 두려웠다. 그래서 html만으로 구현할 수 있는 방법이 없을까 열심히 검색하고 시도해 보다가 결국에는 성공했다! 참고 사이트 https://miaow-miaow.tistory.com/84 일단 내 웹페이지는 굉장히 간단한 구조이기 때문에 더 복잡한 코드에서도 적용될지는 모르겠다는 점을 밝혀둔다. 1. top 버튼 눌렀을 때 이동하고 싶은 위치를 id="top"으로 설정한다. 나는 타이틀에 id 값을 설정해 줬다. 2. html 코드 최하단에 a 태그를 추가한다. a 태그에 버튼 눌렀..

• format_list_bulleted 개발 기록장
• · 2022. 11. 8.
• textsms