항목·기준·수량·비고 4열 표

항목마다 규격과 수량, 채울 내용이 붙는 사양 표. D-표-항목기준비고3열의 4열 판. 에셋 구성, 광고 상품 목록, 채널별 메시지처럼 5행 × 4열 본문에 사용. 행 5~6개, 열 4개. 셋째 열(수량)은 짧은 값. 값 바꾸는 법: 머리줄 4칸과 행 문구 교체. 행 6개면 td padding 16px 를 12px 로. 수량 열(td.q)은 굵게 표시되므로 짧은 값만. 강조 행 하나에 class="hot".

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작.

<div class="dk dk-spec4"><div class="dk-card"><table>
<colgroup><col style="width:180px"><col style="width:280px"><col style="width:220px"><col></colgroup>
<thead><tr><th>에셋 유형</th><th>규격</th><th>권장 개수</th><th>채울 내용</th></tr></thead>
<tbody>
<tr><td class="k">짧은 제목</td><td>30자 이내</td><td class="q">5개 이상</td><td class="m">핵심 소구별 1개씩</td></tr>
<tr><td class="k">긴 제목</td><td>90자 이내</td><td class="q">5개</td><td class="m">대상과 혜택을 한 문장으로</td></tr>
<tr><td class="k">설명</td><td>90자 이내</td><td class="q">5개</td><td class="m">근거, 조건, 행동 유도</td></tr>
<tr><td class="k">이미지</td><td>1.91:1, 1:1, 4:5</td><td class="q">비율별 3장 이상</td><td class="m">제품 누끼, 사용 장면, 후기 캡처</td></tr>
<tr class="hot"><td class="k">동영상</td><td>16:9, 9:16</td><td class="q">비율별 2개 이상</td><td class="m">15초 내외 숏폼</td></tr>
</tbody></table></div></div>

.dk-spec4 table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-spec4 th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-spec4 td{font-size:var(--f-body);color:var(--ink2);padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-spec4 tbody tr:last-child td{border-bottom:0}
.dk-spec4 td.k{font-weight:700;color:var(--ink)}
.dk-spec4 td.v{font-weight:500;color:var(--ink)}
.dk-spec4 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-spec4 tr.hot td{background:var(--acw)}
.dk-spec4 tr.hot td.k{color:var(--ac)}
.dk-spec4 .dk-card{padding:20px 24px 12px}
.dk-spec4 td.q{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dk-spec4 tr.hot td.q{color:var(--ac)}
.dk-spec4 td.m{font-size:var(--f-body);color:var(--ink2)}