아코디언

다 펼치면 너무 긴 글을, 제목만 보여 주고 필요한 것만 열어 읽게 하는 조각.

실제 미리보기

출처

HTML CSS

<div class="dc-acc">
  <details class="dc-acc__item" open>
    <summary class="dc-acc__head">
      <span class="dc-acc__title">배송은 얼마나 걸리나요?</span>
      <span class="dc-acc__sign" aria-hidden="true"></span>
    </summary>
    <div class="dc-acc__body">
      <p class="dc-acc__text">결제가 확인된 뒤 평일 기준 2~3일 안에 받으실 수 있습니다. 주말과 공휴일에는 배송이 쉽니다.</p>
    </div>
  </details>
  <details class="dc-acc__item">
    <summary class="dc-acc__head">
      <span class="dc-acc__title">반품 비용은 누가 내나요?</span>
      <span class="dc-acc__sign" aria-hidden="true"></span>
    </summary>
    <div class="dc-acc__body">
      <p class="dc-acc__text">상품에 문제가 있으면 저희가 냅니다. 단순 변심이면 왕복 배송비 5,000원이 환불 금액에서 빠집니다.</p>
    </div>
  </details>
  <details class="dc-acc__item">
    <summary class="dc-acc__head">
      <span class="dc-acc__title">영수증을 다시 받을 수 있나요?</span>
      <span class="dc-acc__sign" aria-hidden="true"></span>
    </summary>
    <div class="dc-acc__body">
      <p class="dc-acc__text">주문 내역에서 언제든 다시 내려받을 수 있습니다. 사업자 지출 증빙으로 바꾸는 것도 같은 자리에서 됩니다.</p>
    </div>
  </details>
</div>

.dc-acc { border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); overflow:hidden; font-family:var(--dc-font); }
.dc-acc__item + .dc-acc__item { border-top:1px solid var(--dc-line); }
.dc-acc__head { display:flex; align-items:center; gap:var(--dc-3); min-height:52px; padding:var(--dc-3) var(--dc-4); list-style:none; cursor:pointer; color:var(--dc-text); font-size:15px; font-weight:600; }
.dc-acc__head::-webkit-details-marker { display:none; }
.dc-acc__head:hover { background:var(--dc-sunken); }
.dc-acc__title { flex:1 1 auto; min-width:0; }
.dc-acc__sign { position:relative; flex:0 0 auto; width:20px; height:20px; color:var(--dc-text-sub); }
.dc-acc__sign::before, .dc-acc__sign::after { content:""; position:absolute; top:9px; left:3px; width:14px; height:2px; border-radius:var(--dc-r-full); background:currentColor; transition:transform var(--dc-fast); }
.dc-acc__sign::after { transform:rotate(90deg); }
.dc-acc__item[open] .dc-acc__sign::after { transform:rotate(0deg); }
.dc-acc__body { padding:0 var(--dc-4) var(--dc-4); }
.dc-acc__text { margin:0; color:var(--dc-text-sub); font-size:14px; line-height:1.7; }
.dc-acc--flush { border:0; border-radius:0; background:none; }
.dc-acc--flush .dc-acc__item { border-top-color:var(--dc-line); }
.dc-acc--flush .dc-acc__head { padding-left:0; padding-right:0; }
.dc-acc--flush .dc-acc__head:hover { background:none; color:var(--dc-brand-text); }
.dc-acc--flush .dc-acc__body { padding-left:0; padding-right:0; }

이렇게 씁니다

제목만 읽고도 안에 무엇이 있는지 짐작되게 쓴다
처음 온 사람이 꼭 읽어야 하는 내용은 접지 않는다
한 번에 하나만 열리게 하려면 details 에 같은 name 을 준다

주의할 점

div 와 클릭 스크립트로 만들지 말고 details/summary 로 만든다 — 키보드와 스크린리더가 그냥 된다
Ctrl+F 검색은 접힌 글을 찾지 못한다. 중요한 한 줄은 밖에 남긴다

다음에 볼 것