본문 서술과 낱말 풀이 상자

본문에 낯선 용어가 섞일 때 본문은 그대로 두고 오른쪽 상자에서 뜻을 풀어 줌. 본문 단락 2~3개(단락당 2줄 이내), 낱말 3~4개. 값 바꾸는 법: 왼쪽 section 하나가 단락(h3 소제목, p 서술). 풀이할 낱말을 본문에서 u 로 감싸고, 오른쪽 dl 에 같은 순서로 dt·dd 를 적음. 낱말 3~4개.

잡지·교재 편집에서 본문 옆에 두는 낱말 풀이 단(sidebar glossary)과 본문 속 점선 밑줄 표시. 컨설팅 장표 규칙 해설(Deckary 'consulting slide standards' https://deckary.com/blog/consulting-slide-standards , 'slide types guide' https://deckary.com/blog/pillar-slide-types-guide)의 무장식·제한된 색·한 장 한 주장 원칙 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tgloss">
  <div class="tx">
    <section><h3>브랜드 검색의 절반이 다른 곳으로 이동</h3><p>브랜드명을 검색한 사람 가운데 자사 채널로 들어오는 비율이 낮은 상태. 첫 화면의 <u>파워링크</u> 자리를 경쟁사가 차지하고 있는 것이 직접 원인</p></section>
    <section><h3>후기 콘텐츠가 오래됨</h3><p><u>뷰 영역</u>에 보이는 글의 대부분이 1년 이상 지난 것. 최근 제품 구성과 맞지 않아 구매 판단에 쓰이지 못함</p></section>
    <section><h3>일반 키워드 비용 상승</h3><p>경쟁이 몰린 낱말에서 <u>평균 노출 순위</u>를 지키는 비용이 오르는 중. <u>세부 키워드</u> 쪽으로 무게를 옮기는 조정 필요</p></section>
  </div>
  <aside class="dk-card">
    <p class="dk-lb">낱말 풀이</p>
    <dl>
      <div><dt>파워링크</dt><dd>네이버 검색 결과 위쪽에 글줄 형태로 나오는 검색 광고</dd></div>
      <div><dt>뷰 영역</dt><dd>블로그와 카페 글이 모여 보이는 검색 결과 구역</dd></div>
      <div><dt>평균 노출 순위</dt><dd>광고가 표시된 자리의 평균 값. 1에 가까울수록 위쪽</dd></div>
      <div><dt>세부 키워드</dt><dd>낱말 두세 개가 붙은 구체적인 검색어</dd></div>
    </dl>
  </aside>
</div>

.dk-tgloss{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:center}
.dk-tgloss .tx{display:flex;flex-direction:column;gap:26px}
.dk-tgloss h3{font-size:var(--f-lg);font-weight:700;margin:0 0 6px;line-height:1.35}
.dk-tgloss .tx p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.65}
.dk-tgloss u{text-decoration:underline dotted var(--g3);text-underline-offset:5px;color:var(--ink);font-weight:600}
.dk-tgloss aside{padding:26px 30px}
.dk-tgloss dl{margin:10px 0 0}
.dk-tgloss dl>div{padding:12px 0;border-top:1px solid var(--line)}
.dk-tgloss dl>div:last-child{padding-bottom:0}
.dk-tgloss dt{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.dk-tgloss dd{margin:2px 0 0;font-size:var(--f-sm);color:var(--ink2)}