CSS를 사용하여 하단 배너 만들기

이 티스토리 블로그의 하단에는 배너가 표시되고 있습니다. 닫기 기능이 있는 배너의 경우 보통 Javascript를 사용하지만 이 블로그에 사용된 배너는 HTML/CSS만으로 구현되었습니다. Javascript를 이용하면 닫기를 누르면 하루 동안 표시되지 않도록 하는 것도 가능합니다.

하단 배너 만들기(Close 버튼 포함)

워드프레스의 경우 다양한 배너 플러그인이 있습니다. 예를 들어, Brave 플러그인을 사용하면 다양한 형식으로 팝업이나 배너를 표시하는 것이 가능합니다.

워드프레스 Brave 팝업 플러그인 설정 살펴보기

Brave나 Bloom과 같은 플러그인을 사용하면 배너를 클릭해야 콘텐츠를 볼 수 있는 콘텐츠 잠금 기능을 구현할 수 있습니다.

워드프레스: 쿠팡 배너를 클릭해야 글을 볼 수 있도록 설정하는 방법

자바스크립트를 사용한 배너(닫기 버튼 포함)

자바스크립트를 사용하여 닫기 버튼이 포함된 배너를 쉽게 구현할 수 있습니다.

자세한 코드는 Adding close button in div to close the box(상자를 닫는 닫기 버튼을 div에 추가하기) 문서에서 제시하는 예제를 참고할 수 있습니다.

기본적으로 다음과 같이 closeButton 요소를 클릭하면 배너 창에 [**display:none;**] 속성을 추가하여 제거할 수 있습니다(참조).

document.getElementById('closeButton').addEventListener('click', function(e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
}, false);

녹두장군님 블로그 글도 참고하여 응용할 수 있습니다.

자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법

CSS를 사용하여 하단 배너 만들기(닫기 버튼 포함)

이 블로그의 하단에는 CSS 코드를 이용한 Close 버튼이 포함된 배너가 표시되고 있습니다.

이렇나 기능을 구현하려는 경우 다음과 같은 jsfiddle 코드를 응용할 수 있습니다.

• http://jsfiddle.net/learningforever/7d6t9bep/1/

HTML 코드:

<div id="modalWindow">
  <div class="modal-header" data-closable="slide-out-up">
    <button class="close" aria-label="Dismiss alert" type="button" data-close onclick="document.getElementById('modalWindow').style.display='none';">
      <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
    </button>
  </div> 
  <div>
  모달 창 텍스트....
  </div>
</div>

CSS 코드:

/* 닫기 버튼 */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover {
  opacity: 1;
}

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

하단에 고정하려는 경우 배너 요소에 대하여 [**position:fixed;**]를 추가하면 됩니다.

    position: fixed;
    bottom: 0px;

상기 코드는 순수한 CSS는 아니고 클릭 시 배너 요소를 숨기는 자바스크립트가 사용되었습니다: [**onclick="document.getElementById('modalWindow').style.display='none';"**]

순수한 CSS 사용하여 배너 닫기

순수한 CSS를 사용하려는 경우 Hide A Div With CSS Only 문서에 제시된 코드를 활용할 수 있습니다. 

 CSS 코드:

#hide {
  display: none;
}
label {
  cursor: pointer;
  text-decoration: underline;
}
#hide:checked ~ #randomDiv {
  display: none;
}

 HTML 코드:

<input type="checkbox" id="hide" />
<div id="randomDiv">
  배너 내용
  <label for="hide">닫기</label>
</div>

예시:

• http://jsfiddle.net/learningforever/7d6t9bep/3/

참고

https://avada.tistory.com/2567

워드프레스 엘리멘터 페이지 빌더: 헤더나 푸터에 배너 고정하기

https://avada.tistory.com/1397

모바일 기기 하단에 고정된 배너 표시하기