마크다운(MarkDown) 사용법

마크다운(MarkDown) 사용법

안녕하세요. 갓대희 입니다. 이번 포스팅에선 마크다운(MarkDown) 사용법을 기록해 두려 한다. :- ) 

 

 

 

제일 흔하게 보고, 편집 하던 README.md 는 마크 다운 문법으로 작성된 파일 이다.

 

깃헙(Github),  비트버킷(Bitbucket), 워드프레스, 슬랙(Slack), 트렐로(Trello) 등의 서비스에서도 작성할 수 있다.

물론 표준이 없기 때문에 모두 다 적용되는것은 아니다.

 

간단하게 정리 하고 넘어 가보자.

1.  마크다운의 장/단점

#1. 장점

 - 문법이 쉽고 간결하다
 - 관리가 쉽다
 - 별도의 도구없이 작성가능하다.
 - 다양한 형태로 변환이 가능하다.
 - 지원 가능한 플랫폼과 프로그램이 다양하다.
 - 텍스트(Text)로 저장되기 때문에 용량이 적어 보관이 용이하다.

 

#2. 단점

 - 표준이 없다. 
 - 표준이 없기 때문에 표현하는 도구에 따라서 동작하지 않거나, 다르게 표현 될 수 있다.
 - 모든 HTML 마크업을 대신하지 못하지 못하는 한계점.

 

2.  마크다운 문법(syntax)

# 1. 제목 (Header)

 - # 뒤에 띄어쓰기를 넣어주는게 권장하는 방법 이다.

 - <h1> ~ <h6> 까지 표현 가능하다.

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

제목1

제목2

제목3

제목4

제목5

제목6

 

#2.  줄바꿈 (Line Breaks)

 - 띄어쓰기 2번 또는 <br/>로 표현 가능 하다.

# 줄바꿈(Line Breaks) 
띄어쓰기 2번  
또는 <br/>

 

#3. 수평선 (Horizontal Rule) <hr/>

 - 하기 코드들은 모두 수평선을 나타낸다. 가시적으로 페이지를 나누는 용도로 많이 사용된다.

---
***
___
******

 

#4. 글자 강조 (Emphasis)

**굵은 글씨**  
*이텔릭*  
_이탤릭_  
~~취소선~~  
<u>밑줄</u>  
ex)  
This is the **bold** text and this is the *italic* text and <u>let's</u> do ~~strikethrough~~

 

#5. 인용문 (BlockQuote)

 - ">"  블럭 인용 문자를 사용하면 인용문 표현이 가능하다.

> 인용문장
>> 중첩된 인용문
>>> 중첩된 인용문 2

 

#6. 목록(List)

1) 순서가 없는 목록 ( *, +, - 지원)

- 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
        - 순서가 필요하지 않은 목록
* 순서가 필요하지 않은 목록
    * 순서가 필요하지 않은 목록
        * 순서가 필요하지 않은 목록
+ 순서가 필요하지 않은 목록
    + 순서가 필요하지 않은 목록
        + 순서가 필요하지 않은 목록

- 순서가 필요하지 않은 목록
    * 순서가 필요하지 않은 목록
    + 순서가 필요하지 않은 목록

2) 순서가 있는 목록

1. 순서가 필요한 목록
    1. 순서가 필요한 목록
    1. 순서가 필요한 목록
1. 순서가 필요한 목록


1. 순서가 필요한 목록
    9. 순서가 필요한 목록
    3. 순서가 필요한 목록
8. 순서가 필요한 목록

 

3) 혼합 사용하는 예시

- 순서가 필요하지 않은 목록
    1. 순서가 필요한 목록
    1. 순서가 필요한 목록
- 순서가 필요하지 않은 목록2
    1. 순서가 필요한 목록
    3. 순서가 필요한 목록
    8. 순서가 필요한 목록

 

#7. 링크 (Links)

1) 기본방법

  [Title](link)

Click [here](http://goddaehee.tistory.com/)  
[갓대희의 작은 공간](https://goddaehee.tistory.com)

 

2) 참조 링크 사용 방법

 [link keyword][id]

 [id]: URL "Optional Title" 

ex) title 옵션 없이 사용

[갓대희의 작은 공간][gdh]
[gdh]: https://goddaehee.tistory.com

ex2) title 옵션사용시 커서를 링크 위로 위치하면, title이 노출된다.

[갓대희의 작은 공간][gdh]
[gdh]: https://goddaehee.tistory.com "Click here"

 

3) 자동 링크 사용 방법

 - 인터넷 URL 혹은 이메일 주소를 적합한 형식으로 링크를 생성해준다.

https://goddaehee.tistory.com
goddaehee@kakao.com

https://goddaehee.tistory.com

goddaehee@kakao.com

 

 

#8. 이미지 (Images)

- Link와 문법이 유사하다. 앞에 !만 추가하면 된다.

1) 기본문법


![Image Description](https://tistory1.daumcdn.net/tistory/1994430/74cb0667c02241939c5c13ec5dd1afb1)

2) 참조 링크 사용 방법

:[대체텍스트][id]

 [id]: 이미지주소 "Optional Title" 

![Image Description](gdh)
[gdh]:https://tistory1.daumcdn.net/tistory/1994430/74cb0667c02241939c5c13ec5dd1afb1

 

3) 이미지 노출과 동시에 링크처리

[](링크주소)

[![Image Description](https://tistory1.daumcdn.net/tistory/1994430/74cb0667c02241939c5c13ec5dd1afb1)](http://goddaehee.tistory.com)

 

#9. 표 (Table)

 - |(vertical bar) 기호를 통해 테이블을 표현 가능. (가장 좌측, 우측 생략 가능)

 - 헤더와 셀을 구분할 때 3개 이상의 -(하이픈, 대시)가 필요 하다.

 - : (콜론) 기호를 통해 정렬할 수 있다.

| Header | value | Description |
| --: | :-- | :--: |
| 정렬 | --: | 우측정렬 |
| 정렬 | :-- | 좌측정렬 |
| 정렬 | :--: | 가운데정렬 |

 

#10. 코드 (Code)

1) 인라인 코드(Inline Code)

  - 백틱(` : 숫자 1번 키 왼쪽에 위치)으로 강조할 내용을 감싸면 된다.

`해당 코드`는 강조할 부분 이다.

 

2) 블럭 코드(Block Code)

 - ``` html, css, javascript, bash, plaintext 등등

 - 코드의 종류를 명시 하지 않은 경우

 - html

 - CSS

 - javascript

 - bash

 - 이외 텍스트

 

#11. 원시 HTML (Raw HTML) 

 - MarkDown 환경에서는 결국 표현의 한계가 있고, 이런 경우 순수 html문법을 사용할 수 있다.

ex) image를 표현할 때 MarkDown으로는 width 지정이 불가능 하다.

<img width="70" src="" alt="gods" />

ex) 링크를 표현할 때 target="_blank" 지정이 불가능 하다.

ex) 밑줄을 표현할 수 없어 <u></u>를 사용하거나 다음과 같이 style을 직접 지정 해줘야 한다.

<span style="text-decoration: underline;">갓대희</span> 티스토리 입니다.

 

 

티스토리에도 MarkDown을 적용할 수 있는데, 포스팅 이후 적용에 대한 부분을 고민 해보도록 해야 겠다.

 

예전에 Github에서 사용했던 샘플도 기록으로 남겨 두어야 겠다.

# 🙏 Trello Clone Coding

**Assistant**
 - Trello Clone with React + Redux

**Feachur**
|Feachure|Description|
|:--:|:--:|
|Author|StudyTeam|
|Node|14.17.3|
|yarn|1.22.5|
|referrence|[goddaehee.tistory.com](http://goddaehee.tistory.com/)
|referrence|[샘플.com](http://샘플.com/)

**Style**
 - [material-ui] (https://mui.com/getting-started/usage/)