소스작업 도와주실 고수님 찾습니다 ㅠㅠ
본문
www.리뷰단.com
사이트 메인화면 배너 리뷰가좋은이유 이용가이드를 누르면 아래 소스가 나오게끔 하고싶은데 방법좀 도와주세요 ㅠㅠ
<template id="guidePopup">
<div class="guide-popup">
<div class="popup-title">
<h2>리뷰어 이용 가이드</h2>
</div>
<div class="popup-content">
<div class="guide-content">
<div class="item">
<div class="image">
<img src="/img/logo.png" alt="image">
</div>
<div class="desc">
<div class="title">
<h4>캠페인 신청</h4>
</div>
<div class="text">
<ul>
<li>방문가능일정을 확인하고 신중하게 신청해주세요</li>
<li>선정율을 높이기 위해 캠페인 특성에 맞는 리뷰어님만의 매력을 어필해주세요</li>
<li>별도의 요청사항이 있는 경우 함께 기재해주세요 <span>( ex : 오후 5시에 입실해도 될까요 )</span></li>
<li>선정된 후에는 기간 연장이나 취소는 불가합니다</li>
</ul>
<div class="guide-tip">
<p>
<a href="/mypage?p=connectSNS">SNS 계정 연동</a>은 하셨나요?<br>
계정을 연동하지 않으면 캠페인 신청이 제한됩니다.
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/img/logo.png" alt="image">
</div>
<div class="desc">
<div class="title">
<h4>리뷰어 선정</h4>
</div>
<div class="text">
<ul>
<li>
리뷰어로 선정되면 선정일 다음날 오전 11시에 문자메시지와 메일로 선정 알림이 발송됩니다<br>
[ 마이페이지] 🡢 선정된 캠페인에서 캠페인정보를 확인해주세요
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/img/logo.png" alt="image">
</div>
<div class="desc">
<div class="title">
<h4>방문하기</h4>
</div>
<div class="text">
<ul>
<li>리뷰가이드와 확정된 방문일정을 확인해주세요</li>
<li>리뷰 작성마감일은 방문예정일을 기준 7일 이후 날짜로 자동설정 됩니다<br>
<span>
( * 제출기간 연장이나, 방문 시간 조율, 취소 관련 문의 등
캠페인 상세페이지 내 담당자 연락처로 문의해주세요 )
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/img/logo.png" alt="image">
</div>
<div class="desc">
<div class="title">
<h4>리뷰 작성하기</h4>
</div>
<div class="text">
<ul>
<li>리뷰가이드에 기재된 내용을 참고하여 포스팅을 작성합니다</li>
<li>광고주님이 원하시는 내용이 누락되지 않게 주의 해주세요</li>
<li>대가성 문구 스폰서 배너 표기 필수 입력<br>
<span>
( 공정거래위원회 심사지침에 따라 대가성 여부가 필수로 표기되어야 합니다 )
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/img/logo.png" alt="image">
</div>
<div class="desc">
<div class="title">
<h4>리뷰 제출하기</h4>
</div>
<div class="text">
<ul>
<li>리뷰를 업로드하고, 리뷰 URL을 [마이페이지] 🡢 [선정 프로젝트] 🡢 [리뷰 제출하기] 버튼을 통해 제출해주세요</li>
<li>캡쳐 이미지나 문서 제출이 필요한 경우 파일 첨부 기능을 이용하세요</li>
</ul>
</div>
</div>
</div>
</div>
<div class="popup-bottom-button">
<button type="button" class="btn" onclick="location.href='/campaign'">캠페인 신청하러가기</button>
</div>
</div>
</div>
이용가이드 소스는 이렇게 되어 있습니다.
<p>리뷰가 좋은이유 이용가이드</p>
</li>
<li role="presentation" class="">
<div class="thumb">
<div class="img">
<img
src="skin/adblog/html/theme/rp/img/main-sum02.jpg"
alt=""
/>
</div>
<div class="thumb_line">
<svg width="100%" height="100%">
<rect
x="0"
y="0"
rx="8"
ry="8"
width="100%"
height="100%"
></rect>
</svg>
</div>
</div>
<p>위젯달면, 선물이 팡 팡 !</p>
</li>
<li role="presentation" class="">
<div class="thumb">
<div class="img">
<img
src="skin/adblog/html/theme/rp/img/main-sum03.jpg"
alt=""
/>
</div>
<div class="thumb_line">
<svg width="100%" height="100%">
<rect
x="0"
y="0"
rx="8"
ry="8"
width="100%"
height="100%"
></rect>
</svg>
</div>
</div>
<p>광고주 정회원 신청하기</p>
</li>
</ul>
</div>
</div>
답변 2
다음을 참고하셔서 원하시는 형식으로 가공하시면 가능하지 않을까 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트 메인화면</title>
<!-- 여기에 CSS 링크 추가 -->
<style>
/* 여기에 CSS 스타일 추가 */
</style>
</head>
<body>
<!-- 메인화면 배너 등의 HTML 코드 -->
<!-- 이용가이드 팝업 -->
<template id="guidePopup">
<!-- 이용가이드에 해당하는 HTML 소스 추가 -->
<!-- 예시로 주어진 소스를 여기에 추가 -->
</template>
<ul>
<!-- 메뉴 항목들 -->
<li><a href="#" id="guideLink">이용가이드</a></li>
<!-- 다른 메뉴 항목들도 추가할 수 있음 -->
</ul>
<!-- 여기에 JavaScript 추가 -->
<script>
// 이용가이드를 클릭할 때 팝업을 띄우는 이벤트 처리
document.getElementById('guideLink').addEventListener('click', function() {
// 이용가이드 팝업을 가져와서 화면에 표시
var guidePopupTemplate = document.getElementById('guidePopup');
var guidePopup = document.importNode(guidePopupTemplate.content, true);
document.body.appendChild(guidePopup);
});
</script>
</body>
</html>
어떻게 적용하고 싶은지 두서가 없고
소스는 개판입니다. 소스 정리부터 하세요.
이렇게 대충 올리면 누가 도와주고 싶을까요...
답변을 작성하시기 전에 로그인 해주세요.