상단 띠배너 추가하기
프로모션이나 기획전 등, 눈에 띄는 곳에 배너를 걸어두고 싶을때
띠배너로 홍보하는 경우가 많습니다.
띠배너를 추가하는 방법에 대해 안내해드리겠습니다.
1. 스마트디자인 편집창을 열어, HTML 코드를 추가합니다.
1) 화면을 선택합니다.
2) 배너 추가를 원하는 위치에 아래와 같이 html 코드를 추가합니다.
<!-- 띠 배너 -->
<div class="promotionBanner">
<a href="#none" class="bannerLink">
<img src="http://sdsupport.cafe24.com/img/guide/tip/img_banner.gif" alt="배너 내용을 적어주세요." /><!-- 원하는 배너 이미지로 변경 -->
</a>
<a href="#none" class="btnClose"><img src="http://sdsupport.cafe24.com/img/guide/tip/btn_close.png" alt="배너 닫기" /></a>
</div>
<!--// 띠 배너 -->
띠 배너 이미지와 닫기버튼 이미지는 원하는 이미지로 교체해서 사용하세요.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2. common.css에 css를 추가합니다.
1) 레이아웃(layout) > 기본레이아웃(basic) > css > common.css 파일을 엽니다.
2) 아래와 같이 css를 추가합니다.
/ * 띠 배너 css * /
.promotionBanner { position:relative; overflow:hidden; text-align:center; background:pink; }
.promotionBanner .bannerLink { display:block; }
.promotionBanner .btnClose { position:absolute; top:5px; left:50%; margin-left:590px; }
닫기버튼의 위치나 배너의 배경 등은 디자인에 맞게 변경해서 사용하세요.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3. basic.js에 js를 추가합니다.
1) 레이아웃(layout) > 기본레이아웃(basic) > js > basic.js 파일을 엽니다.
2) 아래와 같이 js를 추가해줍니다.
/ * 띠 배너 js * /
var bannerFunc = function(){
$('.promotionBanner .btnClose').bind("click", function(){
$('.promotionBanner').animate({height: 0}, 500);
});
};
$(function($){
bannerFunc();
});
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
띠 배너가 추가 되었습니다.
html코드를 넣는 위치에 따라, 중간에도 띠배너 설치가 가능합니다.
