경쟁사 비교표(체크 표시)

당사와 경쟁사 3~4곳을 항목별 제공 여부로 비교. 당사 열만 강조, 맨 아래 충족 수 합계. 항목 5~7개, 비교 대상 4~5곳. 값 바꾸는 법: 칸마다 체크 SVG(class="ck") 또는 없음 SVG(class="no")를 넣음. 맨 아래 합계 숫자는 직접 고침. 경쟁사는 실명 대신 A사·B사 표기.

PresentationGO 비교표 템플릿 https://www.presentationgo.com/?p=1988 (열 머리를 크게, 행은 기능 단위) / Chapman University Data Literacy "Good Tables" https://libguides.chapman.edu/data_literacy/good_tables (세로선 제거, 머리줄 아래 선 하나, 숫자 오른쪽 정렬). 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-vs"><div class="dk-card"><table>
<colgroup><col><col style="width:150px"><col style="width:130px"><col style="width:130px"><col style="width:130px"><col style="width:130px"></colgroup>
<thead><tr><th>제공 항목</th><th class="c hot">당사</th><th class="c">A사</th><th class="c">B사</th><th class="c">C사</th><th class="c">D사</th></tr></thead>
<tbody>
<tr><td class="k">검색과 콘텐츠 통합 운영</td><td class="c hot"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td></tr>
<tr><td class="k">전환 지점까지 측정</td><td class="c hot"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td></tr>
<tr><td class="k">주간 성과 보고</td><td class="c hot"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td></tr>
<tr><td class="k">소재 자체 제작</td><td class="c hot"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td></tr>
<tr><td class="k">전담 인력 지정</td><td class="c hot"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td></tr>
<tr><td class="k">실시간 현황 화면</td><td class="c hot"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="no" width="18" height="18" viewBox="0 0 18 18"><path d="M5.5 9h7"/></svg></td><td class="c"><svg class="ck" width="18" height="18" viewBox="0 0 18 18"><path d="M4 9.5l3.2 3.2L14 5.8"/></svg></td></tr>
</tbody>
<tfoot><tr><td>충족 항목 수</td><td class="c num hot">6<small>/6</small></td><td class="c num">3<small>/6</small></td><td class="c num">2<small>/6</small></td><td class="c num">1<small>/6</small></td><td class="c num">3<small>/6</small></td></tr></tfoot>
</table></div></div>

.dk-vs table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-vs 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-vs td{font-size:var(--f-body);color:var(--ink2);padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-vs tbody tr:last-child td{border-bottom:0}
.dk-vs .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-vs .c{text-align:center}
.dk-vs td.k{font-weight:600;color:var(--ink)}
.dk-vs .dk-card{padding:20px 24px 12px}
.dk-vs svg{vertical-align:middle}
.dk-vs svg.ck path{fill:none;stroke:var(--g4);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dk-vs svg.no path{fill:none;stroke:var(--line2);stroke-width:2;stroke-linecap:round}
.dk-vs tbody tr:last-child td{border-bottom:1px solid var(--line2)}
.dk-vs th.c{font-size:var(--f-sm);color:var(--ink)}
.dk-vs th.hot{color:var(--ac)}
.dk-vs td.hot{background:var(--acw)}
.dk-vs td.hot svg.ck path{stroke:var(--ac)}
.dk-vs tfoot td{border-bottom:0;font-size:var(--f-sm);color:var(--mu);padding-top:10px;padding-bottom:10px}
.dk-vs tfoot td.num{font-size:var(--f-lg);font-weight:700;color:var(--ink)}
.dk-vs tfoot td.hot{color:var(--ac)}
.dk-vs tfoot small{font-size:var(--f-cap);font-weight:500;color:var(--mu)}