반폭 · 구성비 막대와 범례 목록(3~4개)

예산, 유입, 매출의 구성비를 한 줄 막대와 범례로 보일 때. 항목 3~4개, 이름 6자 이내, 설명 16자 이내. 합계 100%. 값 바꾸는 법: .bar 의 i 하나가 한 조각(style 의 flex 값 = 구성비 숫자). .r 하나가 범례 한 줄(.k 이름, .d 설명, .v 비율). 막대 순서와 범례 순서를 같게. 첫 항목만 강조색. 3~4개.

직접 제작. Financial Times Visual Vocabulary 의 part-to-whole 가운데 한 줄 누적 막대 방식 참고. 원 그래프 대신 막대와 범례 표를 합침.

<div class="dk dkh dkh-t-share"><div class="dk-card"><p class="dk-lb">매체별 예산 구성비</p><div class="bar"><i style="flex:45"></i><i style="flex:25"></i><i style="flex:20"></i><i style="flex:10"></i></div>
<div class="ls">
<div class="r"><span class="sw"></span><span class="k">검색 광고</span><span class="d">구매 의도 수요 확보</span><span class="v">45%</span></div>
<div class="r"><span class="sw"></span><span class="k">쇼핑 광고</span><span class="d">상품 노출과 가격 비교 대응</span><span class="v">25%</span></div>
<div class="r"><span class="sw"></span><span class="k">디스플레이</span><span class="d">신규 방문자 유입</span><span class="v">20%</span></div>
<div class="r"><span class="sw"></span><span class="k">영상</span><span class="d">인지 형성, 성수기 한정</span><span class="v">10%</span></div>
</div></div></div>

.dkh-t-share .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-share .dk-lb{margin:0 0 10px}
.dkh-t-share .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-share .bar{flex:none;display:flex;gap:2px;height:18px;margin:4px 0 12px}
.dkh-t-share .bar i{display:block;min-width:0;border-radius:3px;background:var(--g1)}
.dkh-t-share .bar i:nth-child(1),.dkh-t-share .r:nth-child(1) .sw{background:var(--ac)}
.dkh-t-share .bar i:nth-child(2),.dkh-t-share .r:nth-child(2) .sw{background:var(--g4)}
.dkh-t-share .bar i:nth-child(3),.dkh-t-share .r:nth-child(3) .sw{background:var(--g3)}
.dkh-t-share .bar i:nth-child(4),.dkh-t-share .r:nth-child(4) .sw{background:var(--g2)}
.dkh-t-share .r{flex:1;display:grid;grid-template-columns:10px 78px 1fr 40px;column-gap:10px;align-items:center;padding:5px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.5}
.dkh-t-share .sw{width:10px;height:10px;border-radius:2px}
.dkh-t-share .k{font-weight:600;white-space:nowrap}
.dkh-t-share .d{font-size:var(--f-cap);color:var(--mu)}
.dkh-t-share .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}