제안 시스템

디자인킷 · 표

금지·대체 표현 표(위험 표현 · 이유 · 대신 쓰는 방향)

D-표-금지대체표현

금지·대체 표현 표(위험 표현 · 이유 · 대신 쓰는 방향)

언제 쓰는가

쓰면 안 되는 표현과 그 이유, 대신 쓰는 방향을 나란히 놓는 3열 표. 위험 표현은 취소선, 대체 방향 열을 강조. 업종별 소재 심의 기준, 한정·긴박 표현 기준, 표시광고 유형별 입증 자료에 사용. 3열 고정, 행 3~6개, 칸 문구 2줄(약 30자). 값 바꾸는 법: 행마다 위험 표현(td.x 의 s 안), 이유, 대체 방향(td.g) 교체. 행 3~6개. 6행이면 td padding 20px 를 13px 로. 머리줄 이름을 바꿔 "유형 · 필요한 입증 자료 · 표기 방식"처럼도 사용(취소선이 필요 없으면 s 태그 삭제).

참고

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작. 하지 말 것과 할 것을 한 줄에 맞세우는 방식은 브랜드 가이드라인의 do · don't 표 참고.

조각

<div class="dk dk-ban"><div class="dk-card"><table>
<colgroup><col style="width:320px"><col><col style="width:380px"></colgroup>
<thead><tr><th>위험 표현 유형</th><th>왜 문제인가</th><th class="g">대신 쓰는 방향</th></tr></thead>
<tbody>
<tr><td class="x"><s>임플란트 전문의·전문 병원</s></td><td>현행법상 인정되지 않는 표현으로 허위 광고 판단 사례</td><td class="g">진료 범위와 의료진 이력 사실 표기</td></tr>
<tr><td class="x"><s>환자 후기·체험담</s></td><td>의료법상 금지, 광고로 판정</td><td class="g">치료 과정 설명형 콘텐츠</td></tr>
<tr><td class="x"><s>반드시 효과, 미평가 신의료기술</s></td><td>효과 단정·미평가 기술 광고 금지</td><td class="g">원리와 주의사항 안내</td></tr>
<tr><td class="x"><s>시술비·이벤트 조건 작은 글씨</s></td><td>기만적 광고</td><td class="g">본문과 같은 폰트·크기</td></tr>
</tbody></table></div></div>

스타일

.dk-ban table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-ban 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-ban td{font-size:var(--f-body);color:var(--ink2);padding:20px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-ban tbody tr:last-child td{border-bottom:0}
.dk-ban td.k{font-weight:700;color:var(--ink)}
.dk-ban td.v{font-weight:500;color:var(--ink)}
.dk-ban td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-ban tr.hot td{background:var(--acw)}
.dk-ban tr.hot td.k{color:var(--ac)}
.dk-ban .dk-card{padding:20px 24px 12px}
.dk-ban table{border-collapse:separate;border-spacing:0}
.dk-ban td.x{font-weight:600;color:var(--mu)}
.dk-ban td.x s{text-decoration-color:var(--g3)}
.dk-ban th.g{color:var(--ac)}
.dk-ban td.g{background:var(--acw);font-weight:600;color:var(--ink);border-bottom-color:var(--card)}
.dk-ban tbody tr:first-child td.g{border-radius:var(--r-sm) var(--r-sm) 0 0}
.dk-ban tbody tr:last-child td.g{border-radius:0 0 var(--r-sm) var(--r-sm)}