진행 막대 목록(항목별 달성률)

과업·지표별 진행률이나 달성률을 한 줄씩. 진행 현황 보고, 과업별 완료율, 채널별 목표 달성. 행 4~7개. 강조는 설명이 필요한 한 줄만. 값 바꾸는 법: 막대 width = 달성률 × 6px(100% = 600px). li 한 줄 = 이름 / 막대 / 퍼센트 / 보조 수치. 강조 줄은 li class="hot". 행이 7개면 li 의 padding 을 12px → 9px.

Datawrapper Academy(https://www.datawrapper.de/academy/customizing-your-bar-chart)의 막대 뒤 회색 바탕(전체 100을 보이게 하는 방식), 프로젝트 현황 대시보드의 진행 막대 목록 관행 참고. 직접 제작.

<div class="dk dk-prog">
<div class="dk-card">
<p class="ttl"><span>과업별 진행률 · 10월 1주 기준</span></p>
<ul>
<li class=""><span class="k">블로그 체험단 모집</span><span class="tr"><i style="width:600px"></i></span><span class="n num">100%</span><span class="t num">40 / 40명</span></li>
<li class=""><span class="k">후기 콘텐츠 발행</span><span class="tr"><i style="width:510px"></i></span><span class="n num">85%</span><span class="t num">34 / 40건</span></li>
<li class=""><span class="k">인스타그램 릴스 제작</span><span class="tr"><i style="width:450px"></i></span><span class="n num">75%</span><span class="t num">9 / 12편</span></li>
<li class=""><span class="k">검색 광고 소재 교체</span><span class="tr"><i style="width:360px"></i></span><span class="n num">60%</span><span class="t num">6 / 10종</span></li>
<li class="hot"><span class="k">상세 페이지 개편</span><span class="tr"><i style="width:270px"></i></span><span class="n num">45%</span><span class="t num">검수 단계</span></li>
<li class=""><span class="k">월간 리포트 발송</span><span class="tr"><i style="width:198px"></i></span><span class="n num">33%</span><span class="t num">1 / 3회</span></li>
</ul>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-prog .dk-card{padding:22px 32px 20px}
.dk-prog .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-prog .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-prog .lg span{display:flex;align-items:center;gap:6px}
.dk-prog .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-prog .lg i.c-a{background:var(--ac)}
.dk-prog .lg i.c-s{background:var(--soft)}
.dk-prog .lg i.c-g1{background:var(--g1)}
.dk-prog .lg i.c-g2{background:var(--g2)}
.dk-prog .lg i.c-g3{background:var(--g3)}
.dk-prog .lg i.c-g4{background:var(--g4)}
.dk-prog .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-prog svg{display:block}
.dk-prog svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-prog svg .a{fill:var(--ac)}
.dk-prog svg .sf{fill:var(--soft)}
.dk-prog svg .g1{fill:var(--g1)}
.dk-prog svg .g2{fill:var(--g2)}
.dk-prog svg .g3{fill:var(--g3)}
.dk-prog svg .g4{fill:var(--g4)}
.dk-prog svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-prog svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-prog svg text.k{fill:var(--ink2)}
.dk-prog svg text.v{fill:var(--ink);font-weight:600}
.dk-prog svg text.va{fill:var(--ac);font-weight:700}
.dk-prog svg text.on{fill:var(--card);font-weight:600}
.dk-prog ul{list-style:none;margin:0;padding:0}
.dk-prog li{display:grid;grid-template-columns:220px 600px 64px minmax(0,1fr);align-items:center;gap:var(--s5);padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--f-body);color:var(--ink2)}
.dk-prog li:last-child{border-bottom:0}
.dk-prog .tr{display:block;height:12px;border-radius:6px;background:var(--soft)}
.dk-prog .tr i{display:block;height:12px;border-radius:6px;background:var(--g3)}
.dk-prog .n{font-size:var(--f-md);font-weight:700;color:var(--ink);text-align:right}
.dk-prog .t{font-size:var(--f-sm);color:var(--mu);text-align:right}
.dk-prog li.hot .k{font-weight:600;color:var(--ink)}
.dk-prog li.hot .tr i{background:var(--ac)}
.dk-prog li.hot .n{color:var(--ac)}