질문 3개와 답 한 줄

장을 질문으로 풀어 갈 때. 질문은 크게, 답은 바로 아래 한 줄. 질문 3개 고정, 질문 28자 이내, 답 1~2줄. 값 바꾸는 법: .q 하나가 질문(h3)과 답(p, 맨 앞 b 는 한 낱말 답). 3개 고정. 강조색은 Q 번호에만.

질문을 소제목으로 쓰는 FAQ 조판과 컨설팅 문서의 'key questions' 장. 글머리표 대안 정리 글(Visme 'bullet points presentation' https://visme.co/blog/bullet-points-presentation/ , SlideGenius '3 Bullet Point Alternatives' https://www.slidegenius.com/blog/3-bullet-point-alternatives-that-will-improve-your-deck , Maurizio La Cava FAQ https://www.mauriziolacava.com/en/faq/creative-alternatives-to-using-bullet-points-on-a-slide/)의 '목록을 구조로 바꾼다'는 방식 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tqa">
  <div class="q"><span class="n num">Q1</span><div><h3>지금 예산으로 목표 전환 수를 채울 수 있는가</h3><p><b>가능.</b> 단, 일반 키워드 비중을 줄이고 세부 키워드와 리타기팅으로 옮기는 조정이 전제</p></div></div>
  <div class="q"><span class="n num">Q2</span><div><h3>어느 매체부터 손봐야 하는가</h3><p><b>검색.</b> 브랜드 검색 첫 화면의 자사 점유가 낮아 다른 매체 효과가 새는 상태</p></div></div>
  <div class="q"><span class="n num">Q3</span><div><h3>성과는 언제부터 확인되는가</h3><p><b>5주차.</b> 4주 집행 결과를 같은 기준으로 정리한 첫 보고에서 확인</p></div></div>
</div>

.dk-tqa{border-top:1px solid var(--line2)}
.dk-tqa .q{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;min-height:122px;border-bottom:1px solid var(--line)}
.dk-tqa .q:last-child{border-bottom-color:var(--line2)}
.dk-tqa .n{font-size:var(--f-h);font-weight:700;color:var(--ac);line-height:1;letter-spacing:-.02em}
.dk-tqa h3{margin:0;font-size:var(--f-xl);font-weight:700;line-height:1.35;letter-spacing:-.02em}
.dk-tqa p{margin:6px 0 0;font-size:var(--f-md);color:var(--ink2)}
.dk-tqa p b{margin-right:6px}