마크다운 문법 정리
✏️ 내가 보려고 정리하는 마크다운 문법
마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어로, 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용된다.
그간 필요에 따라 구글링해가며 사용해 본 바로는, 환경에 따로 출력결과가 다소 상이한 것 같다는 단점 외에 비교적 문법이 쉽고 간단한 것이 특징적이다. 또 마크다운만으로 표현이 부족한 부분은 HTML 태그를 활용해 보완이 가능하다.
때문에 이번 기회에 마크다운 기본 문법을 정리해보려고 한다.
1. 제목
# Header1
## H2
### H3
#### H4
##### H5
###### Header6
# 개수가 커질수록 그만큼 낮은 수준의 소제목이 된다.
즉, ### Header 3 이라면 아래와 같이 출력된다.
Header 3
아래와 같이 등호(=) 또는 하이픈(-) 기호와 함께 간단히 표현하는 것도 가능하다.
큰 제목
====================
중간 제목
---------------------
// 출력 결과 확인
큰 제목
중간 제목
2. 폰트 스타일 적용
__BOLD__ or **볼드체**
_italic_ or *이탤릭체*
~~Strikethrough 취소선~~
<u>underline 밑줄</u>
<span style="color:red">글자색</span>
<span style="background-color:yellow">하이라이트</span>
<span style="background-color:#ffe6e6">RGB코드 참조</span>
BOLD or 볼드체
italic or 이탤릭체
Strikethrough 취소선
underline 밑줄
글자색
하이라이트
RGB코드 참조
3. 목록
1. 순번이 있는 목록일 경우
1. 하위 수준 목록표시 가능
2. 순번의 경우
1. 동일 수준의 목차일 경우
1. 실제 표기한 __숫자에 관계없이__ 순번이 매겨지는 것 같다.
3. 탭(tab)키로도 적용 가능
3. 출력 결과 확인!
- 순번이 있는 목록일 경우
- 하위 수준 목록표시 가능
- 순번의 경우
- 동일 수준의 목차일 경우
- 실제 표기한 숫자에 관계없이 순번이 매겨지는 것 같다.
3. 탭(tab)키로도 적용 가능 : 되는 곳이 있고 안되는 곳도 있고 하나봄- 출력 결과 확인!
- 번호 없는 목록일 경우: -, *, + 기호 사용
- 하위 수준 목록표시
* 별표(asterisks)
+ 덧셈기호(plus sign)
- 하이픈(hyphen)
- 실제 기호에 상관없이 동일 수준일 경우,
- 모두 동일하다
\* 탭(tab)키를 적절히 사용해서 표현하는 것도 적용 가능
- 출력 결과 확인!
- 번호 없는 목록일 경우: -, *, + 기호 사용
- 하위 수준 목록표시
- 별표(asterisk)
- 덧셈기호(plus sign)
- 하이픈(hyphen) - 실제 기호에 상관없이 동일 수준일 경우,
- 모두 동일하다 * 탭(tab)키를 적절히 사용해서 표현하는 것도 적용 가능
- 출력 결과 확인!
4. 인용, 첨자, 각주
1. 텍스트 인용
> 인용문 표시
BlockQuote
>> 중첩인용문
nested blockquote
break
>>> 출력 결과 확인
인용문 표시 BlockQuote
중첩인용문 nested blockquote
출력 결과 확인
2. 첨자
- 위첨자
<sup>태그 활용
<sup>위첨자</sup>텍스트 확인하기→<sup>태그를 활용한 위첨자텍스트 확인하기 - 아래첨자
<sub>태그 활용
<sub>아래첨자</sub>텍스트 확인하기→<sub>태그를 활용한 아래첨자텍스트 확인하기
3. 각주
[^]을 활용해 각주(footnote)를 적용할 수 있다. (벨로그나 깃허브에서는 지원하지 않는 것 같다)
This is a general sentence. This is a first Footnotes[^1]
This is a second footnotes[^2]
각주 테스트[^test]
[^1]: 첫번째 각주
[^2]: 두번째 각주
[^test]: 세번째 각주
5. 코드블록
- 기본 코드블록 : 백틱(`), 물결표(~), 공백, 탭 활용
- 백틱(```) or 물결표(~~~) 연속 3개
이 때 코드블록 시작에 언어 이름까지 적어주면 예약어, 변수 등등에 하이라이팅이 들어가게 된다.
- 백틱(```) or 물결표(~~~) 연속 3개
`
java //코드블록 예시 <br/> public class Main { <br/> public static void main(String[] args) { <br/> System. out.println("Hello World" ); <br/> } <br/> }\`
//코드블록 예시
public class Main {
public static void main(String[] args) {
System. out.println("Hello World" );
}
}
[ ][ ][ ][ ]4개 이상의 공백
또는
[tab]한개 이상의 탭
(*cf. 이 경우, 들여쓰기 끝나는 지점까지가 코드블록에 해당한다.)
- 인라인 코드 : 문장을 백틱(`inline`)으로 감싸서 적용할 수 있다. →
inline 예시
6. 문단구분 및 줄바꿈
- 문단구분
- 수평선활용 : — or ___ or *** or
<hr>태그 - 라인(line) 추가 : 구분하고자 하는 문단 사이에는 엔터키 2번으로 단락을 구분한다. 즉, 공백 두 줄(line)을 추가해 문단을 나눌 수 있다.
- 줄바꿈
1) 연속 2개 이상의 공백+엔터
2)
<br>태그 활용
*cf. 문장 들여쓰기 : 띄어쓰기는 기본적으로 한개만 인식하기 때문에, 들여쓰기를 하고 싶다면 < > 태그를 활용한다.
  태그활용
     결과확인
 태그활용
결과확인
7. 표(Table) 만들기
- (hyphen), | (Vertical bar), : (colon) 을 활용해 본문에 표를 넣을 수 있다.
- 3개 이상의 하이픈(-) → 헤더 구분, 콜론(:) → 정렬방향 설정
-
가장 좌측/우측의 세로선( )은 생략 가능 - 줄바꿈이 필요한 경우
<br>태그를 활용할 수 있다.
왼쪽정렬(기본)|가운데정렬|오른쪽정렬|비고
---|:----:|----:|----
왼쪽|가운데정렬|오른쪽정렬|줄바꿈테스트
1|마크다운|Markdown|---
2|표 만들기|table test|줄바꿈이 필요한 경우,<br>`<br>` 태그를 활용할 수 있다.
3|출력 결과 확인|test12341234|---
왼쪽정렬(기본) 가운데정렬 오른쪽정렬 비고 왼쪽 가운데정렬 오른쪽정렬 줄바꿈테스트 1 마크다운 Markdown — 2 표 만들기 table test 줄바꿈이 필요한 경우, <br>태그를 활용할 수 있다.3 출력 결과 확인 test12341234 —
8. 링크
- 인라인 링크 : 기본적으로 외부주소를 괄호(
[]())로 감싸 링크를 적용할 수 있으며, 일반URL 또는 <> 안의 URL은 자동적으로 링크를 사용한다.
1) [Google](https://google.com)
2) [Naver](https://naver.com "네이버로 이동합니다") // "hint" 적용가능
3) https://velog.io/ or <https://velog.io/>
적용 결과 확인 1) Google 2) Naver 3) https://velog.io/ or https://velog.io/
- 참조링크 방법
Link : [my_velog][velogLink]
Link : [my_github][1]
[velogLink]: https://velog.io/@92miindy/posts
[1]: https://github.com/mindyhere "go github" // "hint" 적용가능
적용 결과 확인
Link : [my_velog][velogLink]
Link : [my_github][1]
[velogLink] : https://velog.io/@92miindy/posts
[1] : https://github.com/mindyhere “go github”
- 문서 내부 링크
목차를 대괄호 []로 묶고 링크를 걸 페이지의 제목을 소괄호 안에 (#제목) 써주면 해당 라인으로 이동하게된다. → [목차](#이동할-헤드-제목)
(example)
## 📌목차
[__1. 프로젝트 개요__](#-프로젝트-개요)
- [프로젝트 설명](#-기간)
- [진행과정](#-팀-구성-및-사용기술)
## 📌 프로젝트 개요
#### 📅 기간
#### 👥 팀 구성 및 사용기술
example : readme
*cf. 주의할 점
- 띄어쓰기는 -(하이픈)으로 연결한다.
- 영어는 소문자로 작성한다.
- 괄호()나 이모지(::)는 제외하고 작성한다.
9. 이미지
- 이미지 삽입
- 이미지 링크 : 마크다운 이미지코드를 링크코드(
[]()) 묶어주면 된다.
[](URL "링크 설명")
[](https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4 "Go wiki-markdown")
(*cf. 이미지 크기, 정렬 등 세부적인 조절은 마크다운 문법으로는 해결이 어렵다. 따라서 html의 <img> 태그를 활용해야 한다.)
10. 기타 유용한 기능 추가정리
1. 내용접기/펼치기
<details><summary>CLICK</summary>
hello :)
</details>
CLICK
hello :)2. 체크박스/Task List
- [x] This is Task Lists1
- [ ] This is Task Lists2
- [ ] This is Task Lists3
▼ 출력 결과 확인하기
- This is Task Lists1
- This is Task Lists2
- This is Task Lists3
3. 이모지 단축키
- window10 : 윈도우 키 + 마침표(.)
- mac : Command + Control + 스페이스 바
Leave a comment