<!-- 배너 위치 설정 --> <style> /* 배너1 위치 설정 */ .floBanPc1 { position: fixed; top: 128px; /* 윗쪽 끝에서부터의 거리 0=위쪽 끝 , 1=최 하단, 00px로 세부 조절*/ right: 0; /* 오른쪽 끝에서부터의 거리 0=오른쪽끝, 1=왼쪽끝, 00px로 세부 조절*/ z-index: 99; }
/* 배너2 위치 설정 */ .floBanPc2 { position: fixed; top: 204px; /* 윗쪽 끝에서부터의 거리 0=위쪽 끝 , 1=최 하단, 00px로 세부 조절*/ right: 0; /* 오른쪽 끝에서부터의 거리 0=오른쪽끝, 1=왼쪽끝, 00px로 세부 조절*/ z-index: 99; }
</style>
<!-- 배너1 세부 설정 --> <div class="floBanPc1 hidden-md hidden-sm hidden-xs hidden-lg hidden-md-down"> <a href="https://pf.kakao.com/_ImGtxj" target="_blank"> <!-- 베너 링크--> <img src="https://tripbox.speedgabia.com/1/Banner/001.png" width="80px" height="80px"> <!-- 베너 이미지 경로--, 이미지 크기> </a> </div>
<!-- 배너2 세부 설정 --> <div class="floBanPc2 hidden-md hidden-sm hidden-xs hidden-lg hidden-md-down"> <a href="https://pf.kakao.com/_ImGtxj" target="_blank"> <!-- 베너 링크--> <img src="https://tripbox.speedgabia.com/1/Banner/002.png" width="80px" height="80px"> <!-- 베너 이미지 경로--, 이미지 크기> </a> </div>
| 
1. 사전 준비사항
① 이미지 업로드 전용 페이지를 만들기 위해 사이트 상세 디자인 메뉴에서 웹페이지를 신규로 생성하고 페이지를 숨김 처리합니다.
② 숨김 처리된 이미지 업로드 전용 페이지에 이미지 배너 컴포넌트를 통해 배너에 사용할 이미지를 업로드 합니다.
③ 이미지를 페이지에 적용한 후 해당 페이지에 접속하여 이미지를 우클릭 하면 이미지 경로를 확인할 수 있습니다.
2. 스크립트 작성하기
<!-- 배너 위치 설정 -->
<style>
/* 배너1 위치 설정 */
.floBanPc1 {
position: fixed;
top: 128px; /* 윗쪽 끝에서부터의 거리 0=위쪽 끝 , 1=최 하단, 00px로 세부 조절*/
right: 0; /* 오른쪽 끝에서부터의 거리 0=오른쪽끝, 1=왼쪽끝, 00px로 세부 조절*/
z-index: 99;
}
/* 배너2 위치 설정 */
.floBanPc2 {
position: fixed;
top: 204px; /* 윗쪽 끝에서부터의 거리 0=위쪽 끝 , 1=최 하단, 00px로 세부 조절*/
right: 0; /* 오른쪽 끝에서부터의 거리 0=오른쪽끝, 1=왼쪽끝, 00px로 세부 조절*/
z-index: 99;
}
</style>
<!-- 배너1 세부 설정 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs hidden-lg hidden-md-down">
<a href="https://pf.kakao.com/_ImGtxj" target="_blank"> <!-- 베너 링크-->
<img src="https://tripbox.speedgabia.com/1/Banner/001.png" width="80px" height="80px"> <!-- 베너 이미지 경로--, 이미지 크기>
</a>
</div>
<!-- 배너2 세부 설정 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs hidden-lg hidden-md-down">
<a href="https://pf.kakao.com/_ImGtxj" target="_blank"> <!-- 베너 링크-->
<img src="https://tripbox.speedgabia.com/1/Banner/002.png" width="80px" height="80px"> <!-- 베너 이미지 경로--, 이미지 크기>
</a>
</div>
3. 모바일에서는 숨김 처리하기
<!-- 모바일에서는 안보이게 -->
<style>
@media (max-width: 767px) {
.floBanPc1, .floBanPc2 {
display: none;
}
}
</style>
4. 특정 페이지에서만 베너 보이게 하기