디자인킷 · 반폭
반폭 · 질문과 답 2쌍
D-반폭-질문답2쌍
언제 쓰는가
광고주가 물을 만한 질문과 답을 2개 놓을 때. 질문 24자 이내, 답 60자 이내(3줄). 값 바꾸는 법: .p 하나가 한 쌍. .q 의 span=질문, .a 의 span=답. Q, A 글자는 그대로 둔다. 2쌍(답이 한 줄씩이면 3쌍).
참고
직접 제작. 제안서 말미의 예상 질의응답(FAQ) 장 구성 참고.
조각
<div class="dk dkh dkh-t-qa"><div class="dk-card"><p class="dk-lb">예상 질문과 답</p><div class="ls"> <div class="p"><div class="q"><i>Q</i><span>성과가 목표에 못 미칠 때의 대응 방식</span></div><div class="a"><i>A</i><span>2주 연속 미달 시 원인 분석과 조정안을 3영업일 안에 제출. 매체 구성과 소재를 먼저 조정하고 예산 증액은 마지막에 검토</span></div></div> <div class="p"><div class="q"><i>Q</i><span>광고 계정과 자료의 소유권</span></div><div class="a"><i>A</i><span>계정, 소재 원본, 성과 자료 모두 광고주 소유. 계약 종료 시 접근 권한과 운영 기록 이관</span></div></div> </div></div></div>
스타일
.dkh-t-qa .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-qa .dk-lb{margin:0 0 10px}
.dkh-t-qa .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-qa .p{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 0;border-top:1px solid var(--line)}
.dkh-t-qa .p:first-child{border-top-color:var(--line2)}
.dkh-t-qa .q,.dkh-t-qa .a{display:grid;grid-template-columns:18px 1fr;column-gap:10px}
.dkh-t-qa .q{font-size:var(--f-body);font-weight:600;line-height:1.45;margin-bottom:4px}
.dkh-t-qa .a{font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dkh-t-qa .q i,.dkh-t-qa .a i{font-style:normal;font-weight:700}
.dkh-t-qa .q i{color:var(--ac)}
.dkh-t-qa .a i{color:var(--g3)}