디자인킷 · 띠
띠 · 전 → 후 한 줄
D-띠-전후한줄
언제 쓰는가
본문 조각 아래에 바뀌기 전과 후를 화살표로 이어 한 줄로 둘 때. 앞뒤 문구 각각 28자 이내. 값 바꾸는 법: p.a=바뀌기 전, p.b=바뀐 뒤. 각 p 의 i=꼬리표(현재, 개편 후 등), 그 뒤가 문구. 한 줄에 들어가는 길이로.
참고
직접 제작. 개선 전후 대비 장표의 화살표 흐름 표기를 참고.
조각
<div class="dk dks dks-ba"><p class="a"><i>현재</i>핵심 키워드 120개, 수동 입찰 주 1회 조정</p><span class="ar">→</span><p class="b"><i>개편 후</i>키워드 480개, 자동 입찰과 일 단위 점검 병행</p></div>
스타일
.dks-ba{background:var(--soft);border-radius:var(--r-sm);padding:14px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.dks-ba p{margin:0;display:flex;align-items:baseline;gap:12px;font-size:var(--f-body);color:var(--ink2)}
.dks-ba p i{flex:none;font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dks-ba p.b{color:var(--ink);font-weight:600}
.dks-ba p.b i{color:var(--ac)}
.dks-ba .ar{font-size:var(--f-lg);line-height:1;color:var(--g3)}