디자인킷 · 띠
띠 · 대조 한 줄(지금 / 제안)
D-띠-대조한줄
언제 쓰는가
본문 아래에 지금 방식과 제안 방식을 좌우로 맞세울 때. 양쪽 문구 각각 30자 이내. 값 바꾸는 법: .h 첫째=지금, .h.pro=제안. span=꼬리표, p=문구 한 줄.
참고
직접 제작. 비교 장표의 as-is / to-be 좌우 대조 표기를 참고.
조각
<div class="dk dks dks-vs"><div class="h"><span>지금</span><p>월 1회 보고, 매체별 수치 나열 중심</p></div><div class="h pro"><span>제안</span><p>주 1회 보고, 전환 기준 판단과 다음 조치 포함</p></div></div>
스타일
.dks-vs{border-top:1px solid var(--line2);padding-top:14px;display:grid;grid-template-columns:1fr 1fr}
.dks-vs .h{min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:28px}
.dks-vs .h.pro{padding:0 0 0 28px;border-left:1px solid var(--line2)}
.dks-vs .h span{font-size:var(--f-cap);font-weight:600;color:var(--mu);line-height:1.4}
.dks-vs .h p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dks-vs .h.pro span{color:var(--ac)}
.dks-vs .h.pro p{color:var(--ink);font-weight:600}