HTML, CSS, Flexbox를 이용한 푸터 고정 방법

2024-02-27
웹 페이지 하단에 푸터 고정하기1. position: absolute 사용
<footer>
  <div class="footer-content">
    Copyright &copy; 2023
  </div>
</footer>
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #ccc;
}

.footer-content {
  text-align: center;
  padding: 10px;
}

설명:

  • position: absolute 속성을 사용하여 푸터를 상대 위치에서 절대 위치로 변환합니다.
  • bottom: 0 속성을 사용하여 푸터를 브라우저 창의 하단에 배치합니다.
  • width: 100% 속성을 사용하여 푸터를 브라우저 창의 너비와 동일하게 설정합니다.
  • height: 50px 속성을 사용하여 푸터의 높이를 50px로 설정합니다.
  • background-color: #ccc 속성을 사용하여 푸터의 배경색을 #ccc로 설정합니다.
2. position: fixed 사용
<footer>
  <div class="footer-content">
    Copyright &copy; 2023
  </div>
</footer>
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #ccc;
}

.footer-content {
  text-align: center;
  padding: 10px;
}

설명:

  • position: fixed 속성을 사용하여 푸터를 스크롤 영역에 고정합니다.
3. Flexbox 사용
<div id="wrapper">
  <header>
    <h1>My Website</h1>
  </header>
  <main>
    <p>This is the main content area.</p>
  </main>
  <footer>
    <div class="footer-content">
      Copyright &copy; 2023
    </div>
  </footer>
</div>
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  flex: 0 0 auto;
}

main {
  flex: 1 1 auto;
}

footer {
  flex: 0 0 auto;
}

.footer-content {
  text-align: center;
  padding: 10px;
}

설명:

  • display: flex 속성을 사용하여 #wrapper div를 flexbox 레이아웃으로 설정합니다.
  • flex-direction: column 속성을 사용하여 flexbox 레이아웃의 방향을 세로로 설정합니다.
  • min-height: 100vh 속성을 사용하여 #wrapper div의 높이를 브라우저 창의 높이와 동일하게 설정합니다.
관련 문제 및 해결 방법
  • 푸터가 콘텐츠보다 길 때:

    • min-height 속성을 사용하여 푸터의

css html footer


JavaScript 엔터키 이벤트: 폼 제출 외에도 가능한 것들

해결 방법:onkeydown 이벤트 사용:addEventListener 사용:jQuery 사용:참고 사항:event. keyCode === 13은 엔터키가 눌렸는지 확인하는 코드입니다.document. forms[0].submit()은 첫 번째 폼을 전송하는 코드입니다...


HTML 양식 중첩: 가능한가요?

HTML 양식 중첩은 하나의 양식 안에 다른 양식을 포함하는 것을 의미합니다. 이는 다양한 그룹으로 입력 컨트롤을 구성하거나 복잡한 데이터 구조를 수집하는 데 유용할 수 있습니다.중첩 가능한 HTML 양식form 태그: 모든 HTML 양식의 컨테이너...


CSS 유동 레이아웃에서 높이를 동적 너비와 동일하게 설정하기 (JavaScript, jQuery, HTML 사용)

하지만 특정 상황에서는 요소의 높이를 동적 너비와 동일하게 설정해야 할 수도 있습니다. 예를 들어, 정사각형 이미지를 만들거나 콘텐츠 박스의 높이를 너비와 동일하게 유지해야 하는 경우가 있습니다.다음은 JavaScript...


HTML 및 CSS에서 '절대 위치이지만 부모에 상대적인 위치' 설정하기

**절대 위치 (absolute)**는 요소를 뷰포트 (보이는 화면 영역)에 대해 절대적으로 위치시키는 방식입니다. 즉, 요소의 위치는 주변 요소에 영향을 받지 않고 top, left, bottom, right 속성을 사용하여 자유롭게 설정할 수 있습니다...


css html footer