디자인킷 · 표
긴 표 2열 9~10행(번호·항목·내용)
D-표-긴표2열10행
언제 쓰는가
단계나 점검 항목이 8~10개인 2열 본문(항목, 내용)을 한 장에 담는 표. 글자는 16px 그대로, 행 높이만 줄임. 행 8~10개, 내용은 한 줄(약 50자)까지. 기획 단계 목록, 운영 기준 목록에 사용. 값 바꾸는 법: 행을 그대로 늘리거나 줄임(8~10행). 번호 열이 필요 없으면 첫 col 과 td.n 삭제. 내용이 한 줄을 넘는 행이 3개 이상이면 9행까지만. 강조 행 하나에 class="hot".
참고
표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작.
조각
<div class="dk dk-long2"><div class="dk-card"><table> <colgroup><col style="width:56px"><col style="width:190px"><col></colgroup> <thead><tr><th></th><th>단계</th><th>내용</th></tr></thead> <tbody> <tr><td class="n num">01</td><td class="k">상권</td><td>유동 인구 수치보다 타깃과 상권 이미지의 일치. 업종 등록 조건 확인</td></tr> <tr><td class="n num">02</td><td class="k">계약과 행정</td><td>원상복구 범위를 항목별 명시, 도로 점용과 안전 서류는 관할 구청 기준 확인</td></tr> <tr class="hot"><td class="n num">03</td><td class="k">동선</td><td>진입, 체험, 구매, 퇴장 네 단계. 체험과 구매 구역 분리, 퇴장 정체 방지</td></tr> <tr><td class="n num">04</td><td class="k">연출</td><td>포토존 분산 배치, 조명 방향과 색온도, 브랜드 메시지와 연결된 오브제</td></tr> <tr><td class="n num">05</td><td class="k">한정 상품</td><td>팝업 전용 구성, 재고 소진 속도 실시간 파악</td></tr> <tr><td class="n num">06</td><td class="k">예약과 대기</td><td>예약·대기 등록과 순서 확인, 취소 기능으로 노쇼 축소</td></tr> <tr><td class="n num">07</td><td class="k">인력</td><td>정상 절차와 예외 상황을 함께 적은 운영 지침, 안전사고와 불만 대응 절차</td></tr> <tr><td class="n num">08</td><td class="k">확산</td><td>일반 공개 전 초청 행사로 콘텐츠 선확보, 해시태그와 소소한 보상 구조</td></tr> <tr><td class="n num">09</td><td class="k">철거</td><td>원상복구 점검, 재고 회수 물류, 정산 대조</td></tr> </tbody></table></div></div>
스타일
.dk-long2 table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-long2 th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-long2 td{font-size:var(--f-body);color:var(--ink2);padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-long2 tbody tr:last-child td{border-bottom:0}
.dk-long2 td.k{font-weight:700;color:var(--ink)}
.dk-long2 td.v{font-weight:500;color:var(--ink)}
.dk-long2 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-long2 tr.hot td{background:var(--acw)}
.dk-long2 tr.hot td.k{color:var(--ac)}
.dk-long2 .dk-card{padding:20px 24px 12px}
.dk-long2 .dk-card{padding:16px 24px 6px}
.dk-long2 th{padding-bottom:8px}
.dk-long2 td{line-height:1.3}
.dk-long2 td.n{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-right:0}
.dk-long2 tr.hot td.n{color:var(--ac)}