구글 반응형 디스플레이 가로형·정사각형

D-목업-구글-반응형디스플레이

언제 쓰는가

디스플레이 제안에서 제휴 지면에 실리는 배너 2비율을 보여줄 때. 동적 상품 배너의 고정 요소와 가변 요소 구분에도 사용(점선 = 가변). 화면 2개 고정. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 리타겟팅 매체(크리테오 등)에 쓸 때는 라벨만 바꾸고 점선 구분 유지. 일반 배너면 점선(class vr)과 고정·가변 표시 삭제.

참고

구글 광고 도움말 반응형 디스플레이 광고 규격(support.google.com/google-ads), 규격 정리(megadigital.ai/en/blog/google-app-campaign-specs), 크리테오 동적 배너 구성. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mggrd">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">가로형 1.91:1</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="pd col" style="gap:6px"><p class="t9 mu">생활 · 건강</p><p class="t13 bd" style="line-height:1.3">재택근무 3년, 허리 통증 줄이는 습관</p><span class="ln" style="width:96%"></span><span class="ln" style="width:88%"></span><span class="ln" style="width:70%"></span></div>
<div style="padding:4px 12px"><div class="ad"><span class="ai">광고 ⓘ</span><div class="g" style="height:102px;border-radius:0">가로 이미지 1.91:1</div><div class="pd fx sp" style="gap:8px"><div class="col f1"><p class="t10 bd" style="line-height:1.3">집에서 시작하는 필라테스</p><p class="t9 mu">숲길핏 · 30일 체험</p></div><span class="cta">열기</span></div></div></div>
<div class="pd col" style="gap:6px"><span class="ln" style="width:92%"></span><span class="ln" style="width:84%"></span><span class="ln" style="width:60%"></span></div></div></div>
      <div class="fc"><p class="fl">정사각형 1:1 · 동적 상품</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="pd col" style="gap:7px"><div class="fx"><div class="g" style="width:46px;height:34px"></div><div class="col f1" style="gap:5px"><span class="ln" style="width:92%"></span><span class="ln" style="width:60%"></span></div></div></div>
<div style="padding:2px 12px"><div class="ad"><span class="ai">광고 ⓘ</span><div class="fx" style="padding:6px 8px 4px"><span class="av" style="width:16px;height:16px;border-radius:3px"></span><span class="t10 bd">숲길핏</span><span class="tg">고정</span></div><div style="padding:0 8px"><div class="g vr" style="height:150px">상품 이미지 1:1<br>본 상품에 따라 교체</div></div><div class="fx sp" style="padding:6px 8px 8px;gap:6px"><div class="col f1 vr" style="padding:2px 4px;gap:3px"><p class="t10 bd">접이식 리포머 미니</p><span class="pr" style="width:44px"></span></div><span class="tg">가변</span><span class="cta">구매</span></div></div></div>
<div class="pd col" style="gap:7px"><div class="fx"><div class="g" style="width:46px;height:34px"></div><div class="col f1" style="gap:5px"><span class="ln" style="width:86%"></span><span class="ln" style="width:54%"></span></div></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>입찰형. 클릭 전환과 조회 전환을 별도 열로 보고, 무효 클릭은 청구 전 조정</dd></div>
      <div><dt>소재 규격</dt><dd>가로 1200×628, 정사각 1200×1200. 제목 30자, 긴 제목 90자, 설명 80자, 로고 1:1과 4:1</dd></div>
      <div><dt>운영 포인트</dt><dd>광고그룹당 메시지가 다른 광고 3~4개, 저효율 게재 위치 제외 목록 상시 관리, 리마케팅은 빈도 상한 설정</dd></div>
    </dl>
  </div>
</div>

스타일

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

.dk-mggrd .ad{border:1px solid #dadce0;border-radius:6px;overflow:hidden;position:relative;background:#fff}
.dk-mggrd .ai{position:absolute;right:4px;top:4px;font-size:8px;color:#5f6368;background:rgba(255,255,255,.9);border-radius:2px;padding:0 4px;z-index:2}
.dk-mggrd .cta{background:#1a73e8;color:#fff;border-radius:4px;padding:4px 9px;font-size:10px;font-weight:700;white-space:nowrap}
.dk-mggrd .vr{outline:1.5px dashed #5f6368;outline-offset:-1px}
.dk-mggrd .tg{font-size:8px;color:#5f6368;border:1px solid #dadce0;border-radius:2px;padding:0 3px;white-space:nowrap}