Tags :

• 마크다운 기본
  • 문장 구분
    • 글머리 단계
    • 순차적 나열
    • 임의적 나열
    • 수직적 나열
    • 가로줄
• 강조
  • 글꼴 변환
    • Bold
    • Italic
    • 취소선
    • 밑줄
  • 색상 활용
    • 글자색
    • 글자 배경색
  • 코드블럭
• 인용
  • 인용문
  • 각주
  • 텍스트 링크
• 개체 활용
  • 이미지 삽입
  • 표 생성
  • Emoji
• Reference

마크다운 기본

GitHub Docs - Writing on GitHub ¹ 과 Markdown Guide - Cheat Sheet ² 에서 기본적인 문법구조를 참고했다.
다양한 서식을 사용하고 싶을 땐 HTML을 병행하는 방식이 좋다.

기본적인 텍스트는 입력한 그대로 보여진다.

기본적인 텍스트는 입력한 그대로 보여진다.

개행  
띄어쓰기 두번 후 줄바꿈

개행
띄어쓰기 두번 후 줄바꿈

문장 구분

글머리 단계

# H1
## H2
### H3
#### H4

순차적 나열

1. 첫 번째
2. 두 번째
3. 세 번째

1. 첫 번째
2. 두 번째
3. 세 번째

임의적 나열

+ 첫 번째
- 첫 번째
* 첫 번째

• 첫 번째
• 첫 번째
• 첫 번째

수직적 나열

+ 첫 번째
  - 첫 번째의 첫 번째
    + 첫 번째의 첫 번째의 첫 번째
  - 두 번째
    * 두 번째의 첫 번째

• 첫 번째
  • 첫 번째의 첫 번째
    • 첫 번째의 첫 번째의 첫 번째
• 두 번째
  • 두 번째의 첫 번째

가로줄

 ---

강조

글꼴 변환

Bold

기본 굵기 **Bold 굵기**

기본 굵기 Bold 굵기

Italic

기본 서식 *Italic 서식*

기본 서식 Italic 서식

취소선

기본 서식 ~~취소선 서식~~

기본 서식 취소선 서식

~~*취소된 Italic 서식*~~

취소된 Italic 서식

밑줄

기본 서식 <u>밑줄 서식</u>

기본 서식 밑줄 서식

색상 활용

기본적인 내용은 용님 ³ 의 블로그를 통해 배웠고, 색상표는 Rapid Tables ⁴ 를 참고할 수 있다.

글자색

<span style="color:red"> RED </span>
<span style="color:green"> GREEN </span>
<span style="color:blue"> BLUE </span>

RED GREEN BLUE

글자 배경색

<span style="background-color:#ffcccc"> 연빨강 </span> 
<span style="background:repeating-linear-gradient(transparent, #ffe5cc, transparent)"> 연주황 </span> 
<span style="background:repeating-linear-gradient(transparent, #ffffcc, transparent)"> 연노랑 </span> 
<span style="background:repeating-linear-gradient(transparent, #e5ffcc, transparent)"> 연두 </span> 
<span style="background:repeating-linear-gradient(transparent, #ccffcc, transparent)"> 연초록 </span> 
<span style="background:repeating-linear-gradient(transparent, #ccffe5, transparent)"> 연청록 </span> 
<span style="background:repeating-linear-gradient(transparent, #ccffff, transparent)"> 하늘색 </span> 
<span style="background:repeating-linear-gradient(transparent, #cce5ff, transparent)"> 연파랑 </span> 
<span style="background:repeating-linear-gradient(transparent, #ccccff, transparent)"> 연보라 </span> 

연빨강 연주황 연노랑 연두 연초록 연청록 하늘색 연파랑 연보라

코드블럭

```cpp
int main() {
printf("Hello World");
return 0;
}
```

int main() {
printf("Hello World");
return 0;
}

명시된 언어의 Syntax 강조기능이 있어 매우 좋지만, 인덴트가 잘못되어있거나 간혹 알 수 없는 오류로 적용이 안되는 사례가 많다. Syntax강조기능은 없지만 복잡한 구조일 땐 HTML의 코드블럭 사용하기.

<pre><code>내용
</code></pre>

내용

코드블럭 내에 있는 문자가 코드로 읽혀질 경우 escape character를 활용해야 한다 ⁵.

< : <
> : >
{ : {
} : }

인용

인용문

> 인용할 문장  
```cpp
int main() {
printf("인용문 내부에서 다른 표현도 가능하다");
return 0;
}
```

인용할 문장

int main() {
printf("인용문 내부에서 다른 표현도 가능하다");
return 0;
}

인용문을 벗어나고자 할 땐 개행을 두번 해줘야 한다.

각주

참조할문장 [^7].  

[^7]: 참조 정보

참조할문장 ⁶.

동일한 내용을 참조할수도 있다.
순서 어떤 번호를 쓰든 상관없이 해당 Post에 입력한 순번 대로 따라간다.

텍스트 링크

[GitBlog-자주 검색하는 마크다운](https://ssonsonya.github.io/2023-08-09-Gitblog-HowToMarkdown#%EC%9D%B8%EC%9A%A9%EB%AC%B8)

GitBlog-자주 검색하는 마크다운

개체 활용

이미지 삽입

1. 이미지 파일 복사
2. 깃블로그의 Repository -> Issues -> New Issue 진행
3. description 칸에 이미지 붙여넣기 후 기다리면 이미지파일이 마크다운 형식으로 변환 됨
4. 파일형식은 PNG JPEG GIF MOV MP4까지 가능하다
   단, 이미지 형식의 경우 파일당 10MB, 영상은 100MB까지 제한이 있다.⁷
5. 삽입할 post에 복붙

![image](https://github.com/ssonsonya/ssonsonya.github.io/assets/116151781/6c17296d-fa31-4a5a-8f85-898a2edc5ec9)

기본값이 이미지 크기 그대로 페이지의 중앙 정렬로 되어있고 세부 조절하고싶은 부분은 HTML로 작업할 수 있다.

<a href="https://ssonsonya.github.io/2023-08-09-Gitblog-HowToMarkdown#%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%82%BD%EC%9E%85">
<img align="left" width="200" title="왼쪽정렬+너비200" src="https://github.com/ssonsonya/ssonsonya.github.io/assets/116151781/6c17296d-fa31-4a5a-8f85-898a2edc5ec9">
</a>
<br clear="left"/>

align="left" width="200" title="왼쪽정렬+너비200"
<br clear="left"/>

표 생성

AnyWayData ⁸ 로 통해 복잡한 표를 대신 만들어주는 사이트를 활용할 수 있다.

| 정렬방식 | 내용 |
| --- | ----------- |
| 기본값 | --- |
| 왼쪽 | :--- |
| 오른쪽 | ---: |
| 중앙 | :---: |

Emoji

window + . 을 통해 입력한 그대로 보여진다

😊🥰🤔🥹😭💀
⭐✨🔥
💖💕
➡️🎁

Reference