반폭 목업 · 유튜브 쇼츠(세로 영상)

쇼츠 영상 광고나 채널 운영 제안 장의 절반 칸에 쇼츠 화면 구성을 놓을 때. 옆 칸에는 영상 규격 표나 편성 계획. 화면 1개와 번호 설명 3개 고정. 설명 제목 8자 이내, 내용 22자 이내. 값 바꾸는 법: SVG 안 <text> 문구만 교체(한 줄 9자 안팎, 넘으면 화면 밖으로 잘림). 번호 원(1~3)은 오른쪽 설명 li 와 짝. 설명은 li 의 b=제목, 뒤 글=내용. 화면은 칸 높이에 맞춰 비율대로 줄고 늘어남(칸 높이 300px 에서 화면 글자 12px). 사진·영상 자리는 회색 상자 유지.

직접 제작. 유튜브 쇼츠 광고의 화면 구성(전체 화면 영상, 오른쪽 반응 버튼, 하단 채널·제목·버튼, 재생 막대)을 참고. 화면 구성만 참고, SVG 직접 제작. 로고·캡처 이미지·실제 계정명 미사용.

<div class="dk dkh dkh-m-shorts"><div class="dk-card"><p class="dk-lb">유튜브 쇼츠 · 세로 영상 광고</p><div class="row"><div class="scr mock"><svg viewBox="0 0 142 236" preserveAspectRatio="xMidYMid meet" role="img" aria-label="shorts"><defs><clipPath id="mc-shorts"><rect x="3" y="3" width="136" height="230" rx="13"/></clipPath></defs><rect x="1.5" y="1.5" width="139" height="233" rx="14.5" style="fill:var(--ink);stroke:var(--ink);stroke-width:3"/><g clip-path="url(#mc-shorts)"><g transform="translate(3,3)"><text x="10" y="20" font-size="13" font-weight="700" text-anchor="start" style="fill:var(--card)">쇼츠</text><circle cx="121" cy="15" r="4.5" style="fill:none;stroke:var(--card);stroke-width:1.5"/><line x1="124.5" y1="18.5" x2="128" y2="22" style="stroke:var(--card);stroke-width:1.5"/><text x="58" y="80" font-size="12" font-weight="400" text-anchor="middle" style="fill:var(--g3)">세로 영상</text><path d="M-6 0H-3.2V6H-6ZM-3.2 0L-0.6 -6C1 -6 1.6 -4.6 1.2 -3L0.8 -1H5C6 -1 6.6 0 6.2 1L4.8 5.2C4.6 5.8 4.2 6 3.6 6H-3.2" transform="translate(120,94)" style="fill:none;stroke:var(--card);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round"/><text x="120" y="113" font-size="12" font-weight="400" text-anchor="middle" style="fill:var(--card)">2.1천</text><path d="M-6 -5H6V3H-1L-4.5 6V3H-6Z" transform="translate(120,130)" style="fill:none;stroke:var(--card);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round"/><text x="120" y="149" font-size="12" font-weight="400" text-anchor="middle" style="fill:var(--card)">96</text><circle cx="15" cy="174" r="7" style="fill:var(--g2)"/><text x="26" y="178" font-size="12" font-weight="700" text-anchor="start" style="fill:var(--card)">채널 이름</text><rect x="75" y="167" width="31" height="15" rx="7.5" style="fill:var(--card)"/><text x="90.5" y="178.5" font-size="12" font-weight="700" text-anchor="middle" style="fill:var(--ink)">구독</text><text x="8" y="196" font-size="12" font-weight="400" text-anchor="start" style="fill:var(--card)">광고 · 30초 사용 후기</text><rect x="8" y="203" width="120" height="19" rx="9.5" style="fill:var(--card)"/><text x="60" y="217" font-size="12" font-weight="700" text-anchor="middle" style="fill:var(--ink)">사이트 방문</text><rect x="0" y="226" width="136" height="4" style="fill:var(--g4)"/><rect x="0" y="226" width="52" height="4" style="fill:#ff0000"/><circle cx="58" cy="58" r="8" style="fill:var(--ink);stroke:var(--card);stroke-width:1.5"/><text x="58" y="62.2" font-size="12" font-weight="700" text-anchor="middle" style="fill:var(--card)">1</text><circle cx="122" cy="174.5" r="8" style="fill:var(--ink);stroke:var(--card);stroke-width:1.5"/><text x="122" y="178.7" font-size="12" font-weight="700" text-anchor="middle" style="fill:var(--card)">2</text><circle cx="114" cy="212.5" r="8" style="fill:var(--ink);stroke:var(--card);stroke-width:1.5"/><text x="114" y="216.7" font-size="12" font-weight="700" text-anchor="middle" style="fill:var(--card)">3</text></g></g></svg></div><div class="nt"><ol><li><i>1</i><p><b>영상 영역</b>60초 이내, 자막으로 내용 전달</p></li><li><i>2</i><p><b>채널과 제목</b>채널명과 제목 1줄 노출</p></li><li><i>3</i><p><b>행동 버튼</b>영상 위 고정, 사이트 이동</p></li></ol><p class="cap">구성 예시, 실제 소재 아님</p></div></div></div></div>

.dkh-m-shorts .dk-card{display:flex;flex-direction:column;padding:18px 22px}
.dkh-m-shorts .dk-lb{flex:none;margin:0 0 8px}
.dkh-m-shorts .row{flex:1;min-height:0;display:flex;align-items:stretch;gap:22px}
.dkh-m-shorts .scr{flex:none;height:100%;aspect-ratio:142/236;min-height:0}
.dkh-m-shorts .scr svg{display:block;width:100%;height:100%}
.dkh-m-shorts .nt{flex:1;min-width:0;display:flex;flex-direction:column}
.dkh-m-shorts .nt ol{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dkh-m-shorts .nt li{flex:1;display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
.dkh-m-shorts .nt li:first-child{border-top:1px solid var(--line2)}
.dkh-m-shorts .nt li i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--card);font-style:normal;font-size:var(--f-cap);font-weight:700;line-height:20px;text-align:center}
.dkh-m-shorts .nt li p{margin:0;min-width:0;font-size:var(--f-cap);line-height:1.45;color:var(--ink2)}
.dkh-m-shorts .nt li p b{display:block;font-size:var(--f-sm);color:var(--ink)}
.dkh-m-shorts .cap{flex:none;margin:0;padding-top:6px;border-top:1px solid var(--line);font-size:var(--f-cap);line-height:1.45;color:var(--mu)}