띠 · 비율 띠(100% 를 3~4구간)

예산이나 물량 배분을 본문 아래에 한 줄 막대로 보일 때. 구간 3~4개, 합 100. 구간 이름 8자 이내, 가장 작은 구간 8% 이상. 값 바꾸는 법: .bar 의 i 와 ul 의 li 를 같은 순서로 둔다. 둘 다 style="flex:값"(값 = 비율, 합 100). li 의 b=구간 이름, span=비율. 3구간이면 .s4 를 지운다.

직접 제작. Financial Times Visual Vocabulary 의 part-to-whole 가로 누적 막대를 참고.

<div class="dk dks dks-share"><div class="bar"><i class="s1" style="flex:45"></i><i class="s2" style="flex:30"></i><i class="s3" style="flex:15"></i><i class="s4" style="flex:10"></i></div><ul><li class="s1" style="flex:45"><b>검색 광고</b><span class="num">45%</span></li><li style="flex:30"><b>디스플레이</b><span class="num">30%</span></li><li style="flex:15"><b>영상</b><span class="num">15%</span></li><li style="flex:10"><b>재방문 유도</b><span class="num">10%</span></li></ul></div>

.dks-share{border-top:1px solid var(--line2);padding-top:14px}
.dks-share .bar{display:flex;gap:3px;height:12px}
.dks-share .bar i{min-width:0;border-radius:2px;background:var(--g1)}
.dks-share .bar .s1{background:var(--ac)}
.dks-share .bar .s2{background:var(--g4)}
.dks-share .bar .s3{background:var(--g3)}
.dks-share .bar .s4{background:var(--g2)}
.dks-share ul{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:3px}
.dks-share li{min-width:0;display:flex;align-items:baseline;gap:8px;font-size:var(--f-cap);color:var(--ink2);white-space:nowrap}
.dks-share li b{font-weight:600}
.dks-share li.s1 span{color:var(--ac);font-weight:700}