기본 패턴
html
<details>
<summary>자세히 보기</summary>
추가 설명을 여기에 적습니다.
</details>
<!-- 이 메모는 렌더링에서 숨겨집니다. -->설명
- Markdown 렌더러가 HTML 일부를 허용하면
<details>와<summary>로 접을 수 있는 블록을 만들 수 있습니다. - 긴 로그, 부가 설명, 선택적 참고 자료를 숨기고 싶을 때 특히 유용합니다.
- HTML 주석
<!-- -->은 렌더링 결과에는 보이지 않지만 원문에는 남아 작성자 메모로 쓸 수 있습니다. - 이런 패턴은 Markdown 순수 문법보다는 렌더러 지원 여부에 더 민감합니다.
짧은 예제
html
<details open>
<summary>설치 로그</summary>
```bash
npm install
npm run build
```
</details>빠른 정리
| 항목 | 설명 |
|---|---|
<details> | 접고 펼칠 수 있는 섹션 |
<summary> | 접힌 상태에서 보이는 라벨 |
open 속성 | 처음부터 펼친 상태로 표시 |
<!-- comment --> | 렌더링에서 숨기는 메모 |
| 렌더러 의존성 | HTML 허용 여부에 따라 동작이 달라질 수 있음 |
주의할 점
핵심 내용을 전부 접어 두면 문서 첫인상이 약해질 수 있습니다. details는 부가 설명을 숨기는 데 쓰고, 핵심 요지는 바깥 본문에 먼저 두는 편이 좋습니다.
참고 링크
2 sources