베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

푸터(하단 DIV 요소) 고정 CSS

Last Updated: 2019년 11월 23일 | 댓글 남기기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

CSS를 사용하여 간단하게 하단에 DIV 요소를 고정할 수 있습니다.

Sticky div bottom css

위 그림에서는 워드프레스의 footer.php 파일 맨 아래에 div 요소를 하단 중앙에 정렬한 예를 보여줍니다. 이를 위해서는 다음과 비슷한 코드를 header.php나  footer.php 파일 등의 적당한 곳에 추가합니다. 반드시 차일드 테마를 만들어 작업하세요.

<div id="fixedfooter">
<div class="inner">Sticky Bottom DIV element</div>
</div>

그리고 다음과 비슷한 CSS 코드를 추가합니다.

#fixedfooter {
position:fixed;
left:0px;
bottom:0px;
width: 100%;
text-align: center;
}
.inner {
background:#1E299D;
color: white;
width: 200px;
padding: 15px;
display: inline-block;
}

워드프레스에서 테마 파일을 수정하지 않고 테마 함수 파일에 코드를 추가하고 싶은 경우 다음과 같은 코드를 테마 함수 파일에 추가할 수 있습니다. (이 경우에도 자식 테마를 만들어 작업하세요.)

// HTML to wp_footer()에 추가
function child_theme_footer_script() { ?>
<!-- HTML 코드 추가하기 -->
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );

만약 모바일 기기 하단에 고정된 배너 표시하고 싶은 경우 CSS 미디어 쿼리(media query)를 사용하여 모바일 기기에서만 표시되도록 하고 PC에서는 숨길 수 있습니다. 다음 글을 참고해보세요:

워드프레스에서 CSS 코드를 추가하고 싶은 경우 이 글을 참고하여 사용자 CSS 코드를 추가할 수 있습니다. (테마 파일 내의 스타일시트 파일을 수정하지 말고 차일드 테마를 만들고 CSS를 추가하거나 워드프레스 알림판 내에서 추가하시기 바랍니다.)

참고



댓글 남기기

Leave a Comment