띠 · 범례 줄(그래프용)

그래프 조각 아래에 계열 2~4개의 범례와 단위를 한 줄로 둘 때. 계열 이름 10자 이내, 오른쪽 단위 문구 30자 이내. 값 바꾸는 법: li 하나가 계열 1개. i.a=강조 계열(강조색), i.b=비교 계열(회색), i.c=기준선(점선). 그래프에 쓴 색과 맞춘다. p=단위와 기간.

직접 제작. Financial Times Visual Vocabulary 와 Datawrapper 그래프의 범례·단위 표기를 참고.

<div class="dk dks dks-legend"><ul><li><i class="a"></i>제안 매체 구성</li><li><i class="b"></i>기존 매체 구성</li><li><i class="c"></i>업종 평균</li></ul><p>단위: 지수(기존 구성 = 100) · 기간: 최근 3개월</p></div>

.dks-legend{border-top:1px solid var(--line2);padding-top:7px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.dks-legend ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.dks-legend li{display:flex;align-items:center;gap:8px;font-size:var(--f-sm);color:var(--ink2);white-space:nowrap}
.dks-legend li i{flex:none;width:14px;height:14px;border-radius:3px;background:var(--g2)}
.dks-legend li i.a{background:var(--ac)}
.dks-legend li i.b{background:var(--g3)}
.dks-legend li i.c{width:20px;height:0;border-radius:0;background:none;border-top:2px dashed var(--g3)}
.dks-legend p{margin:0;font-size:var(--f-cap);color:var(--mu);white-space:nowrap}