반폭 · 순위 목록 5위(막대 포함)

검색어, 매체, 소재, 지역 등의 상위 5개를 값과 함께 보일 때. 이름 8자 이내, 값은 비율이나 건수. 1위만 강조. 값 바꾸는 법: .r 하나가 한 순위. .k=이름, .v=값, 막대 i 의 width = 값 ÷ 1위 값 × 100(%). 1위 행에만 class="hot". 3~5행.

직접 제작. Datawrapper 의 표 안 막대(bar in table)와 Financial Times Visual Vocabulary 의 순위(ordered bar) 방식 참고. 1위만 강조색, 나머지 무채색.

<div class="dk dkh dkh-t-rank5"><div class="dk-card"><p class="dk-lb">유입 검색어 유형 상위 5개 · 클릭 비중</p><div class="ls">
<div class="r hot"><span class="n">1</span><span class="k">브랜드명 검색</span><span class="b"><i style="width:100%"></i></span><span class="v">31%</span></div>
<div class="r"><span class="n">2</span><span class="k">제품 유형 검색</span><span class="b"><i style="width:71%"></i></span><span class="v">22%</span></div>
<div class="r"><span class="n">3</span><span class="k">비교 검색</span><span class="b"><i style="width:55%"></i></span><span class="v">17%</span></div>
<div class="r"><span class="n">4</span><span class="k">가격 검색</span><span class="b"><i style="width:39%"></i></span><span class="v">12%</span></div>
<div class="r"><span class="n">5</span><span class="k">후기 검색</span><span class="b"><i style="width:29%"></i></span><span class="v">9%</span></div>
</div></div></div>

.dkh-t-rank5 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-rank5 .dk-lb{margin:0 0 10px}
.dkh-t-rank5 .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-rank5 .r{flex:1;display:grid;grid-template-columns:14px 100px 1fr 40px;column-gap:10px;align-items:center;border-top:1px solid var(--line);font-size:var(--f-sm)}
.dkh-t-rank5 .r:first-child{border-top-color:var(--line2)}
.dkh-t-rank5 .n{font-size:var(--f-cap);color:var(--mu);font-variant-numeric:tabular-nums}
.dkh-t-rank5 .k{font-weight:600;white-space:nowrap}
.dkh-t-rank5 .b{display:block;height:10px;background:var(--soft);border-radius:5px}
.dkh-t-rank5 .b i{display:block;height:100%;background:var(--g2);border-radius:5px}
.dkh-t-rank5 .r.hot .b i{background:var(--ac)}
.dkh-t-rank5 .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}