홈페이지 떠있는 배너 만들기

안녕하세요! 안다형입니다!

오늘 준비한 웹사이트 꿀기능은 바로, 플로팅 배너입니다!

플로팅 배너는 웹사이트 내에서 눈에 띄게 배너를 띄우고 싶을 때 사용하는 기능으로 전달하고자 하는 내용을 효과적으로 보여줄 수 있습니다.

현재 우측 하단에 보면 배너가 떠 있을 텐데요, 그게 바로 플로팅 배너입니다. 이 플로팅 배너를 만들어보려고 하는데요, 누구나 어렵지 않게 따라할 수 있으니 한번 도전해보세요!

플로팅 배너 만들기 BASE CODE

 BASE HTML CODE

<div class="banner">
    <p>플로팅 배너 만들기</p>
</div>

 

먼저 banner 이라는 class를 지정하여 <div>태그를 만들고, 그 안에 내용을 작성해줍니다.

그리고는 CSS를 이용해 플로팅 배너답게 만들어 줘야겠죠?

 BASE CSS CODE

.banner {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 50px;
  background-color: #4CAF50;
  color: #fff;
  text-align: center;
  padding: 10px;
}

이렇게 하면 우측 하단에 플로팅배너가 생기게 됩니다.

 

position:fixed는 브라우저 창에서 고정된 위치를 의미합니다.

bottom과 right는 고정될 위치를 의미합니다.

width, height, background-color, color를 이용해 배너의 스타일을 조절할 수 있습니다.

text-align:center는 텍스트를 가운데 정렬하며 padding는 텍스트와 배너 사이의 간격을 조절합니다.

 

하지만 아직은 투박한 모습이기 때문에, 조금 더 예쁘게 디자인 해보도록 하죠.

플로팅 배너 디자인

디자인 CSS CODE

.banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  height: 80px;
  background-color: #4CAF50;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #888888;
}

.banner p {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
}

배너의 크기를 조절하고 테두리를 둥글게 만들기 위해 border-radius:10px를 추가합니다.
또 그림자를 추가하기 위해 box-shadow: 0px 0px 10px #888888;를 추가합니다.

<div class="banner">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
    <p>플로팅 배너 만들기</p>
</div>

플로팅 배너 CLOSE 버튼

그리고 계속 떠있게 두는 게 아닌 원하면 닫을 수 있게 클로즈 버튼도 만들어줍시다.

onclick 이벤트를 이용하여 클로즈 버튼을 누르면 배너의 display 속성을 "none"으로 바꿔서 배너를 숨길 수 있도록 합니다.

CLODE 버튼 CSS CODE

.closebtn {
  position: absolute;
  top: 5px;
  right: 10px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
}

클로즈 버튼도 CSS 적용 시켜줄게요.

position:absolute를 이용해 클로즈버튼을 배너 우측 상단에 위치 시킵니다.

top:5px와 right:10px를 이용해 위치를 조정할 수 있습니다. color로 텍스트 색상을 조절 할 수 있습니다.

 

그런데 닫을 때 그냥 닫혀버리는 게 아쉬운데요, 우측으로 페이드 아웃 되면서 사라지게 만들어보겠습니다.

페이드 아웃 되면서 닫히기

FADE OUT JAVASCRIPT CODE

// Get the banner
const banner = document.getElementsByClassName("banner")[0];

// Get the close button
const closebtn = document.getElementsByClassName("closebtn")[0];

// When the user clicks on the button, close the banner
closebtn.onclick = function() {
    // Add class "fadeout"
    banner.classList.add("fadeout");
    // Remove the banner after the animation
    setTimeout(function(){
        banner.style.display = "none";
    }, 500);
}

 

위 코드는 자바스크립트로 클로즈 버튼을 클릭하면 fadeout 되도록 하는 것입니다.

 

이제 CSS로 우측으로 이동하면서 fadeout 애니메이션이 동작하게 만들어주겠습니다.

FADE OUT CSS CODE

.fadeout {
    animation: fadeout 0.5s;
}

@keyframes fadeout {
    from {
        right: 0;
    }
    to {
        right: -300px;
        opacity: 0;
    }
}

animation 프로퍼티를 이용하여 fadeout 효과를 줍니다.

animation-name을 "fadeout"으로 지정하고, animation-duration을 "0.5s"로 지정합니다.

@keyframes를 이용하여 fadeout 효과를 구현합니다.

시작 상태에서는 right 값이 0이고, 끝 상태에서는 right 값이 -300px, opacity 값이 0으로 지정하여 사라지게 만들어줍니다.

제목과 내용이 구분되게 만들기

어느정도 플로팅 배너의 모습을 갖추었는데요, 제목과 내용이 구분되도록 해보겠습니다.

HTML CODE

<div class="banner">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
    <h3>플로팅 배너 제목</h3>
    <p>플로팅 배너 만들기</p>
</div>

h3 태그로 제목을, 그리고 p 태그에 내용을 넣을 수 있도록 수정하였습니다.

CSS CODE

.banner h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.banner p {
  font-size: 16px;
}

CSS 또한 이렇게 바꿔주었습니다.

 

위 코드는 banner 내부에서 h3 태그의 폰트 크기를 20px로, 굵게 하며 밑여백을 10px로 지정합니다.
p 태그의 폰트 크기를 16px로 지정합니다.

이외에도 폰트, 색상, 배경색, 패딩, 마진 등을 조절하여 디자인을 완성할 수 있습니다.

 

내용이 달라짐에 따라서 플로팅 박스 height를 바꿔주어야 할 수 있는데요, 결과물을 확인하면서 적절한 크기를 맞춰주세요.

 

혹시 예시파일이 필요하다면 아래 파일을 첨부해두었으니 다운로드 받아서 자유롭게 사용하시면 됩니다.☺️

플로팅 배너 예시파일.html

0.00MB

 

 

 

×

공지사항은 여기에

안녕하세요 코딩하는 안다형입니다!
계속해서 다양한 정보들을 포스팅할게요!

×

공지사항은 여기에

안녕하세요 코딩하는 안다형입니다!
계속해서 다양한 정보들을 포스팅할게요!