작은 배너 코드

<!-- 플로팅 배너 CSS -->

<style>

/* PC 배너1 스타일 */

.floBanPc1 {

  position: fixed;

  top: 136px; /* 윗쪽 끝에서부터의 거리 */

  right: -55;

  z-index: 99;

}

/* PC 배너2 스타일 */

.floBanPc2 {

  position: fixed;

  top: 212px; /* 윗쪽 끝에서부터의 거리 */

  right: -55;

  z-index: 99;

}

  /* PC 배너3 스타일 */

.floBanPc3 {

  position: fixed;

  top: 288px; /* 윗쪽 끝에서부터의 거리 */

  right: -55;

  z-index: 99;

}

  /* PC 배너4 스타일 */

.floBanPc4 {

  position: fixed;

  top: 364px; /* 윗쪽 끝에서부터의 거리 */

  right: -55;

  z-index: 99;

}

/* 모바일 배너1 스타일 */

.floBanMob1 {

  position: fixed;

  bottom: 176px; /* 아래 끝에서부터의 거리 */

  right: 0; /* 오른쪽 끝에서부터의 거리 */

  z-index: 99;

}

/* 모바일 배너2 스타일 */

.floBanMob2 {

  position: fixed;

  bottom: 130px; /* 아래 끝에서부터의 거리 */

  right: 0; /* 오른쪽 끝에서부터의 거리 */

  z-index: 99;

}

/* 모바일 배너3 스타일 */

.floBanMob3 {

  position: fixed;

  bottom: 84px; /* 아래 끝에서부터의 거리 */

  right: 0; /* 오른쪽 끝에서부터의 거리 */

  z-index: 99;

}

/* 모바일 배너4 스타일 */

.floBanMob4 {

  position: fixed;

  bottom: 38px; /* 아래 끝에서부터의 거리 */

  right: 0; /* 오른쪽 끝에서부터의 거리 */

  z-index: 99;

</style>

<!-- 플로팅 배너 HTML -->

<!-- PC 배너1 -->

<div class="floBanPc1 hidden-md hidden-sm hidden-xs">

  <a href="https://blog.naver.com/itsaeilblog" target="_blank">

    <img src="https://i.esdrop.com/d/f/q5WQHtWNa5/b43VyAKkdC.jpg" width="가로길이px" height="세로길이px">

  </a>

</div>

<!-- PC 배너2 -->

<div class="floBanPc2 hidden-md hidden-sm hidden-xs">

  <a href="http://pf.kakao.com/_xkuxcxaC" target="_blank">

    <img src="https://i.esdrop.com/d/f/q5WQHtWNa5/0bUnPRE9ql.jpg" width="가로길이px" height="세로길이px">

  </a>

</div>

<!-- PC 배너3 -->

<div class="floBanPc3 hidden-md hidden-sm hidden-xs">

  <a href="https://itsaeil.or.kr/Application" target="_blank">

    <img src="https://i.esdrop.com/d/f/fdgw5RJKkZ/KRoKnaM4uL.png" width="가로길이px" height="세로길이px">

  </a>

</div>

<!-- PC 배너4 -->

<div class="floBanPc4 hidden-md hidden-sm hidden-xs">

  <a href="https://itsaeil.or.kr/programmer" target="_blank">

    <img src="https://i.esdrop.com/d/f/fdgw5RJKkZ/rXn6SfETEy.png" width="가로길이px" height="세로길이px">

  </a>

</div>

<!-- 모바일 배너1 -->

<div class="floBanMob1 hidden-lg">

  <a href="https://blog.naver.com/itsaeilblog" target="_blank">

    <img src="https://i.esdrop.com/d/f/q5WQHtWNa5/vNPMyKDPHe.png" width="가로길이px" height="세로길이px">

  </a>

</div>

<!-- 모바일 배너2 -->

<div class="floBanMob2 hidden-lg">

  <a href="http://pf.kakao.com/_xkuxcxaC" target="_blank">

    <img src="https://i.esdrop.com/d/f/q5WQHtWNa5/O7Be9fmkW1.png" width="가로길이px" height="세로길이px">

  </a>

</div>

<!-- 모바일 배너3 -->

<div class="floBanMob3 hidden-lg">

  <a href="https://itsaeil.or.kr/Application" target="_blank">

    <img src="https://i.esdrop.com/d/f/fdgw5RJKkZ/QHIhfyyC8W.png" width="가로길이px" height="세로길이px">

  </a>

</div>

<!-- 모바일 배너4 -->

<div class="floBanMob4 hidden-lg">

  <a href="https://itsaeil.or.kr/programmer" target="_blank">

    <img src="https://i.esdrop.com/d/f/fdgw5RJKkZ/nCRJ1eJrIS.png" width="가로길이px" height="세로길이px">

  </a>

</div>