제안 시스템

디자인킷 · 표

항목·내용 2열 표와 큰 숫자

D-표-항목내용2열

항목·내용 2열 표와 큰 숫자

언제 쓰는가

캠페인 개요, 과업 범위, 계약 조건처럼 항목과 내용만 있는 사양 표. 오른쪽에 대표 숫자 하나와 요점. 행 5~7개, 요점 3개 이하. 값 바꾸는 법: 행(tr)마다 항목과 내용 교체. 오른쪽 큰 숫자와 단위(small), 아래 요점 3개 교체. 머리줄 없는 표라 항목 칸이 머리 역할.

참고

컨설팅 제안서의 과업 범위 요약 장 구성(왼쪽 사양 표, 오른쪽 대표 수치). Chapman University Data Literacy "Good Tables" https://libguides.chapman.edu/data_literacy/good_tables (세로선 제거, 머리줄 아래 선 하나, 숫자 오른쪽 정렬). 구성 방식만 참고, 코드와 그림은 직접 제작.

조각

<div class="dk dk-spec2"><div class="dk-card"><table><tbody>
<tr><td class="k">과업 기간</td><td>착수일부터 12주, 준비 2주와 집행 10주</td></tr>
<tr><td class="k">대상 고객</td><td>수도권 30~40대 직장인, 첫 구매 검토 단계</td></tr>
<tr><td class="k">운영 매체</td><td>검색 광고 2종, 블로그, 숏폼 영상</td></tr>
<tr><td class="k">제작 범위</td><td>검색 소재 40종, 블로그 24건, 영상 8편</td></tr>
<tr><td class="k">성과 기준</td><td>상담 신청 완료 건수와 신청당 유입 비율</td></tr>
<tr><td class="k">보고 체계</td><td>주간 요약 12회, 월간 종합 3회, 종료 보고 1회</td></tr>
</tbody></table></div>
<div class="r"><p class="dk-lb">운영 기간</p><p class="big num">12<small>주</small></p><p class="cap">준비 2주, 집행 10주</p>
<ul><li><b>착수</b>계약 후 5영업일 이내</li><li><b>중간 점검</b>6주 차에 목표 재조정</li><li><b>종료</b>12주 차에 인수인계 문서 전달</li></ul></div></div>

스타일

.dk-spec2{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:40px;align-items:center}
.dk-spec2 .r .big{font-size:var(--f-big);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ac);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.dk-spec2 .r .big small{font-size:var(--f-xl);font-weight:600;margin-left:4px;color:var(--ink)}
.dk-spec2 .r .cap{font-size:var(--f-body);color:var(--ink2);margin:0 0 18px}
.dk-spec2 .r ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:10px}
.dk-spec2 .r li{font-size:var(--f-sm);color:var(--ink2);padding-left:16px;position:relative;line-height:1.5}
.dk-spec2 .r li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--line2)}
.dk-spec2 .r li b{margin-right:6px}
.dk-spec2 table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-spec2 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-spec2 td{font-size:var(--f-body);color:var(--ink2);padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-spec2 tbody tr:last-child td{border-bottom:0}
.dk-spec2 .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-spec2 .c{text-align:center}
.dk-spec2 td.k{font-weight:600;color:var(--ink)}
.dk-spec2 .dk-card{padding:20px 24px 12px}
.dk-spec2 .dk-card{padding:10px 24px}
.dk-spec2 td.k{width:128px;font-size:var(--f-sm);color:var(--mu);font-weight:600}
.dk-spec2 td{color:var(--ink)}