[GitHub] 마크 다운 문법으로 글 접고 펼치기 - (details태그 사용)

이번에는 <details> 태그에 대해 간단하게 정리할 것이다.

 

먼저 글 접고 펼치기란

깃 허브 위키(Wike) 혹은 README.md(리드미) 파일 혹은 글을 보았을 때 버튼을 클릭하면 글이 펼쳐지고,

다시 클릭하면 글이 접히는 것을 보았을 것이다.

 

이 방법을 마크 다운으로 하는 방법을 정리하는 것이다.

나는 주로 GitHub에서 프로젝트 README.md 파일을 작성할 때 혹은 Wike를 작성할 때 사용하였다.

 

https://github.com/chaehyuenwoo/SpringBoot-Project-MEGABOX/wiki/%EC%A3%BC%EC%9A%94-%EA%B8%B0%EB%8A%A5-%EC%86%8C%EA%B0%9C(Member) 

GitHub - chaehyuenwoo/SpringBoot-Project-MEGABOX: 스프링 부트 + JSP 파싱_영화 예매 사이트

위의 링크는 내가 작성한 GitHub Wike이다. 

 

버튼 클릭 전

버튼 클릭 후

위의 화면을 보면 버튼을 클릭하면 소스 코드가 펼쳐지는 것을 볼 수 있다. 

 

HTML5에서부터 추가된 <details> 태그를 사용하면 마크다운에서도 글 접기/펼치기가 가능하다.

 

마크다운 문법이 오래된 문법이다 보니 해당 기능을 지원하지 않아서, HTML 태그를 마크다운 문법에

직접 적용하면 된다.

## 접기 시작

<details>
<summary>접기/펼치기</summary>

접은 내용(ex 소스 코드)
</details>

## 접기 끝

좌측 : 접기  /  우측 : 펼치기 _<details>태그

위의 소스 코드를 작성하면 상단의 화면처럼 나올 것이다.

접기/펼치기 버튼을 클릭하면 우측 화면처럼 접은 내용이 펼쳐지게 된다.