아임웹 팁&테크

다양한 활용법, 최신 기능을 알고 싶을 땐 아임웹 팁&테크

디자인플로팅 배너 소스 코드 및 편집 방법


시작에 앞서

플로우팅 배너를 추가하려면 HTML과 CSS 코드가 필요합니다. 이 강좌에서는 플로팅 배너 제작을 위한 소스 코드와 일부 편집 방법을 소개합니다. :)

*코드 편집 후 디자인 모드에서 적용하는 방법은 이 링크를 확인해보세요.




1단계, 소스 코드 다운로드

먼저 소스 코드를 다운로드 받으세요.

다운로드하기 >




2단계, 코드 열기

소스 코드 파일은 TXT 파일로 제작 되었으며, 메모장으로 열 수 있습니다.




3단계, 코드 편집하기

기본적으로 다운로드하신 소스 코드를, 코드 위젯에 붙여 넣으면 플로우팅 배너가 작동합니다. 그러나 우리는 사이트에 삽입하기 앞서 몇 가지 바꿔야 할 항목이 있습니다.

1) 빨간색 : 배너의 위치를 정할 수 있습니다. left는 좌측면, top은 상단으로부터의 거리를 가리킵니다.
2) 보라색 : 배너를 클릭하면 이동하는 주소(URL)를 입력해주세요.
3) 파란색 : 배너 이미지의 주소(URL)입니다. 게시판을 이미지 저장소로 쓰는 방법은 이 링크를 참조해보세요.
4) 녹색 : 배너의 크기입니다. 원본보다 작은 가로/세로 25% 크기로 설정되어 있습니다.

위 빨강/보라/파랑/녹색 텍스트는 마음에 드는 모양이 나올 때까지 얼마든지 수정 가능합니다.


<style>
/* 플러스친구 배너 위치 */
.fltBanner1 {
position: fixed;
left: 20px; /* 좌측면으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */
top: 260px; /* 상단으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */
display: block;
z-index: 999;
}
/* 전화걸기 배너 위치 */
.fltBanner2 {
position: fixed;
left: 20px; /* 좌측면으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */
top: 400px; /* 상단으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */
display: block;
z-index: 999;
}
</style>


<!-- 플러스친구 -->
<a href="http://pf.kakao.com/_xnVlxfxl" class="fltBanner1" target="_blank">
<img src="https://cdn.imweb.me/upload/S20170530592cf901c1430/5a5d4a959dc39.png" width="25%" height="25%">
</a>

<!-- 전화연락 -->
<a href="tel:02-123-1234" class="fltBanner2" target="_blank">
<img src="https://cdn.imweb.me/upload/S20170530592cf901c1430/5a5d4a9583340.png" width="25%" height="25%">
</a>