소프트웨어Markdown

8편. Markdown in Practice

, , , , , ,

목차

  1. 목차 만들기
  2. 접고 펴는 기능 만들기

알림 : 본 페이지는 Markdown을 사용하면서 조금 응용하면 재밋는 걸 만들 수 있을 때 작성하려 한다. 그러므로 이 페이지는 어느 날 불현듯 업데이트 될 수도, 혹은 영원히 안 될 수도 있다. 😉



목차 만들기

본 페이지의 목차에서 사용하는 Markdown에서 목차를 만들 때는 내부 링크 Internal Links를 사용한다. HTML에서는 Anchored Link라고 불리던 문법이며, 페이지 내 특정 영역에 링크를 걸어두고 그 부분으로 이동하는 방식이다.

Markdown에서도 비슷한 방식으로 사용할 수 있다. 제목 강조와 내부 링크를 활용한 방법이다.

먼저 제목 강조 표시를 생성한다.

1
#### 목차 예제로 이동
목차 예제로 이동하는 예제를 위해 만든 제목

그 후 ####으로 강조한 부분의 제목을 사용하여 링크를 생성한다. 이 때 링크 작성 시 띄어쓰기한 부분은 - 기호로 이어주어야 한다.

1
[목차 예제로 이동하는 예제를 위해 만든 제목](#목차-예제로-이동하는-예제를-위해-만든-제목)

목차 예제로 이동하는 예제를 위해 만든 제목

제목 강조는 # 1개부터 6개까지 상관 없으며, 링크를 만들면 해당 제목으로 이동한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
# 제목1
## 제목2
### 제목3
#### 제목4
##### 제목5
###### 제목6

[제목1](#제목1)
[제목2](#제목2)
[제목3](#제목3)
[제목4](#제목4)
[제목5](#제목5)
[제목6](#제목6)

제목1

제목2

제목3

제목4

제목5
제목6



제목1
제목2
제목3
제목4
제목5
제목6



※ 목차 선택 후 목차로 돌아오고 싶을 때는 브라우저 뒤로가기를 선택하면 된다.



접고 펴는 기능 만들기

블로그에 글을 작성하다보면, 특히 기술 블로그 종류의 글을 작성하다보면, 해당 기술과 관련한 모든 기본적인 내용들을 설명하기에 페이지의 구성이나 심미적인 부분에서 컨텐츠의 위치를 배치하기에 버거울 때가 있다. 그래서 평소에는 감추어져 있다가 필요 시 클릭하면 내용이 펼쳐지는 기능을 사용하고 싶은 욕망이 발생하는데, 아쉽게도 Markdown에서는 접고 펴는 기능에 대한 문법을 제공하지 않는다. 대신 HTML을 사용하면 된다.

GFM에서 HTML의 Details Element를 지원하며 사용 방식이 아주 쉬우므로, 이를 이용하여 접고 펴는 기능을 사용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
<details>
  <summary>여기를 클릭하여 펼치고, 닫기</summary>
  
  HTML <details> 요소는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다.

  정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용합니다.
</details>

  ```
  ※ 출처 - https://developer.mozilla.org/ko/docs/Web/HTML/Element/details
  ```
여기를 클릭하여 펼치고, 닫기

HTML <details> 요소는 “열림” 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다.

정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용합니다.

1
※ 출처 - https://developer.mozilla.org/ko/docs/Web/HTML/Element/details