디자인킷 · 반폭
반폭 · 금지 표현과 대체 표현 표
D-반폭-금지대체표현표
언제 쓰는가
쓰면 안 되는 문구와 바꿔 쓸 문구를 한 줄씩 짝지어 보일 때. 3~5행, 금지 표현 10자 이내, 대체 표현 22자 이내. 값 바꾸는 법: .r 하나가 한 쌍. .x=금지 표현(취소선), .y=대체 표현. 가운데 .a 화살표는 그대로 둔다. 3~5행.
참고
직접 제작. 편집 스타일 가이드의 「이렇게 쓰지 않는다 → 이렇게 쓴다」 표 방식 참고.
조각
<div class="dk dkh dkh-t-swap"><div class="dk-card"><p class="dk-lb">금지 표현과 대체 표현</p><div class="tb"><div class="hr"><span>금지 표현</span><span></span><span class="to">대체 표현</span></div> <div class="r"><span class="x">업계 1위</span><span class="a">→</span><span class="y">조사 기관과 기간을 밝힌 순위</span></div> <div class="r"><span class="x">부작용 없음</span><span class="a">→</span><span class="y">시험 조건과 대상 인원 명시</span></div> <div class="r"><span class="x">효과 100% 보장</span><span class="a">→</span><span class="y">사용자 설문 만족 비율 표기</span></div> <div class="r"><span class="x">오늘만 특가</span><span class="a">→</span><span class="y">행사 시작일과 종료일 표기</span></div> </div></div></div>
스타일
.dkh-t-swap .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-swap .dk-lb{margin:0 0 10px}
.dkh-t-swap .tb{flex:1;min-height:0;display:flex;flex-direction:column;font-size:var(--f-sm);line-height:1.5}
.dkh-t-swap .hr,.dkh-t-swap .r{display:grid;grid-template-columns:1fr 16px 1.3fr;column-gap:12px;align-items:center}
.dkh-t-swap .hr{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 8px;border-bottom:1px solid var(--line2)}
.dkh-t-swap .r{flex:1;padding:8px 0;border-top:1px solid var(--line);color:var(--ink2)}
.dkh-t-swap .hr + .r{border-top:0}
.dkh-t-swap .hr .to{color:var(--ac);font-weight:600}
.dkh-t-swap .r .x{color:var(--mu);text-decoration:line-through;text-decoration-color:var(--g2)}
.dkh-t-swap .r .a{color:var(--g3);text-align:center}
.dkh-t-swap .r .y{color:var(--ink);font-weight:600}