디자인킷 · 반폭
반폭 · 역할 분담 소형 표(담당과 하는 일)
D-반폭-역할분담4행
언제 쓰는가
운영 인력이나 양사 역할을 담당과 하는 일 2열로 놓을 때. 3~4행, 담당 6자 이내와 보조 한 줄(인원, 주기), 하는 일 30자 이내. 값 바꾸는 법: .r 하나가 한 담당. .k 안의 b=담당 이름, span=인원과 주기, 다음 span=하는 일. 강조 행 하나에 class="hot". 3~4행.
참고
직접 제작. 제안서 조직 장의 역할 정의 표(RACI 축약형) 방식 참고. 담당 아래에 인원과 주기를 작은 글자로 붙여 열 수를 줄임.
조각
<div class="dk dkh dkh-t-role"><div class="dk-card"><p class="dk-lb">운영 인력과 역할</p><div class="tb"><div class="hr"><span>담당</span><span>하는 일</span></div> <div class="r hot"><span class="k"><b>총괄 책임</b><span>1명 · 월간 보고</span></span><span>전략 수립, 예산 배분 결정, 월간 보고 발표</span></div> <div class="r"><span class="k"><b>매체 운영</b><span>2명 · 매일 점검</span></span><span>입찰과 예산 조정, 검색어와 타겟 관리</span></div> <div class="r"><span class="k"><b>소재 제작</b><span>2명 · 격주 교체</span></span><span>배너와 영상 소재 기획, 제작, 교체</span></div> <div class="r"><span class="k"><b>성과 분석</b><span>1명 · 주간 보고</span></span><span>전환 측정 점검, 주간 보고서 작성</span></div> </div></div></div>
스타일
.dkh-t-role .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-role .dk-lb{margin:0 0 10px}
.dkh-t-role .tb{flex:1;min-height:0;display:flex;flex-direction:column;font-size:var(--f-sm);line-height:1.5}
.dkh-t-role .hr,.dkh-t-role .r{display:grid;grid-template-columns:118px 1fr;column-gap:14px;align-items:center}
.dkh-t-role .hr{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 8px;border-bottom:1px solid var(--line2)}
.dkh-t-role .r{flex:1;padding:8px 0;border-top:1px solid var(--line);color:var(--ink2)}
.dkh-t-role .hr + .r{border-top:0}
.dkh-t-role .r{padding:6px 0}
.dkh-t-role .r .k b{display:block;font-weight:600;color:var(--ink)}
.dkh-t-role .r .k span{display:block;font-size:var(--f-cap);color:var(--mu);white-space:nowrap}
.dkh-t-role .r.hot .k b{color:var(--ac)}