디자인킷 · 지면 목업
오픈마켓 검색 결과 키워드 광고
D-목업-오픈마켓-검색결과광고
언제 쓰는가
지마켓·옥션·11번가 제안에서 검색 결과 상단 광고 구좌를 보여줄 때. 화면 1개, 상품 4개(광고 2). 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 광고 구좌 이름은 플랫폼에 맞게 교체(지마켓·옥션 파워클릭, 11번가 포커스클릭). 광고 상품 2개 고정.
참고
지마켓·옥션 ESM PLUS 광고센터 파워클릭 안내, 11번가 광고센터 포커스클릭 안내와 지면 개편 공지(i-boss.co.kr/ab-6141-49573 등 셀러 커뮤니티 정리). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.
조각
<div class="dk dk-momsr">
<div class="lf">
<div class="fr">
<div class="ph mock "><div class="sb"><span>9:41</span><i></i></div><div class="q">접이식 리포머</div><div class="fl2"><span class="on">추천순</span><span>판매 인기순</span><span>낮은 가격순</span><span>리뷰 많은순</span></div>
<div class="sec"><span>파워클릭</span><span class="adb" style="font-weight:500">광고</span></div>
<div class="it"><div class="g" style="width:58px;height:58px">상품</div><div class="col f1" style="gap:3px"><p class="t11" style="line-height:1.3">숲길핏 접이식 리포머 미니 가정용</p><span class="pr" style="width:54px"></span><div class="fx" style="gap:4px"><span class="tg">무료배송</span><span class="tg">적립</span><span class="t9 mu">리뷰 1,204</span></div></div></div>
<div class="it"><div class="g" style="width:58px;height:58px">상품</div><div class="col f1" style="gap:3px"><p class="t11" style="line-height:1.3">홈핏 폴딩 리포머 입문형</p><span class="pr" style="width:46px"></span><div class="fx" style="gap:4px"><span class="tg">무료배송</span><span class="t9 mu">리뷰 388</span></div></div></div>
<div class="sec"><span>일반 상품</span></div>
<div class="it"><div class="g" style="width:58px;height:58px"></div><div class="col f1" style="gap:3px"><p class="t11">필라테스 리포머 스튜디오형</p><span class="pr" style="width:60px"></span><span class="t9 mu">리뷰 96</span></div></div>
</div>
</div>
<p class="cap">구성 예시, 실제 소재 아님</p>
</div>
<div class="rt">
<p class="dk-lb">오픈마켓 · 파워클릭 · 포커스클릭</p>
<h3>검색 결과 상단 키워드 광고</h3>
<dl>
<div><dt>노출 위치</dt><dd>지마켓·옥션·11번가 검색 결과 상단 광고 구좌. 카테고리, 상품 상세, 외부 제휴 매체로 확장 노출</dd></div>
<div><dt>과금 방식</dt><dd>클릭당 과금. 순위는 입찰가와 품질 평가 합산, 실제 과금은 설정한 입찰 금액 이내</dd></div>
<div><dt>소재 규격</dt><dd>대표 이미지, 상품명, 표시 가격, 부가 혜택(무료배송·적립). 광고그룹명 최대 50자</dd></div>
<div><dt>운영 포인트</dt><dd>전환이 없으면 가격, 부가 혜택, 유입 첫 화면, 입찰가 순으로 점검. 지면별 성과 분리, 셀러 등급 관리</dd></div>
</dl>
</div>
</div>스타일
.dk-momsr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center}
.dk-momsr .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-momsr .fr{display:flex;gap:18px;align-items:flex-start}
.dk-momsr .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-momsr .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-momsr .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-momsr .rt .dk-lb{margin:0 0 4px}
.dk-momsr .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-momsr .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-momsr .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-momsr .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-momsr .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-momsr .rt.tight dl div{padding:10px 0;grid-template-columns:76px minmax(0,1fr);gap:var(--s3)}
.dk-momsr .rt.tight dd{font-size:var(--f-sm)}
.dk-momsr .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-momsr .ph.n{width:232px}
.dk-momsr .ph.s{width:190px}
.dk-momsr .ph.xs{width:150px;height:316px;border-width:4px;border-radius:18px;font-size:10px}
.dk-momsr .ph.dkm{background:#242424;color:#fff}
.dk-momsr .ph>*{flex:none}
.dk-momsr p{margin:0}
.dk-momsr .ph b,.dk-momsr .pc b,.dk-momsr .tv b{color:inherit;font-weight:700}
.dk-momsr .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-momsr .xs .sb{padding:5px 12px 2px;font-size:9px}
.dk-momsr .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-momsr .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px;text-align:center}
.dk-momsr .gd{background:#3a3a3a;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:9px;text-align:center}
.dk-momsr .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-momsr .pr{display:block;height:9px;border-radius:3px;background:#c9c4bf}
.dk-momsr .fx{display:flex;align-items:center;gap:6px}
.dk-momsr .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-momsr .sp{justify-content:space-between}
.dk-momsr .f1{flex:1;min-width:0}
.dk-momsr .t8{font-size:8px}
.dk-momsr .t9{font-size:9px}
.dk-momsr .t10{font-size:10px}
.dk-momsr .t12{font-size:12px}
.dk-momsr .t13{font-size:13px}
.dk-momsr .bd{font-weight:700}
.dk-momsr .mu{color:#8b8f94}
.dk-momsr .hr{height:6px;background:#f0f1f3}
.dk-momsr .pd{padding:8px 12px}
.dk-momsr .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-momsr .ic.o{border-radius:50%}
.dk-momsr .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}
.dk-momsr .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none;white-space:nowrap}
.dk-momsr .rel{position:relative}
.dk-momsr .pin{position:absolute;z-index:6;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;line-height:1;letter-spacing:0}
.dk-momsr .nw{white-space:nowrap}
.dk-momsr .q{margin:4px 10px 6px;height:30px;border:2px solid #222;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:600}
.dk-momsr .fl2{display:flex;gap:10px;padding:2px 12px 6px;font-size:10px;color:#666;border-bottom:1px solid #eee}
.dk-momsr .fl2 .on{color:#111;font-weight:700}
.dk-momsr .it{display:flex;gap:9px;padding:8px 10px;border-bottom:1px solid #f0f0f0}
.dk-momsr .sec{display:flex;justify-content:space-between;padding:6px 12px 0;font-size:10px;font-weight:700}
.dk-momsr .tg{font-size:9px;color:#555;background:#f2f3f5;border-radius:3px;padding:0 4px}