디자인킷 · 표
2안 비교표(기존 대 제안)
D-표-2안비교-기존대제안
언제 쓰는가
지금 운영 방식과 제안 방식을 같은 항목으로 나란히 대조. 제안 열 하나만 강조. 행 4~6개, 열은 항목·기존·제안 3개 고정. 값 바꾸는 법: 행(tr) 단위로 문구 교체. 강조 열은 th와 td의 class="hot". 기존 열은 회색 글자로 자동 처리.
참고
Chapman University Data Literacy "Good Tables" https://libguides.chapman.edu/data_literacy/good_tables (세로선 제거, 머리줄 아래 선 하나, 숫자 오른쪽 정렬) / Bricks "How to make a table look good in PowerPoint" https://www.website.thebricks.com/resources/how-to-make-a-table-look-good-in-powerpoint (핵심 행 하나만 색으로 강조). 구성 방식만 참고, 코드와 그림은 직접 제작.
조각
<div class="dk dk-cmp2"><div class="dk-card"><table> <colgroup><col style="width:190px"><col><col></colgroup> <thead><tr><th>항목</th><th>기존 운영</th><th class="hot">제안 운영</th></tr></thead> <tbody> <tr><td class="k">운영 구조</td><td>매체별 담당 분리, 보고서 3종</td><td class="hot">전담 1팀 통합 운영, 보고서 1종</td></tr> <tr><td class="k">키워드 범위</td><td>브랜드 키워드 중심 120개</td><td class="hot">일반·롱테일 포함 640개</td></tr> <tr><td class="k">소재 교체</td><td>분기 1회</td><td class="hot">2주 1회, 성과 하위 30% 교체</td></tr> <tr><td class="k">전환 측정</td><td>클릭과 유입까지</td><td class="hot">상담 신청 완료까지 추적</td></tr> <tr><td class="k">성과 보고</td><td>월 1회 수치 나열</td><td class="hot">주간 요약과 월간 조정안</td></tr> <tr><td class="k">의사 결정</td><td>요청 후 3~5일</td><td class="hot">주간 회의에서 당일 확정</td></tr> </tbody></table></div></div>
스타일
.dk-cmp2 table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-cmp2 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-cmp2 td{font-size:var(--f-body);color:var(--ink2);padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-cmp2 tbody tr:last-child td{border-bottom:0}
.dk-cmp2 .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-cmp2 .c{text-align:center}
.dk-cmp2 td.k{font-weight:600;color:var(--ink)}
.dk-cmp2 .dk-card{padding:20px 24px 12px}
.dk-cmp2 th.hot{color:var(--ac)}
.dk-cmp2 td.hot{background:var(--acw);color:var(--ink);font-weight:600}
.dk-cmp2 td:nth-child(2){color:var(--mu)}