<details> 태그로 접기/펼치기

마크다운 자체에는 토글 문법이 없지만, HTML의 <details><summary> 태그로 클릭하면 펼쳐지는 영역을 만들 수 있습니다. GitHub을 비롯한 많은 곳에서 지원합니다.

<details>
<summary>클릭해서 펼치기</summary>

여기에 숨겨둘 내용을 적습니다.

</details>

<summary> 안의 글자가 평소에 보이는 제목이 되고, 그 아래 내용은 접혀 있다가 클릭하면 나타납니다.

안에 마크다운을 쓰려면 빈 줄

<details> 안에서 마크다운 문법(목록·코드 등)을 쓰려면, 태그와 내용 사이에 빈 줄을 넣어야 제대로 렌더됩니다.

<details>
<summary>설치 방법</summary>

1. 저장소를 클론합니다
2. `npm install` 실행
3. `npm run dev` 실행

</details>

처음부터 펼쳐 두기

<details>open 속성을 주면 기본으로 펼쳐진 상태가 됩니다.

<details open>
<summary>기본으로 열려 있음</summary>
내용
</details>

언제 쓰면 좋을까

  • 긴 에러 로그나 코드를 접어 두어 문서를 깔끔하게
  • README의 FAQ나 "자세히 보기" 영역
  • 선택적으로 읽어도 되는 부가 설명

긴 내용을 숨겨 핵심만 보이게 하면 문서 가독성이 크게 올라갑니다.