👱‍♀️ ansohxxn

👱‍♀️ ansohxxn

개인적인 필기 노트

[Github 블로그] 마크다운(Markdown) 문법 총 정리

Date:     Updated:

카테고리:

태그:

🔔 jekyll 블로그에 포스팅을 하기 위한 마크 문법 익히기

줄바꿈

줄바꿈을 하고 싶다면 문장 뒤에 스페이스바를 두번 + Enter 해준다.

안녕하세요.  
저는 ansohxxn 이라고 합니다.

안녕하세요.
저는 ansohxxn 이라고 합니다.

<br> 또한 줄바꿈을 해주는 HTML 태그이다.

안녕하세요. <br> 저는 ansohxxn 이라고 합니다.

안녕하세요.
저는 ansohxxn 이라고 합니다.


중첩된 구조

아래와 같이 중첩된 구조를 만드려면 두번째 줄을 스페이스바 2번 눌러 띄어준 후 작성한다. 세번 중첩된 줄을 만드려면 스페이스바 4번.

- hi
  - hello
    - 안녕
  • hi
    • hello
      • 안녕


문단 나누기

문단과 문단 사이에 한줄 띄어준다.


마크다운 문법을 그대로 보여주고 싶을 때

마크다운 문법 앞에 \를 붙여준다.

\<u>안녕</u>

<u>안녕</u>
원래 같으면 밑줄 그어진 형태로 안녕으로 보일텐데 \를 앞에 붙여주어 문법 그대로 <u>가 보여진다.


글의 제목이 된다. 각 제목마다 permalink가 있는 것이 특징! # ~ ###### 로 제목 크기에 따라 h1 ~ h6을 나타낸다.

# h1
## h2
### h3
#### h4
##### h5
###### h6

h1

h2

h3

h4

h5
h6

h1와 h2는 아래와 같이 표현할 수도 있다.

h1
===

h2
---

h2는 아래에 구분선이 그어지고 있는데 minimal-mistakes 테마의 scss 스타일 시트 파일에서 그렇게 정의하고 있다. 원래도 이런가..? (나는 구분선 그어지는게 마음에 들어서 고치지 않았다. 맘에 들어서 h2를 적극 사용 중)


텍스트

강조

**강조된 텍스트입니다**

강조된 텍스트입니다

기울임

*기울여진 텍스트입니다*
***굵고 기울여진 텍스트입니다***

기울여진 텍스트입니다 굵고 기울여진 텍스트입니다

취소선

~~취소된 텍스트입니다~~

취소된 텍스트입니다

밑줄

<u>밑줄 있는 텍스트입니다</u>

밑줄 있는 텍스트입니다

글씨 색

<span style="color:yellow">노란 글씨입니다.</span>

노란 글씨입니다.

응용 : 다 적용해보자

~~***<u>텍스트</u>***~~

텍스트


코드 블록

inline 코드 블록

이런게 바로 `인라인 코드`입니다.

이런게 바로 인라인 코드입니다.

코드 블록

```언어 이름(소문자)
이 부분에 코드 적기
```

언어 이름까지 적어주면 예약어, 변수 등등에 색깔 하이라이팅이 들어간다. 예를 들어

```c++
#include using namespace std;

int main()
{
cout « “Hello World !” « endl; // 안녕!
}
```

#include <iostream>
using namespace std;

int main()
{
  cout << "Hello World !" << endl; // 안녕! 
}

스페이스바 4번로도 표현할 수 있다

    이번주 주말에 뭐 해먹을지 정해놓자.

이번주 주말에 뭐 해먹을지 정해놓자.


링크

링크만 있는 inline 링크

<링크주소>

<https://www.google.com>

https://www.google.com

설명 있는 inline 링크

[링크설명](링크주소)

[구글 홈페이지](https://www.google.com)

구글 홈페이지

동일 파일 내에서의 문단(헤더) 이동 링크

[설명어](문단의 주소)

문단의 주소 따는 방법 theorydb님 블로그 참고

  1. 헤더 제목 문자열을 복사하고 (문단의 주소)에 복사한다.
  2. 특수 문자를 제거한다.
  3. 공백을 -로 변경한다.
  4. 대문자는 소문자로 변경한다. 예시) “#Markdown! 장점” > “#markdown-장점”
[마크다운 문법을 그대로 보여주고 싶을 때](#마크다운-문법을-그대로-보여주고-싶을-때)

마크다운 문법을 그대로 보여주고 싶을 때

그림 링크 삽입

![image](이미지주소)
로컬 파일 경로도 가능하다.

image

사진 출처 : 우리집 막내 식빵이

그림 자체에 링크 걸기

![image](이미지주소)](이동하려는 링크 주소)
image


인용문

>로 표현할 수 있다. >> 두개 쓰면 중첩된 인용문. 중첩시킬땐 앞에 스페이스바 2번 !

> 이건 인용문이에요.
  >> 이건 인용문 속 인용문이에요.

이건 인용문이에요.

이건 인용문 속 인용문이에요.

<cite> --- 태그와 {{: .small}}를 함께 써서 인용문 출처도 남겨보자

<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
{: .small}

Steve Jobs — Apple Worldwide Developers’ Conference, 1997


리스트

unordered list

- 순서가
  * 없는
    + 목록 
  * 순서가
- 없어용
  • 순서가
    • 없는
      • 목록
    • 순서가
  • 없어용

ordered list

1. 순서가
2. 있는  
   1. 목록
      - 하나
      - 둘
   2. 목록
       - 하나
       - 둘
3. 목록
  1. 순서가
  2. 있는
    1. 목록
      • 하나
      • 둘
    2. 목록
      • 하나
      • 둘
  3. 목록

check list

- [ ] 체크 안됨
- [X] 체크 됨
  • 체크 안됨
  • 체크 됨


구분선

***와 ---로 나타낼 수 있다.

***
---


테이블

|와 - (3개 이상)의 조합으로 테이블을 만들 수 있다.

  • 정렬
    • 왼쪽 정렬 |:—|
    • 오른쪽 정렬 |—:|
    • 가운데 정렬 |:—:|
|**제목**|레이팅|감상평|
|:---:|---:|---|
|엑스맨 : 울버린의 탄생|⭐⭐|데드풀 ..ㅋㅋㅋㅋㅋㅋ|
|더 울버린|⭐⭐⭐|굳이 만들 필요 없었던 외전. 그치만 액션씬들은 좋았다.|
|로건|⭐⭐⭐⭐⭐|대.명.작|
제목 레이팅 감상평
엑스맨 : 울버린의 탄생 ⭐⭐ 데드풀 ..ㅋㅋㅋㅋㅋㅋ
더 울버린 ⭐⭐⭐ 굳이 만들 필요 없었던 외전. 그치만 액션씬들은 좋았다.
로건 ⭐⭐⭐⭐⭐ 대.명.작


토글 리스트 (접기/펼치기)

나는 Notion을 사용했었기 때문에 토글 리스트란 이름이 더 익숙하다. 마크다운에선 지원하지 않고 HTML의 details 태그로 사용 가능하다. div markdown=”1” 은 jekyll에서 html사이에 markdown을 인식 하기 위한 코드이다. 참고 블로그

<details>
<summary>여기를 눌러주세요</summary>
<div markdown="1">       

😎숨겨진 내용😎

</div>
</details>
여기를 눌러주세요

😎숨겨진 내용😎


버튼

링크 부분을 그냥 #로 두면 페이지 맨 위로 이동하네… 이를 이용해서 맨 위로 이동하기 버튼을 한번 만들어봐야 겠다.

<a href="#" class="btn--success">Success Button</a>

Success Button

[Default Button](#){: .btn .btn--primary }

Default Button


🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

댓글남기기

참고