디자인킷 · 반폭
반폭 · 항목과 내용 2열 표(3~5행)
D-반폭-키값표5행
언제 쓰는가
장의 절반 칸에 조건, 조항, 규격처럼 항목과 내용이 짝을 이루는 값을 3~5행으로 놓을 때. 다른 반폭 조각(도식, 그래프, 큰 숫자)과 나란히 쓴다. 항목 8자 이내, 내용 2줄 이내. 강조 행 1개. 값 바꾸는 법: tr 하나가 한 행. td.k=항목, 다음 td=내용. 강조 행 하나에 class="hot". 행은 3~5개(표가 칸 높이에 맞춰 늘어나므로 행 수가 적으면 행 간격이 넓어진다). .dk-lb 는 표 제목.
참고
직접 제작. 컨설팅 보고서의 좌우 2단 장에서 한쪽에 놓는 키·값 표 구성을 참고(McKinsey·BCG 공개 보고서의 exhibit 옆 요약 표 방식).
조각
<div class="dk dkh dkh-kv5"><div class="dk-card"><p class="dk-lb">섭외 계약 활용 조항</p><table><tbody> <tr><td class="k">활용 동의</td><td>브랜드 공식 계정 업로드와 광고 소재 활용 권한</td></tr> <tr class="hot"><td class="k">사용 기간</td><td>계약서에 기본 사용 기간 명시, 초과 시 추가 협의</td></tr> <tr><td class="k">편집 범위</td><td>컷 편집, 자막 재가공, 로고 삽입 권한 사전 협의</td></tr> <tr><td class="k">원본 제공</td><td>업로드 후 원본 영상과 자막 없는 판본 확보</td></tr> </tbody></table></div></div>
스타일
.dkh-kv5 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-kv5 .dk-lb{margin:0 0 10px}
.dkh-kv5 table{flex:1;width:100%;border-collapse:collapse;font-size:var(--f-sm)}
.dkh-kv5 td{padding:10px 0;border-top:1px solid var(--line);vertical-align:middle;color:var(--ink2);line-height:1.5}
.dkh-kv5 tr:first-child td{border-top:1px solid var(--line2)}
.dkh-kv5 td.k{width:104px;font-weight:600;color:var(--ink);padding-right:14px;white-space:nowrap}
.dkh-kv5 tr.hot td.k{color:var(--ac)}
.dkh-kv5 tr.hot td{color:var(--ink)}