디자인킷 · 도식
3열 기둥(주제 · 설명 · 근거)
D-도식-기둥3열
언제 쓰는가
제안의 세 가지 축(원칙, 강점, 전략 방향)을 같은 무게로 나란히 놓을 때. 열 3개 고정, 열마다 주제(8자 이내)·설명 2줄·근거 수치 1개와 그 설명. 값 바꾸는 법: .t=주제(번호와 이름), 다음 줄 .c 3칸=설명, 마지막 줄 .c.e 3칸=근거 수치와 그 뜻. 가장 앞세울 열 하나의 .t 와 .e 에 class="hot".
참고
slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. Deckary MBB 장표 유형 정리(https://deckary.com/blog/consulting-slide-templates): 3개 기둥(pillar) 장표. 상자 대신 세로 가는 선과 행 이름으로 구분. 구성 방식만 참고, 그림과 코드는 직접 제작.
조각
<div class="dk dk-pillar"> <div class="lb"></div><div class="t"><span class="n num">01</span><h3>정확한 측정</h3></div><div class="t hot"><span class="n num">02</span><h3>빠른 조정</h3></div><div class="t"><span class="n num">03</span><h3>쌓이는 기록</h3></div> <div class="lb">설명</div><div class="c">전환 기준을 하나로 통일하고 주문 번호로 대조</div><div class="c">주 단위로 묶음 성과를 비교해 예산 이동</div><div class="c">시험한 가설과 결과를 한 문서에 누적</div> <div class="lb">근거</div><div class="c e"><b class="num">5%</b>매체 수치와 실제 주문의 허용 오차</div><div class="c e hot"><b class="num">주 1회</b>예산 재배분 주기</div><div class="c e"><b class="num">월 8건</b>소재 시험 기록 건수</div> </div>
스타일
.dk-pillar{display:grid;grid-template-columns:72px repeat(3,minmax(0,1fr))}
.dk-pillar .t,.dk-pillar .c{padding-left:32px;padding-right:32px;border-left:1px solid var(--line)}
.dk-pillar .t{padding-bottom:22px}
.dk-pillar .n{font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-pillar h3{font-size:28px;font-weight:700;margin:2px 0 0;line-height:1.3;letter-spacing:-.02em}
.dk-pillar .lb{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-top:22px;border-top:1px solid var(--line)}
.dk-pillar .lb:first-child{border:0}
.dk-pillar .c{font-size:var(--f-md);color:var(--ink2);padding-top:20px;padding-bottom:24px;position:relative}
.dk-pillar .c::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.dk-pillar .e{font-size:var(--f-sm);color:var(--mu);padding-bottom:4px}
.dk-pillar .e b{display:block;font-size:var(--f-num);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.dk-pillar .t.hot h3,.dk-pillar .e.hot b{color:var(--ac)}