숏컷 코드
<details>
<summary>자세히 보기</summary>
추가 설명을 이 안에 넣습니다.
</details>
<!-- 이 메모는 렌더링되지 않습니다. -->문법
<details>와 <summary>는 접고 펼치는 섹션을 만들 때 쓴다
<details>와 <summary>는 HTML 요소이지만 GitHub 같은 많은 Markdown 렌더러에서도 잘 동작합니다. 긴 로그, 보조 설명, 선택형 참고 자료처럼 기본 흐름을 방해하지 않으면서 필요할 때만 보여주고 싶은 내용을 숨기는 데 적합합니다.
<details>
<summary>설치 로그 보기</summary>
```bash
npm install
npm run build
```
</details>open 속성을 붙이면 처음부터 펼쳐 둔 상태로 시작한다
<details open>처럼 쓰면 문서를 열자마자 내용이 펼쳐진 상태로 표시됩니다. 기본은 닫힌 상태이므로, "처음엔 간단히 보여 주고 원하면 더 본다"는 구조에 잘 맞습니다.
<details open>
<summary>현재 사용 중인 설정</summary>
기본값으로 이 섹션은 펼쳐져 있습니다.
</details>HTML 주석은 문서 안에 메모를 남길 때 쓴다
<!-- 주석 --> 형식은 렌더링 결과에는 보이지 않고 원문에만 남습니다. 작성 메모, TODO, 편집 힌트처럼 독자에게는 숨기고 협업자에게만 남기고 싶은 내용을 적을 때 유용합니다.
<!-- TODO: 다음 릴리스에서 예시 업데이트 -->
<!-- 이 문단은 v2 기준입니다. v3로 바꾸면 같이 수정 -->접는 섹션은 부가 정보에 쓰고, 핵심 설명은 본문에 둔다
<details>는 보조 정보에 적합합니다. 핵심 개념 자체를 접어 두면 처음 읽는 사람이 중요한 내용을 놓치기 쉽습니다. 본문은 먼저 이해되게 쓰고, 예시나 로그처럼 길어지는 내용만 접는 쪽이 문서 흐름이 좋습니다.
또한 HTML 주석은 협업 메모에는 유용하지만, 독자에게 필요한 안내를 숨기는 용도로 쓰면 안 된다. "렌더링되지 않는다"는 성질 때문에 설명까지 주석으로 넣으면 문서 계약이 소스 안에만 남는다.
선택 기준
| 상황 | 추천 방식 |
|---|---|
| 보조 설명, 로그, 추가 예시를 접어 두기 | <details> + <summary> |
| 처음부터 펼쳐 둔 상태로 보여 주기 | <details open> |
| 문서 안에 메모만 남기기 | <!-- 주석 --> |
| HTML 렌더링을 지원하지 않는 환경 | 별도 섹션이나 일반 Markdown으로 분리 |
| 핵심 설명을 항상 먼저 보여 줘야 할 때 | <details> 대신 본문/제목 사용 |
주의할 점
코드 블록 안에 다시 백틱 코드 블록을 넣을 때는 바깥 fence를 더 길게 쓰거나 ~~~~처럼 다른 fence를 써야 합니다. 그렇지 않으면 MDX나 Markdown 파서가 블록 경계를 잘못 읽어 빌드 오류가 날 수 있습니다.
<!-- 배포 시 꼭 확인 -->이 주석은 소스에는 남지만 독자에게는 전혀 보이지 않습니다. 독자 행동을 바꿔야 하는 정보라면 주석이 아니라 본문이나 callout으로 보여 줘야 합니다.
참고 링크
2 sources