반폭 · 3열 소형 표(3~4행)

장의 절반 칸에 대상, 역할, 지표처럼 세 가지 속성을 3~4행으로 놓을 때. 첫 열 6자 이내, 둘째 열 20자 이내, 셋째 열 14자 이내. 강조 행 1개. 값 바꾸는 법: .hr 의 span 3개가 열 제목. .r 하나가 한 행(span 3개: 첫 열 .k). 강조 행 하나에 class="hot". 행 3~4개. 열 폭은 CSS 의 grid-template-columns 한 줄로 조정.

직접 제작. 컨설팅 보고서의 요약 표처럼 세로선 없이 가로선만 두고 머리 행을 작은 회색 글자로 낮추는 방식 참고.

<div class="dk dkh dkh-t-tb3"><div class="dk-card"><p class="dk-lb">매체별 역할과 측정 지표</p><div class="tb"><div class="hr"><span>매체</span><span>역할</span><span>측정 지표</span></div>
<div class="r hot"><span class="k">검색 광고</span><span>구매 의도 높은 검색 수요 확보</span><span>전환율, 전환 건수</span></div>
<div class="r"><span class="k">디스플레이</span><span>신규 방문자 유입 확대</span><span>도달 수, 신규 방문 비율</span></div>
<div class="r"><span class="k">영상</span><span>브랜드 인지 형성</span><span>조회 완료율</span></div>
<div class="r"><span class="k">리타게팅</span><span>이탈 방문자 재유입</span><span>재방문 전환율</span></div>
</div></div></div>

.dkh-t-tb3 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-tb3 .dk-lb{margin:0 0 10px}
.dkh-t-tb3 .tb{flex:1;min-height:0;display:flex;flex-direction:column;font-size:var(--f-sm);line-height:1.5}
.dkh-t-tb3 .hr,.dkh-t-tb3 .r{display:grid;grid-template-columns:84px 1.25fr 1fr;column-gap:14px;align-items:center}
.dkh-t-tb3 .hr{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 8px;border-bottom:1px solid var(--line2)}
.dkh-t-tb3 .r{flex:1;padding:8px 0;border-top:1px solid var(--line);color:var(--ink2)}
.dkh-t-tb3 .hr + .r{border-top:0}
.dkh-t-tb3 .r .k{font-weight:600;color:var(--ink);white-space:nowrap}
.dkh-t-tb3 .r.hot .k{color:var(--ac)}