디자인킷 · 반폭
반폭 · 전제와 가정 목록
D-반폭-전제가정목록
언제 쓰는가
목표 수치나 일정이 기대는 전제를 밝히고, 어긋날 때의 조치를 함께 적을 때. 3~4개, 전제 20자 이내, 조치 22자 이내. 값 바꾸는 법: .r 하나가 한 전제. .n=번호, .t=전제, .d=조치(앞의 span 「어긋날 때」는 그대로). 3~4개.
참고
직접 제작. 사업 계획과 성과 추정 문서의 가정 목록(assumption log) 방식 참고. 전제마다 어긋날 때의 조치를 붙임.
조각
<div class="dk dkh dkh-t-assume"><div class="dk-card"><p class="dk-lb">목표 수치의 전제</p><div class="ls"> <div class="r"><span class="n">전제 1</span><div><div class="t">월 광고 예산 현 수준 유지</div><div class="d"><span>어긋날 때</span>감액 시 목표 전환 건수 재산정</div></div></div> <div class="r"><span class="n">전제 2</span><div><div class="t">전환 측정 태그 정상 작동</div><div class="d"><span>어긋날 때</span>누락 발견 시 해당 기간 수치 제외</div></div></div> <div class="r"><span class="n">전제 3</span><div><div class="t">성수기 입찰가 상승 20% 이내</div><div class="d"><span>어긋날 때</span>초과 시 검색어 범위 축소</div></div></div> <div class="r"><span class="n">전제 4</span><div><div class="t">랜딩 페이지 개편 일정 준수</div><div class="d"><span>어긋날 때</span>지연 시 전환율 목표 1개월 순연</div></div></div> </div></div></div>
스타일
.dkh-t-assume .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-assume .dk-lb{margin:0 0 10px}
.dkh-t-assume .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-assume .r{flex:1;display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.dkh-t-assume .r:first-child{border-top-color:var(--line2)}
.dkh-t-assume .n{font-size:var(--f-cap);color:var(--mu);white-space:nowrap;font-variant-numeric:tabular-nums}
.dkh-t-assume .t{font-size:var(--f-sm);font-weight:600;line-height:1.45}
.dkh-t-assume .d{font-size:var(--f-cap);color:var(--ink2);line-height:1.45}
.dkh-t-assume .d span{margin-right:8px;color:var(--ink);font-weight:600}