네이버 성과형 디스플레이(스마트채널·피드)

성과형 디스플레이 제안에서 상단 띠 배너와 피드 카드 두 지면을 한 화면에 보여줄 때. 스마트채널 1, 피드 카드 1 고정. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·제목·설명 문구와 오른쪽 4행 설명만 교체. 사진 자리는 회색 상자(.g) 유지. 금액은 넣지 않음. 스마트채널 문구는 한 줄 20자 안팎. 1250×370 배너는 종료 규격이라 표기하지 않음.

네이버 성과형 디스플레이 광고 안내(ads.naver.com), 내부 매체 정리(피드 1200×1200·1200×1800, 배너 1250×560). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mnvda">
  <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" style="color:#aaa;font-weight:400">검색어를 입력해 주세요</div></div>
<div class="nvt"><span class="on">뉴스</span><span>연예</span><span>스포츠</span><span>쇼핑</span><span>경제</span></div>
<div class="sc"><div class="col f1"><p class="t12 bd">환절기 속건조, 크림 하나로 정리</p><p class="t10 mu">모닝루틴 <span class="adb">AD</span></p></div><div class="g" style="width:54px;height:40px;background:#e3e6ea">이미지</div></div>
<div class="cd"><div class="g" style="height:150px;border-radius:0">피드 이미지 1:1</div><div class="pd col" style="gap:3px"><p class="t12 bd">후기 1만 건이 고른 세라마이드 수분크림</p><div class="fx sp"><p class="t10 mu">모닝루틴 · 광고</p><span class="cta">구매하기</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) 또는 노출당(CPM) 입찰, 영상은 조회당(CPV)</dd></div>
      <div><dt>소재 규격</dt><dd>피드 이미지 1200×1200 또는 1200×1800, 배너 1250×560, 스마트채널은 좌측 문구와 우측 이미지</dd></div>
      <div><dt>운영 포인트</dt><dd>쇼핑·검색 이력 타겟과 검색광고 연동 리타겟. 화보형과 혜택형 소재 병행</dd></div>
    </dl>
  </div>
</div>

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

.dk-mnvda .nvh{display:flex;align-items:center;gap:8px;padding:4px 12px 6px}
.dk-mnvda .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-mnvda .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-mnvda .nvt{display:flex;gap:12px;padding:4px 12px 0;border-bottom:1px solid #e9ebee;font-size:11px;color:#666}
.dk-mnvda .nvt span{padding-bottom:5px}
.dk-mnvda .nvt .on{color:#03c75a;font-weight:700;border-bottom:2px solid #03c75a}
.dk-mnvda .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none}
.dk-mnvda .ttl{color:#0b53c1;font-size:13px;font-weight:600;line-height:1.3}
.dk-mnvda .chip{font-size:10px;color:#0b53c1;border:1px solid #dfe3e8;border-radius:11px;padding:1px 8px}
.dk-mnvda .sec{font-size:12px;font-weight:700;padding:8px 12px 2px}

.dk-mnvda .sc{margin:6px 10px;background:#f4f6f8;border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.dk-mnvda .cd{margin:6px 10px;border:1px solid #e9ebee;border-radius:10px;overflow:hidden}
.dk-mnvda .cta{font-size:10px;font-weight:700;color:#03a94d}