소재 규격 비율 3종

지면 3종의 소재 규격을 실제 가로세로 비율 사각형으로 나란히 놓고 아래에 지면 이름, 픽셀 규격, 소재 방향을 적는 도식. 디스플레이 배너 3종, 앱 캠페인 가로·세로·정사각 3비율에 사용. 지면 3개 고정, 설명 2줄(약 30자). 강조 지면 1개. 값 바꾸는 법: 사각형 크기는 div.bx 의 style 로 지정. 긴 변을 320px 안팎으로 두고 짧은 변 = 긴 변 × (짧은 쪽 픽셀 ÷ 긴 쪽 픽셀). 예: 1250×560 → 320 × 560 ÷ 1250 = 143px. 세로형은 높이 176px 기준으로 폭을 계산. 지면 이름, 규격, 설명 교체. 주력 지면 하나에 class="c hot".

지면별 소재를 실제 가로세로 비율의 사각형으로 나란히 놓는 표기는 매체 공식 소재 가이드(네이버 성과형 디스플레이, 메타 광고 가이드의 지면별 규격 도해)와 Envato Elements 의 social media size guide 인포그래픽 구성 참고. 직접 제작.

<div class="dk dk-ratio3">
<div class="c"><div class="fr"><div class="bx" style="width:176px;height:176px"><span>1:1</span></div></div><h3>피드형 배너</h3><p class="sz num">1200×1200px</p><p class="d">콘텐츠 사이에 섞이는 정보형 이미지</p></div>
<div class="c hot"><div class="fr"><div class="bx" style="width:320px;height:143px"><span>약 2.2:1</span></div></div><h3>모바일 배너</h3><p class="sz num">1250×560px</p><p class="d">넓은 면적, 제품과 핵심 문구 한 덩어리</p></div>
<div class="c"><div class="fr"><div class="bx" style="width:330px;height:88px"><span>3.75:1</span></div></div><h3>스마트채널</h3><p class="sz num">750×200px</p><p class="d">한 줄 영역. 압축한 문구</p></div>
</div>

.dk-ratio3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.dk-ratio3 .c{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 26px 24px}
.dk-ratio3 .fr{height:188px;display:flex;align-items:flex-end;justify-content:flex-start;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dk-ratio3 .bx{background:var(--soft);border:1.5px solid var(--g2);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.dk-ratio3 .bx span{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-ratio3 h3{margin:0;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-ratio3 .sz{margin:2px 0 8px;font-size:var(--f-xl);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.dk-ratio3 .d{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dk-ratio3 .hot .bx{background:var(--acw);border-color:var(--ac)}
.dk-ratio3 .hot .bx span,.dk-ratio3 .hot .sz{color:var(--ac)}