마크다운(Markdown)
Typora를 중심으로 작성
2004년 존 그루버가 만든 텍스트 기반의 가벼운 마크업 언어(ex. html, etc.)
- Github 등의 사이트는 파일명이 README.md인 것을 확인 가능
- 오픈 소스의 공식 문서 작성, 개인 프로젝트의 프로젝트 소개서 활용
- 모든 페이지 README.md 넣어 문서를 바로 볼 수 있도록 활용
- Github에는 적용되지 않는 마크다운 문법들도 존재
마크다운 에디터
🔓마크다운 문법 목차
빠르게 내가 원하는 것만 확인
전반적인 마크다운 가이드 : https://www.markdownguide.org/basic-syntax/
- 제목(HEAD)
- 목록
- Fenced Code Block
- Inline Code Block
- 링크(Link)
- 이미지
- 인용문
- 표
- text 강조
- 수평선
- 마크다운 포맷 무시하기
- 토글사용
- 동일 파일 내에서 문단 이동
- 체크박스
- 폰트 색상
> 레퍼런스 : 참고 링크
✅ 마크다운 문법
제목(Heading)
문서의 제목이나 소제목으로 사용
- #의 개수에 따라 h1 ~ h6까지 표현 가능
- #을 쓰고 반드시
띄어쓰기한 후 문자열 입력
| Markdown | Rendered Output |
|---|---|
| # Heading level 1 |  |
| ## Heading level 2 |  |
| ### Heading level 3 |  |
| #### Heading level 4 |  |
| ##### Heading level 5 |  |
| ###### Heading level 6 |  |
List
순서가 있는 리스트(ol) / 순서가 없는 리스트(ul)
1. 순서가 있는 리스트 (숫자 + . (마침표) 이용)
| Markdown | Rendered Output |
|---|---|
| 1. First item 2. Second item 3. Third item 4. Fourth item | 1. First item 2. Second item 3. Third item 4. Fourth item |
2. 순서가 없는 리스트 (불릿 리스트는 *,+.- 중 아무 기호나 사용 가능)
| Markdown | Rendered Output |
|---|---|
| - First - Second |  |
Fenced Code block
backtick 기호 3개 활용 ```
>>> print("Hello, world!")
Hello, world!
>>>Inline Code block
코드 블록은 backtick 기호 1개를 인라인에 활용하여 작성 ``기호 사이에 문자열 입려
ex) At the command prompt, type nano
Link
link 클릭할때는 ctrl + 클릭임을 명심하자!
-
인라인 링크
[네이버](http://www.naver.com): [문자열]+(링크) ex) 네이버 -
url 링크
<https://www.naver.com>: <url 링크> ex) http://www.naver.com -
참조 링크
[Naver]:http://www.naver.com: [문자열]:링크
이미지
-
!+[문자열]+(url)을 통해 이미지 사용 가능
-
그림 자체에 링크 걸기
[](링크URL) -
Github에 이미지 넣는 방법
- issues에 들어가서 넣고 싶은 이미지를 write에 드래그앤드롭으로 추가
- 5초정도 기다리면 경로가 나옴
- 편집기를 키고 링크를 복사해주면 완료!
Blockquotes(인용문)
(>)을 통해 인용문을 작성
Table(표)
본문 - 표 - 표 삽입으로 작성
text 강조
- ** , ctrl+b - 글씨 굵게**
- * - 글씨 기울게*
- ~~ ~~ - 글씨
취소선 <u></u>- 글씨 밑줄
수평선
3개 이상의 asterrisks(***), dashes(---), or underscores(____)
마크다운 포맷 무시하기
\(blackslash)를 원하는 글자 앞에 붙인다.
- 📥 입력값
**** - 글씨 **굵게**
\*\*\*\* - 글씨 \*\*굵게\*\*- 📤 출력값
- 글씨 굵게
- **** - 글씨 **굵게**
토글(접기/펼치기)사용
-
Html의 details태그 이용하면 사용 가능
-
❌ velog에서는 적용이 불가
-
📥 입력값
<details> <summary>토글사용</summary> <div markdown="1"> 본문 내용을 여기에 적습니다 </div> </details> -
📤 출력값
토글사용
본문 내용을 여기에 적습니다
-
동일 파일 내에서의 HEAD로 이동 링크
[설명어](문단의주소)
[설명어 입력](#설명어-입력)
1. 제목(header)를 복사 붙여넣기
2. 특수문자 제거
3. 스페이스를 갯수만큼 '-'로 변경
4. 대문자 > 소문자로 바꾸기
ex) 내가 가장 좋아하는것은! Code > #내가-가장-좋아하는것은-codecheck box
-,*,+을 작성 후[]
[+스페이스바+]는 빈 체크박스,[x]는 표시가 된 체크박스( [ 랑 x 사이에 띄어쓰기 안해도 됨)x는 소문자 대문자 상관 없음
-
📤 출력값
-
TIL
-
TIL
폰트 색상
Github에서 색깔 사용하는 방법
```diff 사용
- text in red
+ text in green
! oran
# gray
@@text in purple(and bold)@@
```HTML 이용하여 폰트 색상 표현하는 방법
- 폰트 색상 바꾸는법 :
<span style="color:color name"></span> - 형광펜 효과 :
<span style="background-color:color name"></span> - 색상 + 형광펜 효과 :
<span sytle="color:color name; background-color:color name"></span>
참고 링크
마크다운 에디터 추천 글
마크다운 문법
