네이버 보장형 디스플레이 4개 지면

신제품 출시·행사 고지 제안에서 네이버 메인 보장형 지면 위치를 PC와 모바일로 나눠 보여줄 때. 화면 2개 고정, 지면 번호 4개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 번호 4개와 오른쪽 노출 위치 문구의 번호를 맞춤. 지면 상자는 초록 테두리 유지.

네이버 보장형 디스플레이 상품 해설(inside.ampm.co.kr/insight/13020, /insight/59073), 네이버 PC·모바일 메인 화면. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mnvgd">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">PC 메인</p><div class="pc mock"><div class="cr"><i></i><i></i><i></i><span>www.naver.com</span></div><div class="fx" style="padding:10px 16px 8px;gap:8px"><span class="nvn">N</span><div class="nvq">검색어를 입력해 주세요</div></div>
<div class="fx" style="padding:0 16px 8px;gap:10px;font-size:10px;color:#666"><span>메일</span><span>카페</span><span>블로그</span><span>쇼핑</span><span>뉴스</span><span>증권</span><span>지도</span></div>
<div class="fx" style="padding:0 16px;gap:10px;align-items:flex-start"><div class="col f1" style="gap:8px"><div class="bn" style="height:58px"><span class="pin" style="left:-8px;top:-8px">1</span>타임보드 · 브랜드 메시지와 영상</div><div class="box col" style="gap:5px"><p class="t10 bd">뉴스스탠드</p><div class="fx" style="gap:5px"><div class="g" style="flex:1;height:26px"></div><div class="g" style="flex:1;height:26px"></div><div class="g" style="flex:1;height:26px"></div><div class="g" style="flex:1;height:26px"></div></div><div class="fx" style="gap:5px"><div class="g" style="flex:1;height:26px"></div><div class="g" style="flex:1;height:26px"></div><div class="g" style="flex:1;height:26px"></div><div class="g" style="flex:1;height:26px"></div></div></div><span class="ln" style="width:70%"></span><span class="ln" style="width:52%"></span></div>
<div class="col" style="width:112px;gap:8px"><div class="box" style="text-align:center"><p class="t10 bd" style="color:#03c75a">네이버 로그인</p><p class="t9 mu">아이디 · 비밀번호 찾기</p></div><div class="bn" style="height:96px;flex-direction:column;gap:2px"><span class="pin" style="right:-8px;top:-8px">2</span><span>롤링보드</span><span class="t9" style="font-weight:500">나이·성별·시간·지역</span></div><span class="ln"></span></div></div></div></div>
      <div class="fc"><p class="fl">모바일 메인</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="fx" style="padding:6px 12px 8px;gap:6px"><span class="nvn">N</span><div class="nvq">검색어 입력</div></div>
<div style="padding:0 12px"><div class="bn" style="height:26px;justify-content:flex-start;padding:0 10px;font-size:9px"><span class="pin" style="right:-6px;top:-8px">4</span>헤드라인DA · 한 줄 문구</div></div>
<div class="fx sp" style="padding:10px 14px 8px"><span class="col" style="align-items:center;gap:3px"><i class="av" style="width:24px;height:24px"></i><span class="ln" style="width:20px;height:4px"></span></span><span class="col" style="align-items:center;gap:3px"><i class="av" style="width:24px;height:24px"></i><span class="ln" style="width:20px;height:4px"></span></span><span class="col" style="align-items:center;gap:3px"><i class="av" style="width:24px;height:24px"></i><span class="ln" style="width:20px;height:4px"></span></span><span class="col" style="align-items:center;gap:3px"><i class="av" style="width:24px;height:24px"></i><span class="ln" style="width:20px;height:4px"></span></span><span class="col" style="align-items:center;gap:3px"><i class="av" style="width:24px;height:24px"></i><span class="ln" style="width:20px;height:4px"></span></span></div>
<div style="padding:0 12px"><div class="bn" style="height:92px;flex-direction:column;gap:3px"><span class="pin" style="left:-6px;top:-8px">3</span><span>스페셜DA</span><span class="t9" style="font-weight:500">이미지 또는 영상 대형 배너</span></div></div>
<div class="pd col" style="gap:7px;padding-top:10px"><p class="t10 bd">뉴스 · 콘텐츠</p><div class="fx"><div class="g" style="width:44px;height:32px"></div><div class="col f1" style="gap:5px"><span class="ln" style="width:90%"></span><span class="ln" style="width:60%"></span></div></div><div class="fx"><div class="g" style="width:44px;height:32px"></div><div class="col f1" style="gap:5px"><span class="ln" style="width:80%"></span><span class="ln" style="width:50%"></span></div></div></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt tight">
    <p class="dk-lb">네이버 · 보장형 디스플레이</p>
    <h3>PC 메인 2지면과 모바일 메인 2지면</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>① 타임보드 PC 메인 최상단 ② 롤링보드 PC 로그인 영역 아래 ③ 스페셜DA 모바일 홈 ④ 헤드라인DA 모바일 검색창 하단</dd></div>
      <div><dt>과금 방식</dt><dd>기간·시간 단위 고정가(CPT·CPM). 노출 보장, 클릭 미보장. 경쟁 광고주가 있으면 입찰로 확정</dd></div>
      <div><dt>소재 규격</dt><dd>지면별 픽셀 규격은 매체 확인. 헤드라인DA는 외부 링크 불가, 네이버 내부 서비스로 연결</dd></div>
      <div><dt>운영 포인트</dt><dd>최소 1주, 월요일 시작 기준으로 역산 부킹. 효과는 브랜드 검색량의 집행 전·중·후 비교로 판정</dd></div>
    </dl>
  </div>
</div>

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

.dk-mnvgd .pc{width:560px;height:356px;border:1px solid var(--line2);border-radius:10px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;box-shadow:var(--shadow);position:relative;text-align:left}
.dk-mnvgd .pc>*{flex:none}
.dk-mnvgd .cr{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:var(--soft)}
.dk-mnvgd .cr i{width:7px;height:7px;border-radius:50%;background:var(--g2)}
.dk-mnvgd .cr span{margin-left:10px;flex:1;height:14px;border-radius:7px;background:#fff;font-size:9px;color:#999;padding:0 8px;line-height:14px}

.dk-mnvgd .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;flex:none}
.dk-mnvgd .nvq{flex:1;height:26px;border:1.5px solid #03c75a;border-radius:13px;padding:0 12px;display:flex;align-items:center;font-size:11px;color:#999}
.dk-mnvgd .pc{width:404px;height:300px}
.dk-mnvgd .fr{align-items:center}
.dk-mnvgd .bn{border:1.5px solid #03c75a;border-radius:4px;background:#f3fbf6;display:flex;align-items:center;justify-content:center;color:#1f8a4c;font-size:10px;font-weight:700;position:relative;flex:none}
.dk-mnvgd .box{border:1px solid #e3e5e8;border-radius:4px;padding:6px 8px}