details shortcode

details는 HTML의 <details> / <summary> 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.

공식 문서 기준으로 summary, open, class, name, title 인자를 받을 수 있습니다. summary는 접혀 있을 때 보이는 제목이고, open은 처음부터 펼칠지 여부를 정합니다. class는 스타일링을 위한 훅이고, name과 title은 브라우저와 접근성 도구에서 추가 의미를 줄 때 유용합니다. citeturn123799view0

렌더링 결과

원형

{{< details
  summary="세부 설명 보기"
  open=true
  class="lab-details"
  name="details-lab"
  title="Hugo details shortcode 예시"
>}}
이 안의 내용은 처음부터 펼쳐진 상태로 보입니다.

- 복잡한 설정을 단계별로 설명할 때 좋습니다.
- 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다.

<!--
이 주석은 예제 원형에만 들어가고, 실제 렌더링된 HTML에서는 보이지 않습니다.
-->
{{< /details >}}

해석 포인트

• summary는 사실상 버튼 역할을 합니다.
• open=true를 주면 독자가 클릭하지 않아도 내용을 확인할 수 있습니다.
• class를 분리해 두면 테마 전역 스타일과 구분하기 쉽습니다.
• 내부 본문은 일반 Markdown으로 써도 되므로, 문단과 목록을 자연스럽게 섞을 수 있습니다.

추천 사용처

• 실험 결과를 접어 두고 싶을 때
• API 옵션 설명을 부연하고 싶을 때
• 본문을 가볍게 유지하면서 추가 정보를 제공하고 싶을 때