3월29일 - readme.md에서 토글 사용하기

개요

readme.md를 작성하다보면 너무 길어져 고민이 될 때가 있다.

우리 팀프로젝트에서도 readme 작성중 너무 내용이 길어져 토글 사용 가능 여부를 봤는데

 

한번도 써본적이 없었는데 다행히 가능한걸로 파악됐다.

쓰는 법은 아래와 같다.

 

사용방법

<details>
  <summary>첫번째토글</summary>
  <!-- 내용 -->
</details>

<details>
  <summary><b>두번째토글</b></summary>
  <!-- 내용 -->
</details>

details 태그 안에서 summary로 토글 제목을 정할 수 있다.

기본적으로 html의 동작과 같기에

예시 코드와 같이 <b> 태그 등을 추가로 사용할 수 있다.

 

그 후 주석처리한 내용 부분부터는 HTML 문법을 사용하면 된다.

사용할 때

<details markdown="1">
  <summary>첫번째토글</summary>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</details>

이렇게 또는

<details>
  <summary>첫번째토글</summary>
  <div markdown="1">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</details>

이런식으로 markdown="1"을 적어주는 예시가 많은데 

안써줘도 잘 되는 것 같아 찾아보면 다음과 같이 설명하고 있다.

그니까 딱 말해서

markdown="1"은 선언한 토글 내부의 HTML 요소들에 대해

마크다운으로 해석하도록 요청하는 역할을 한다고 보면 된다.

 

일단 GitHub에서는 딱히 안써도 상관없는듯한데.. 일단 나는 처음 쓰다 보니 우리 팀프로젝트엔

토글이 아니라 summary밑의 div에다 적어줬는데 문제 없이 잘 됐다.

아무튼 

응용한다면 아래처럼 사용할 수 있다.

 

<details>
  <summary><b>포토스팟 콜렉션</b></summary>
  <div markdown="1">
    <ul>
      <li>카카오 맵을 이용해 원하는 좌표 내 포토스팟 저장 기능</li>
      <li>포토스팟 저장 시 최대 5장의 사진 저장 기능</li>
      <img src="./docs/주요_기능/포토스팟_콜렉션/1.gif" width=70%>
      <img src="./docs/주요_기능/포토스팟_콜렉션/2.gif" width=70%>
      <li>콜렉션에 있는 포토스팟 리스트를 확인하고 해당 포토스팟을 클릭하면 해당 좌표로 이동</li>
      <img src="./docs/주요_기능/포토스팟_콜렉션/3.gif" width=70%>
      <li>마음에 드는 콜렉션에 나의 반응을 표현할 수 있는 좋아요 기능</li>
      <img src="./docs/주요_기능/포토스팟_콜렉션/4.gif" width=70%>
      <li>포토스팟에 등록된 사진을 모아보고 비슷한 사진을 추천하는 기능</li>
      <img src="./docs/주요_기능/포토스팟_콜렉션/5.gif" width=70%>
    </ul>
  </div>
</details>

 

더 다양한 사용 방법은 아래 readme를 참고하길

https://github.com/chalkak2023/Chalkak-Backend

GitHub - chalkak2023/Chalkak-Backend: 찰칵! 당신의 순간을 담을게요.