startup-7days: (검토요청) 배너 소스 프로그래밍 - 가이드 및 코딩/ 오픈 소스 웹 배너 또는 랜딩 페이지/ 배너 생성하기

코딩 : https://imweb.me/faq?mode=view&category=29&category2=38&idx=71277

교육자료

샘플 이미지에 사용된 배너 이미지를 사용할 수 있습니다. 있는 그대로 사용하셔도 되며 필요에 따라 수정해 사용하세요.

파일 형식: 62.9KB, ZIP 압축파일 (다운로드)
파일 구성: PNG, PSD

- https://imweb.me/faq?mode=view&category=28&category2=31&idx=5890

1	메뉴 관리	새로운 메뉴를 생성하거나 삭제, 이동, 구조 확인 시 사용합니다.
2	위젯 추가	새로운 위젯 추가 시 사용합니다.
3	섹션 추가	현재 페이지에 새로운 섹션을 추가합니다.
4	마지막 게시 시점으로 되돌리기	마지막으로 게시하기 버튼을 클릭한 시점으로 작업상태를 되돌립니다.
5	현재 언어 및 메뉴 경로	현재 편집 중인 사이트의 언어 및 메뉴의 경로를 표시합니다.
6	현재 메뉴명	현재 편집 중인 페이지의 이름을 표시합니다.
7	메뉴 설정	메뉴의 이름을 변경, 검색엔진 최적화용 설명 추가, 접근 권한 설정, 메뉴를 삭제합니다.
8	뷰포트 변경	데스크톱 편집 모드와 모바일 편집 모드를 전환합니다.
9	공통 디자인 설정	기본 서체 및 크기, 본문폭 등 사이트에 공통적으로 적용할 디자인을 설정합니다.
10	미리보기	새 브라우저 탭을 열어 현재 페이지가 실제 브라우저에서 어떻게 보이는지 확인합니다.
11	게시하기	게시하기를 누르면 작업한 사항들이 방문자들에게 볼 수 있도록 반영됩니다.
12	나가기	디자인 모드를 종료하고 대시보드로 이동합니다.
13	겹치기	상단 메뉴와 본문 배경을 겹치는 효과를 줄 수 있습니다.
14	상단설정	상단 디자인 편집 모드로 진입합니다.
15	도움말/문의	처음 사용자를 위한 디자인 모드 튜토리얼을 다시 보실 수 있습니다. 또한, 아임웹 가이드, 동영상 강의, 디자이너 찾기 메뉴로 이동할 수도 있습니다.

찾으시는 답변이 없으신가요? 조금 더 단순한 키워드로 가이드를 검색해 보세요.
운영시간 내 채팅상담은 링크를 통해 접속 가능합니다.

1단계: 배너 이미지 주소(URL) 획득하기

게시판에 배너 이미지를 올리고, 업로드한 배너 이미지의 주소(URL)를 복사해 활용할 수 있습니다. (사용 중인 자료실 게시판이 있는 경우 이 단계는 건너 뛸 수 있습니다.)

자료실 게시판에 이미지를 추가하고, 이미지 주소를 획득합니다. 게시판 활용방법
복사한 이미지 주소를 메모장에 보관해 둡니다.

2단계: 코드 복사 및 붙여넣기

내 사이트 관리자 페이지에 접속합니다. 접속방법
왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭합니다.
마우스 휠 스크롤을 내려, 페이지 하단 Footer Code로 이동합니다.

아래의 소스 코드 전체를 복사하여, Footer Code 작성 칸에 붙여넣습니다.

<!-- 플로팅 배너 CSS -->
<style>
/* PC 배너1 스타일 */
.floBanPc1 {
  position: fixed;
  top: 128px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
/* PC 배너2 스타일 */
.floBanPc2 {
  position: fixed;
  top: 204px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
/* 모바일 배너1 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 130px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
/* 모바일 배너2 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 80px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
</style>

<!-- 플로팅 배너 HTML -->
<!-- PC 배너1 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- PC 배너2 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- 모바일 배너1 -->
<div class="floBanMob1 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- 모바일 배너2 -->
<div class="floBanMob2 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>

```
-------------------------------
```

<!-- 플로팅 배너 CSS -->
<style>
/* PC 배너1 스타일 */
.floBanPc1 {
  position: fixed;
  top: 128px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
/* PC 배너2 스타일 */
.floBanPc2 {
  position: fixed;
  top: 204px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
/* 모바일 배너1 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 130px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
/* 모바일 배너2 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 80px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
</style>

<!-- 플로팅 배너 HTML -->
<!-- PC 배너1 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- PC 배너2 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- 모바일 배너1 -->
<div class="floBanMob1 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- 모바일 배너2 -->
<div class="floBanMob2 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>

-----------------------------------------------------------