Markdown

#01. 마크다운 지원 VScode 익스텐션

익스텐션	개발자	설명
Markdown All in One	Yu Zhang	문법강조, 미리보기 기능 지원
Markdown PDF	yzane	PDF 파일 변환
Markdown Preview Github Styling	Matt Bierner(mattbierner.com)	Github 스타일의 미리보기 지원
vscode-pdf	tomoki1207.dev	PDF 뷰어

#02. 새 Markdown 파일 생성

Visual Studio Code에서 파일 --> 새 텍스트 파일을 선택한다. 단축키 Ctrl + N을 눌러도 좋다.

생성된 파일을 저장하면서 확장자를 *.md로 지정하면 Markdown 파일이 생성된다.

#03. 주요 Markdown 표기법

1. 제목 지정하기

# 기호 뒤에 한 칸 띄우고 제목을 입력한다.

5수준까지 지원된다.

## Heading 1

### Heading 2

#### Heading 3

##### Heading 4

###### Heading 5

미리보기 생략

2. 텍스트 입력하기

일반 텍스트는 편하게 입력하면 된다.

한줄 바꾸기는 적용되지 않으며
두 줄 바꾸기는 새로운 문단을 생성한다.

미리보기

일반 텍스트는 편하게 입력하면 된다.

한줄 바꾸기는 적용되지 않으며 두 줄 바꾸기는 새로운 문단을 생성한다.

3. 목록 구성하기

순서 있는 목록

모든 항목을 1로 지정하면 된다. 1, 2, 3, 4와 같이 연속 적인 번호를 기입해도 된다.

1. 뒤에 공백이 필요하다.

1. item1
1. item2
1. item3
1. item4

미리보기

1. item1
2. item2
3. item3
4. item4

목록의 계층화

하위 목록은 탭키로 밀어 넣어서 지정한다.

1. item1
    1. sub1
    1. sub2
1. item2
    1. sub1
    1. sub2
1. item3
    1. sub1
    1. sub2

미리보기

1. item1
   1. sub1
   2. sub2
2. item2
   1. sub1
   2. sub2
3. item3
   1. sub1
   2. sub2

순서 없는 목록

* 혹은 -를 구분 없이 사용하여 목록을 구성한다. 하위 목록 구성도 가능하다.

* 혹은 - 뒤에 공백이 필요하다.

* item1
    - sub1
    - sub2
* item2
    * sub1
    * sub2
- item3
    - sub2
    - sub2
- item4
    * sub1
    - sub2

미리보기

• item1
  • sub1
  • sub2
• item2
  • sub1
  • sub2
• item3
  • sub2
  • sub2
• item4
  • sub1
  • sub2

순서 있는 목록과 순서 없는 목록 함께 사용하기

1. main1
    * sub1
    * sub2
1. main2
    1. sub-number1
    1. sub-number2
1. main3
    * sub3
    * sub4

미리보기

1. main1
   • sub1
   • sub2
2. main2
   1. sub-number1
   2. sub-number2
3. main3
   • sub3
   • sub4

4. 텍스트 강조하기

**굵은 텍스트**
*기울어진 텍스트*
***굵고 기울어진 텍스트***
~~취소선~~
`인라인 코드`

미리보기

굵은 텍스트 기울어진 텍스트 굵고 기울어진 텍스트 취소선 인라인 코드

5. 링크와 이미지

링크 만들기

[링크 텍스트](URL)
[Google](https://www.google.com)

[참조 링크][1]

[1]: https://www.google.com "Google 홈페이지"

이미지 삽입

![대체 텍스트](이미지 URL)
![로고](https://example.com/logo.png)

![참조 이미지][logo]

[logo]: https://example.com/logo.png "회사 로고"

6. 테이블 만들기

| 제목1 | 제목2 | 제목3 |
|-------|-------|-------|
| 내용1 | 내용2 | 내용3 |
| 내용4 | 내용5 | 내용6 |

| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|:----------|:-----------:|------------:|
| Left      | Center      | Right       |
| 왼쪽      | 가운데      | 오른쪽      |

미리보기

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

7. 인용문과 수평선

인용문

> 이것은 인용문입니다.
>
> 여러 줄로 작성할 수 있습니다.
>
> > 중첩된 인용문도 가능합니다.

수평선

---
***
___

8. 체크박스

- [x] 완료된 작업
- [ ] 미완료 작업
- [x] 또 다른 완료된 작업
- [ ] 해야 할 일

미리보기

• 완료된 작업
• 미완료 작업
• 또 다른 완료된 작업
• 해야 할 일

9. 소스코드 정리하기

코드 블록

역따옴표 세개(```)를 연달아 표시하고 그 뒤에 사용하고자 하는 프로그래밍 언어를 명시한 후 다시 역따옴표 세개로 블록을 만들면 그 안에서 프로그래밍 언어에 대한 문법 강조를 사용할 수 있다.

```python
def hello_world():
    for i in range(5):
        print(f"Hello World {i+1}")

if __name__ == "__main__":
    hello_world()
```

미리보기

def hello_world():
    for i in range(5):
        print(f"Hello World {i+1}")

if __name__ == "__main__":
    hello_world()

지원되는 주요 언어

• javascript, js - JavaScript
• python, py - Python
• java - Java
• html - HTML
• css - CSS
• sql - SQL
• bash, shell - Shell Script
• json - JSON
• xml - XML
• yaml, yml - YAML
• markdown, md - Markdown

10. 수식 표현하기

인라인 수식

이차방정식의 해는 $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$ 입니다.

블록 수식

$$
\begin{align}
E &= mc^2 \\
F &= ma \\
\nabla \cdot \vec{E} &= \frac{\rho}{\epsilon_0}
\end{align}
$$

11. Mermaid 다이어그램

순서도

```mermaid
graph TD
    A[시작] --> B{조건 확인}
    B -->|예| C[작업 수행]
    B -->|아니오| D[대체 작업]
    C --> E[종료]
    D --> E
```

시퀀스 다이어그램

```mermaid
sequenceDiagram
    participant A as 사용자
    participant B as 서버
    participant C as 데이터베이스

    A->>B: 로그인 요청
    B->>C: 사용자 정보 조회
    C-->>B: 사용자 정보 반환
    B-->>A: 로그인 성공
```

#04. Markdown 고급 기능

1. HTML 태그 사용하기

Markdown 내에서 HTML 태그를 직접 사용할 수 있습니다.

<div style="color: red; font-weight: bold;">
빨간색 굵은 텍스트
</div>

<details>
<summary>클릭하여 펼치기</summary>

숨겨진 내용이 여기에 표시됩니다.

</details>

2. 각주 사용하기

이것은 각주가 있는 텍스트입니다[^1].

다른 각주도 있습니다[^note].

[^1]: 이것은 첫 번째 각주입니다.
[^note]: 이것은 명명된 각주입니다.

3. 정의 목록

용어 1
: 용어 1의 정의

용어 2
: 용어 2의 정의
: 추가 정의

4. 키보드 단축키 표현

파일을 저장하려면 <kbd>Ctrl</kbd> + <kbd>S</kbd>를 누르세요.
새 탭을 열려면 <kbd>Ctrl</kbd> + <kbd>T</kbd>를 사용합니다.

#05. 실무에서 자주 사용하는 Markdown 패턴

1. README.md 템플릿

# 프로젝트 제목

프로젝트에 대한 간단한 설명

## 시작하기

### 사전 요구사항

- Node.js 16.0 이상
- npm 8.0 이상

### 설치

```bash
git clone https://github.com/username/project.git
cd project
npm install

실행

npm start

API 문서

사용자 조회

GET /api/users/:id

파라미터	타입	설명
id	number	사용자 ID

응답 예시

{
  "id": 1,
  "name": "김철수",
  "email": "kim@example.com"
}

기여하기

1. Fork 프로젝트
2. Feature 브랜치 생성 (git checkout -b feature/AmazingFeature)
3. 변경사항 커밋 (git commit -m 'Add some AmazingFeature')
4. 브랜치에 Push (git push origin feature/AmazingFeature)
5. Pull Request 생성

라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

### 2. 기술 문서 템플릿

```markdown
# 기능 이름

## 개요

기능에 대한 간단한 설명

## 목적

- 해결하고자 하는 문제
- 예상되는 효과

## 구현 방법

### 1단계: 환경 설정

설치 및 설정 방법

### 2단계: 코드 작성

주요 구현 내용

### 3단계: 테스트

테스트 방법 및 예상 결과

## 주의사항

⚠️ **경고**: 중요한 주의사항

💡 **팁**: 유용한 팁

📝 **참고**: 추가 정보

## 참고 자료

- [공식 문서](https://example.com)
- [관련 튜토리얼](https://example.com)

3. 회의록 템플릿

# 회의록 - 2024년 12월 5일

## 참석자

- 김철수 (프로젝트 매니저)
- 이영희 (개발자)
- 박민수 (디자이너)

## 안건

### 1. 프로젝트 진행 상황

- [x] UI 디자인 완료
- [x] API 개발 완료
- [ ] 프론트엔드 개발 (진행 중)
- [ ] 테스트 (예정)

### 2. 이슈 및 해결방안

| 이슈 | 담당자 | 해결방안 | 기한 |
|------|--------|----------|------|
| 로그인 버그 | 이영희 | 세션 처리 수정 | 12/10 |
| 디자인 수정 | 박민수 | 색상 팔레트 변경 | 12/08 |

### 3. 다음 회의

- **일시**: 2024년 12월 12일 오후 2시
- **장소**: 회의실 A
- **안건**: 베타 테스트 결과 검토

#06. Markdown PDF 변환하기

Visual Studio Code Extension에서 Markdown PDF를 설치가 되어 있어야 한다.

작성중인 Markdown 파일에서 Ctrl + Shift + P를 눌러서 명령창을 열고 Markdown pdf로 검색한 후 Markdown PDF: Export (pdf) 항목을 선택한다.

#06. Markdown PDF 변환하기

Visual Studio Code Extension에서 Markdown PDF를 설치가 되어 있어야 한다.

작성중인 Markdown 파일에서 Ctrl + Shift + P를 눌러서 명령창을 열고 Markdown pdf로 검색한 후 Markdown PDF: Export (pdf) 항목을 선택한다.

이 때 명령창 맨 앞에 >가 반드시 포함되어야 한다. 실수로 >를 삭제한 경우 다시 입력해야 한다.

#07. Markdown 편집 팁

1. VSCode 단축키

기능	단축키	설명
미리보기 열기	Ctrl + Shift + V	현재 파일 미리보기
미리보기 사이드	Ctrl + K V	사이드에 미리보기
굵게	Ctrl + B	선택한 텍스트를 굵게
기울임	Ctrl + I	선택한 텍스트를 기울임
코드 블록	Ctrl + Shift + K	선택한 텍스트를 코드 블록으로

2. 자동 목차 생성

VSCode에서 Markdown All in One 확장을 사용하면 자동으로 목차를 생성할 수 있습니다.

<!-- TOC -->
- [제목 1](#제목-1)
  - [제목 1-1](#제목-1-1)
  - [제목 1-2](#제목-1-2)
- [제목 2](#제목-2)
<!-- /TOC -->

3. 이미지 크기 조절

HTML 태그를 사용하여 이미지 크기를 조절할 수 있습니다.

<img src="image.png" width="300" height="200" alt="설명">

<img src="image.png" style="width: 50%; height: auto;" alt="설명">

4. 텍스트 정렬

<div align="center">가운데 정렬</div>

<div align="right">오른쪽 정렬</div>

<div align="left">왼쪽 정렬 (기본값)</div>

#08. GitHub에서의 Markdown 활용

1. GitHub Flavored Markdown (GFM)

GitHub에서는 표준 Markdown에 추가 기능을 제공합니다:

• 자동 링크: URL이 자동으로 링크가 됩니다
• 사용자 멘션: @username
• 이슈 참조: #123
• 이모지: :smile: :heart: :thumbsup:

2. 배지(Badge) 추가

![Build Status](https://img.shields.io/badge/build-passing-brightgreen)
![License](https://img.shields.io/badge/license-MIT-blue)
![Version](https://img.shields.io/badge/version-1.0.0-orange)

3. 접을 수 있는 섹션

<details>
<summary>클릭하여 자세히 보기</summary>

여기에 상세한 내용을 작성합니다.

```javascript
function example() {
    console.log("Hello World");
}

</details>

### 4. 경고 및 알림 박스

```markdown
> **Note**
> 이것은 노트입니다.

> **Warning**
> 이것은 경고입니다.

> **Important**
> 이것은 중요한 정보입니다.

#09. Markdown 도구 및 에디터

1. 온라인 에디터

• Typora: 실시간 미리보기 에디터
• Mark Text: 크로스 플랫폼 Markdown 에디터
• Dillinger: 온라인 Markdown 에디터
• StackEdit: 브라우저 기반 Markdown 에디터

2. 브라우저 확장 프로그램

• Markdown Viewer: Chrome에서 .md 파일 보기
• Markdown Here: 이메일에서 Markdown 사용

3. 모바일 앱

• iA Writer: iOS/Android Markdown 에디터
• Markor: Android용 오픈소스 Markdown 에디터

#10. 마무리

Markdown은 간단하면서도 강력한 문서 작성 도구입니다. 기본 문법을 익히면 다양한 플랫폼에서 효율적으로 문서를 작성할 수 있습니다. 특히 개발 문서, 블로그 포스팅, README 파일 작성에 매우 유용합니다.

학습 순서

1. 기본 문법 익히기: 제목, 목록, 강조 등
2. 코드 블록 활용: 프로그래밍 언어별 문법 강조
3. 테이블과 링크: 구조화된 정보 표현
4. 고급 기능: HTML 태그, 수식, 다이어그램
5. 실무 활용: 프로젝트 문서, 회의록, 기술 문서

정기적으로 Markdown을 사용하여 문서를 작성하면 빠르고 효율적인 문서 작성 능력을 기를 수 있습니다.