CSS만 사용하여 고정 바닥글을 어떻게 만들 수 있나요?

CSS Mastery로 바닥글 위치 지정

웹 사이트의 사용자 경험을 향상하려면 사용자가 페이지를 스크롤하는 동안에도 계속 표시되는 요소를 만드는 것이 종종 포함됩니다. . 페이지 하단에 고정된 고정 바닥글은 이를 수행하는 효과적인 방법입니다. 이 효과를 달성하는 방법은 다양하지만 순수 CSS는 간단하고 효율적인 솔루션을 제공합니다.

WordPress 사용자의 경우 다음 단계를 따르면 바닥글이 페이지 하단에 단단히 고정됩니다.

1. 바닥글 HTML 구성 배치:

   
   <div>
   <ul>
   <li><main-content> div를 사용하여 페이지의 기본 콘텐츠를 호스팅합니다.</main-content></li>
   <li><footer> ID가 하단 바닥글인 요소는 고정 바닥글의 앵커 역할을 합니다.</footer></li>
   </ul>
   <li>
   <p><strong>본문 여백 조정:</strong></p>
   <pre class="brush:php;toolbar:false">body {
       margin-bottom: 100px; /* Margin value should match the height of the footer */
   }

   • 이 여백은 페이지 하단에 바닥글이 위치할 공간을 만듭니다. position.

2. 위치 바닥글에 CSS 적용 절대:

   #bottom-footer {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
   }

   • 위치: 절대는 바닥글을 주요 콘텐츠와 독립적으로 배치됩니다.
   • bottom: 0은 바닥글이 아래쪽 가장자리에 정렬됩니다.
   • left: 0은 바닥글을 왼쪽 여백에 고정합니다.
   • width: 100%는 바닥글이 페이지의 전체 너비를 차지하도록 보장합니다.

다음 단계를 따르면 별도의 작업 없이 순수 CSS를 사용하여 고정 바닥글을 만들 수 있습니다. 플러그인 또는 복잡한 JavaScript. 이러한 접근 방식은 사용자 편의성을 높이고 웹사이트를 시각적으로 더욱 매력적으로 만드는 가볍고 효율적인 솔루션을 제공합니다.