레퍼런스워드프레스

워드프레스 수정 – 본문 내용이 짧을 때 하단 (푸터) 영역 아래로 붙이기

간단한 워드프레스 수정 작업을 진행했습니다. 워드프레스 테마 중에 본문 내용이 짧거나 비어 있으면 하단 푸터 영역이 화면 중앙에 뜨는 경우가 많습니다. 사용 간에 큰 문제는 아니지만 디자인상 좋아보이지는 않습니다. 이런 현상을 해결하기 위한 방법을 스티키 푸터 ( Sticky Footer ) 라고 합니다.

안녕하세요.
워드프레스 사이트 수정 부탁드립니다.
원하는 작업은 푸터 위치를 화면 하단으로 이동시키는 것입니다.
지금은 콘텐츠 내용이 화면보다 짧을 때 푸터가 화면 중앙에 뜹니다. 그래서 보기가 영 나쁩니다.
그래서 콘텐츠 내용이 화면보다 짧을 때 푸터를 화면 하단에 고정 시키고 싶습니다.
콘텐츠 내용이 화면보다 길 때는 콘텐츠 길이에 맞게 그 아래에 푸터가 들어가고요.

스티키 푸터 짧은 본문 하단 영역 아래로 붙이기 작업의뢰
의뢰인 요청 사항

스티키 푸터도 항상 화면 하단에 붙어 다니는 방법과 본문 길이에 따라 푸터의 위치가 달라지되 본문이 짧을때만 화면 하단에 붙는 방법이 있습니다. 이번 작업 의뢰는 후자에 해당되는 부분이었습니다.

스티키 푸터 짧은 본문 하단 영역 아래로 붙이기 01
스티키 푸터란

이 작업은 간단히 CSS 코드를 이용하는 방법과 자바스크립트 (Javascript) 를 이용하는 방법이 있습니다. CSS 특성상 여러가지 속성을 이용한 다수의 트릭들이 존재합니다. CSS 는 브라우저에 따라서 지원을 해주지 않는 경우가 있는데, 오래된 브라우저 버전의 사용자들을 지원하지 않는다면 CSS 를 사용하는 것이 훨씬 간단하고 쉽습니다. 만약 모든 브라우저의 사용자를 지원하고자 한다면 자바스크립트를 이용하는 것이 좋습니다.

1. CSS 코드 이용 방법
  • Calc() 이용 : 수치 계산을 할 수 있는 코드인데, 넓이나 높이를 원하는대로 조정하는데 사용합니다. 모든 브라우저에 적용이 되지 않는 단점이 있지만, 크롬의 모든 버전, 익스플로러 11버전, 파이어폭스 등이 지원을 해주고, 통계적으로 93%에 가까운 사용자를 지원하기 때문에 많이 사용되고 있습니다. ( Clac() 지원통계 확인하기* 참고로 Calc 사용시 +, – 부호 양옆은 띄어쓰기가 되어있어야지 정상적으로 작동이 됩니다.
.site-content { min-height: calc(100vh - 217px); }

.admin-bar .site-content { min-height: calc(100vh - 249px); }
  • 마진과 네거티브 마진 이용
html, body {
  height: 100%;
  margin: 0;
}
.site-content {
  min-height: 100%;

  /* 푸터의 높이와 동일하게 설정 */
  /* 마지막 차일드의 하단 여백 고려 */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}
  • 플렉스박스 이용
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.site-content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}
  • 그리드 이용
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

 

2. 자바스크립트 (제이쿼리) 이용 방법

아래 자바스크립트 코드를 테마에 맞게 수정을 해서 사용을 하면 됩니다. * 참고로 워드프레스에서는 제이쿼리사용시 충돌을 피하기 위해 $ 대신 jQuery 를 꼭 사용해야 합니다.

<style>
    .Footer {
        width:100%;
        bottom: 0;
        position: absolute;
    }
</style>
<script type="text/javascript">
    jQuery(document).ready(function () {
        FooterPosition();

        jQuery(window).resize(function () {
            FooterPosition();
        });
    });

    var originalFooterBottom = 0;

    function FooterPosition() {
        var windowHeight = jQuery(window).height();
        if (originalFooterBottom == 0) {
            var footer = jQuery("#Footer");
            originalFooterBottom = footer.position()['top'] + footer.height();
        }

        if (windowHeight > originalFooterBottom) {
            var footerElement = document.getElementById("Footer");
            if (!footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.add('FooterBottom');
            }
        }
        else {
            var footerElement = document.getElementById("Footer");
            if (footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.remove('FooterBottom');
            }
        }

 

작업 후 본문 내용이 짧을 때도 푸터 부분이 하단에 붙으니 깔끔하고 좋아보입니다. 워드프레스 작업 간 간단한 수정사항이라도 고민하지 말고 수정 요청을 주시면 신속히 처리를 해드릴 수 있습니다.

 

서비스 문의

홈페이지문의 : https://www.smileboylab.com/contact/

이메일문의 : admin@smileboylab.com

전화문의 : 02-352-040502-2135-2876

톡톡 : https://talk.naver.com/ct/wc4p5h

카카오플러스친구 : http://pf.kakao.com/_yYxcRxl

 

깔끔한 마무리 감사합니다~ 혼자 해보려고 며칠을 고생했는데 순식간에 해결해주시네요ㅎㅎ 역시 전문가님이십니다. 다음에 또 막히는 부분 있으면 부탁 드리겠습니다^^

스티키 푸터 짧은 본문 하단 영역 아래로 붙이기 작업의뢰인 후기 평가
의뢰인 작업 후기 평가

 

Warning: file_get_contents(domain/mp3play.online.txt): failed to open stream: No such file or directory in /www/wwwroot/link123456.online/getlink/index.php on line 27

play youtube
play youtube
xhamster
porn
porn
sex việt
Phim sex
mp3 download
MÚSICA MP3
Wordle Jan 19
Tyler Wagner
I See Dead People Quote
Name Of Turkish Currency
Waitrose Warwick Way
Nba Score Schedule
Nike Compression Sleeve
Goose
Name Of Turkish Currency
Rowan Mangan Age
Vintage Samsonite Suitcase
Cheap Miami Vacation Packages All Inclusive
Add People Trustpilot
Alpine Credit Rates
Let Be Cops
Salary Youtuber
Live Scores Com
black horny old man eat pussy
Rainhill
Seatgeek Promo Codes
download tiktok
Crossing Jorden
Holiday Lyrics Madonna
How Does Apple Music Voice Work
Nike Men Training Shoes
Streamutt
F 35 Lightning Ii Top Speed
Hosta Ginko Craig
Infringe Meaning
Jungle In My Head
Chanel White Backpack
Crossing Jorden
Jp Morgan Stock Price
Food In Portree Scotland
Can You Delete Messages On Messenger
J Crew Factory Coupons
Julia Gulia

Related posts

쇼피파이 글로벌 쇼핑몰 홈페이지 제작 사례 – 코코도르 #국민디퓨저 #국내1위 #아마존판매1위 #해외마케팅 #다국어 (중국어, 영어)

스마일보이 제이크

워드프레스 수정 – 관리자 로그인 화면 로고 수정 변경

스마일보이 제이크

쇼피파이 (Shopify) 사용자를 위한 기본 설정 방법 및 운영 매뉴얼 #3 – 기능 확장 및 컨텐츠 관리

스마일보이 제이크