네이버 쇼핑검색광고 상품 카드

쇼핑검색광고(쇼핑몰 상품형·제품 카탈로그형·쇼핑 브랜드형) 제안에서 상품 카드 노출 모습을 보여줄 때. 상품 카드 3개(광고 2, 일반 1), 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·제목·설명 문구와 오른쪽 4행 설명만 교체. 사진 자리는 회색 상자(.g) 유지. 금액은 넣지 않음. 가격 자리는 진회색 막대로 표시(금액 미기재). 광고 카드에는 "광고" 표기 유지.

네이버 쇼핑검색광고 상품 안내(searchad.naver.com), 네이버 쇼핑 검색 결과 화면. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mnvsh">
  <div class="lf">
    <div class="fr">
      <div class="ph mock "><div class="sb"><span>9:41</span><i></i></div><div class="nvh"><span class="nvn">N</span><div class="nvq">수분크림</div></div><div class="nvt"><span>전체</span><span>블로그</span><span>카페</span><span class="on">쇼핑</span><span>이미지</span><span>지식iN</span></div>
<div class="it"><div class="g" style="width:60px;height:60px">상품</div><div class="col f1" style="gap:3px"><p class="pn">모닝루틴 세라마이드 수분크림 80ml</p><div class="fx"><span class="ln" style="width:54px;height:9px;background:#c9c4bf"></span><span class="adb">광고</span></div><p class="t10 mu">모닝루틴 공식스토어 · 별점 4.8 · 리뷰 12,403</p><div class="fx" style="gap:4px"><span class="tg">무료배송</span><span class="tg">오늘출발</span></div></div></div><div class="it"><div class="g" style="width:60px;height:60px">상품</div><div class="col f1" style="gap:3px"><p class="pn">데일리덤 판테놀 진정 크림 50ml</p><div class="fx"><span class="ln" style="width:54px;height:9px;background:#c9c4bf"></span><span class="adb">광고</span></div><p class="t10 mu">데일리덤 · 별점 4.7 · 리뷰 8,112</p><div class="fx" style="gap:4px"><span class="tg">무료배송</span><span class="tg">오늘출발</span></div></div></div><div class="it"><div class="g" style="width:60px;height:60px">상품</div><div class="col f1" style="gap:3px"><p class="pn">수분 장벽 크림 기획 세트 2종</p><div class="fx"><span class="ln" style="width:54px;height:9px;background:#c9c4bf"></span></div><p class="t10 mu">뷰티온 · 별점 4.6 · 리뷰 3,560</p><div class="fx" style="gap:4px"><span class="tg">무료배송</span><span class="tg">오늘출발</span></div></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">네이버 · 쇼핑검색광고</p>
    <h3>쇼핑 영역 상단 상품 카드</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>통합검색 쇼핑 영역과 쇼핑 탭 검색 결과 상단</dd></div>
      <div><dt>과금 방식</dt><dd>클릭당 과금(CPC), 상품 단위 입찰</dd></div>
      <div><dt>소재 규격</dt><dd>상품명, 대표 이미지, 가격, 리뷰 수, 배송 정보가 상품 DB에서 자동 구성</dd></div>
      <div><dt>운영 포인트</dt><dd>광고주 유형에 따라 쇼핑몰 상품형, 제품 카탈로그형, 쇼핑 브랜드형 중 선택. 상품명과 대표 이미지가 클릭률 좌우</dd></div>
    </dl>
  </div>
</div>

.dk-mnvsh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center}
.dk-mnvsh .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mnvsh .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mnvsh .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mnvsh .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mnvsh .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mnvsh .rt .dk-lb{margin:0 0 4px}
.dk-mnvsh .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mnvsh .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mnvsh .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-mnvsh .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mnvsh .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mnvsh .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-mnvsh .ph.n{width:232px}
.dk-mnvsh .ph.dkm{background:#242424;color:#fff}
.dk-mnvsh .ph>*{flex:none}
.dk-mnvsh p{margin:0}
.dk-mnvsh .ph b{color:inherit;font-weight:700}
.dk-mnvsh .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mnvsh .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mnvsh .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px}
.dk-mnvsh .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mnvsh .fx{display:flex;align-items:center;gap:6px}
.dk-mnvsh .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mnvsh .sp{justify-content:space-between}
.dk-mnvsh .f1{flex:1;min-width:0}
.dk-mnvsh .t9{font-size:9px}
.dk-mnvsh .t10{font-size:10px}
.dk-mnvsh .t12{font-size:12px}
.dk-mnvsh .t13{font-size:13px}
.dk-mnvsh .bd{font-weight:700}
.dk-mnvsh .mu{color:#8b8f94}
.dk-mnvsh .hr{height:6px;background:#f0f1f3}
.dk-mnvsh .pd{padding:8px 12px}
.dk-mnvsh .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mnvsh .ic.o{border-radius:50%}
.dk-mnvsh .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}

.dk-mnvsh .nvh{display:flex;align-items:center;gap:8px;padding:4px 12px 6px}
.dk-mnvsh .nvn{width:20px;height:20px;border-radius:5px;background:#03c75a;color:#fff;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
.dk-mnvsh .nvq{flex:1;height:26px;border:1.5px solid #03c75a;border-radius:13px;padding:0 12px;display:flex;align-items:center;font-size:12px;font-weight:600}
.dk-mnvsh .nvt{display:flex;gap:12px;padding:4px 12px 0;border-bottom:1px solid #e9ebee;font-size:11px;color:#666}
.dk-mnvsh .nvt span{padding-bottom:5px}
.dk-mnvsh .nvt .on{color:#03c75a;font-weight:700;border-bottom:2px solid #03c75a}
.dk-mnvsh .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none}
.dk-mnvsh .ttl{color:#0b53c1;font-size:13px;font-weight:600;line-height:1.3}
.dk-mnvsh .chip{font-size:10px;color:#0b53c1;border:1px solid #dfe3e8;border-radius:11px;padding:1px 8px}
.dk-mnvsh .sec{font-size:12px;font-weight:700;padding:8px 12px 2px}

.dk-mnvsh .it{padding:8px 12px;border-bottom:1px solid #eef0f2;display:flex;gap:10px}
.dk-mnvsh .pn{font-size:12px;line-height:1.3}
.dk-mnvsh .tg{font-size:9px;color:#03a94d;border:1px solid #bfe9cf;border-radius:3px;padding:0 3px}