디자인킷 · 표
소형 표 4열 4행(머리줄과 행 제목 강조)
D-표-소형4열4행
언제 쓰는가
행 4개 × 열 4개의 범용 표. 머리줄을 바탕색 띠로, 첫 열(행 제목)을 굵게 세워 가로·세로 양쪽으로 읽히게 함. 상품 구성, 타깃 설계, 소재 운영 기준에 사용. 행 4개 고정(3개면 D-표-소형4열3행), 칸 문구 2줄(약 35자)까지. 강조 행 1개. 값 바꾸는 법: 머리줄 4칸과 행 4개의 문구만 교체. 열 폭은 colgroup. 강조 행 하나에 class="hot". 첫 열 값이 위아래로 같아도 그대로 반복해 적음(묶어서 보이려면 D-표-묶음머리표).
참고
표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작. 머리줄 띠와 첫 열 구분선은 증권사 리포트의 교차표 방식 참고.
조각
<div class="dk dk-s44"><div class="dk-card"><table> <colgroup><col style="width:150px"><col style="width:270px"><col><col style="width:240px"></colgroup> <thead><tr><th>축</th><th>타깃</th><th>구성 방법</th><th>역할</th></tr></thead> <tbody> <tr><td class="k">신규 확장</td><td class="v">넓은 타깃(Advantage+ 오디언스)</td><td>관심사 키워드를 출발점 제안으로 입력</td><td>발견 단계 신규 유입</td></tr> <tr class="hot"><td class="k">신규 확장</td><td class="v">유사 타겟</td><td>구매 고객·고관여 신호 보유자를 시드로 생성</td><td>정확도 높은 신규 모수</td></tr> <tr><td class="k">이탈 회수</td><td class="v">맞춤 타겟</td><td>방문·조회·장바구니 이벤트별 분리</td><td>본 상품 재노출</td></tr> <tr><td class="k">제외</td><td class="v">구매 완료·계약 고객</td><td>고객 목록 업로드</td><td>예산 누수 차단</td></tr> </tbody></table></div></div>
스타일
.dk-s44 table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-s44 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-s44 td{font-size:var(--f-body);color:var(--ink2);padding:19px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-s44 tbody tr:last-child td{border-bottom:0}
.dk-s44 td.k{font-weight:700;color:var(--ink)}
.dk-s44 td.v{font-weight:500;color:var(--ink)}
.dk-s44 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-s44 tr.hot td{background:var(--acw)}
.dk-s44 tr.hot td.k{color:var(--ac)}
.dk-s44 .dk-card{padding:20px 24px 12px}
.dk-s44 .dk-card{padding:0 0 4px;overflow:hidden}
.dk-s44 th{background:var(--soft);color:var(--ink);font-size:var(--f-sm);padding:13px 18px;border-bottom:1px solid var(--line2)}
.dk-s44 td{padding-left:18px;padding-right:18px}
.dk-s44 td.k{font-size:var(--f-md);border-right:1px solid var(--line)}