본격 내가 쓰고 내가 참조 할 글😅.
깃허브 블로그를 시작하고 포스팅해보면서 마크다운 문법을 처음 접해보았다.
마크다운 문법이 쉽긴 하다만, 기존 포스팅 플랫폼에서 제공해주던 에디팅 기능을 밥먹듯이 사용하던 내가!!!! 여기서 포스팅 할 때는 직접 문법들을 적용해야하는 방식이 여간 귀찮은 일이 아니다. 하지만,, 어쩌겠어 익혀야지,, 은근 재밌기도햐,,
그래서 내가 참고할 겸 이 글을 쓰는 중이다. 약간 진짜_진짜_진짜_최종버전으로 총정리를 해보았다. 순서는 내가 자주 쓸만한 것 순이다.


1. 헤더

포스팅 내 제목/소제목 등을 쓸때 보통 사용한다.
# 띄우고 글자 순. #이 적을 수록 글씨가 크다. # 하나 = 남바원 = 젤 큰 글씨

# h1

## h2

### h3

#### h4

##### h5

###### h6


>결과는

h1

(엥,, 원래 젤 크게 나와야 하는데 뭔가 이상하다..)

h2

h3

h4

h5
h6


2. 요소 강조

글자에 스타일을 준다. 아래에서 쓰이는 *은 취향에 따라 _로 바꿔서 쓸 수 있다.

1. **볼드체**
2. _기울기_
3. _**기울기와 볼드체 한번에**_
4. ~~취소선~~
5. <u>밑줄</u>

> 결과는

1. 볼드체

2. 기울기

3. 기울기와 볼드체 한번에

4. 취소선

\5. 밑줄

3. 줄 바꾸기

1. <br />태그를 이용
2. 스페이스 두번 후 엔터[공백][공백]
3. (단락을 바꿀때는 엔터 두번)

\1. <br />태그를 이용했을 때
\2. 스페이스 두번에 엔터 눌렀을 때
\3. 엔터 두번 눌럿을 때는 바로 아래 처럼

다음 단락으로 넘어가게 된다.

4. 경계선 / 수평선

밑줄을 표현할 때 —, ***, ___ 종류가 있지만 *3개를 입력해도, _3개를 입력해도 내 vscode 파일에 저장하는 순간 -로 바뀐다.

---

> 결과는

5. 코드블럭

개발자 블로그는 코드를 많이 쓸 것이다. 그럴 때는 `(백틱/영문버전에서 물결을 치면 나온다.), 요 백틱 ``` 3개로 감싸주면 된다. 뒤에 내가 무슨 문법을 사용하는지도 적어서 표현할 수 있다

```html
<html>
  <head> </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>
```

> 결과는 

<html>
  <head> </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>



+++ 인라인 코드는 백틱 하나로 감싸면 된다.

`이렇게 말이다`

> 결과는

이렇게 말이다

6. 링크 넣기


[링크 걸고 싶은 단어](링크주소) 형식을 따라주면 된다. 그런데 이 방식은 현재창에서 바로 열어버리고, 새창에서 열려면 {: target=”_blank” }이라는 조건을 달아주면 된다.
그냥 주소를 적고 링크를 걸고 싶다면 꺽쇠안에 나타내면 된다

1. 현재창에서 열기 [naver](https://www.naver.com)
2. 새창에서 열기 [naver](https://www.naver.com){: target="\_blank" }
3. 기본 자동 링크 naver 링크 : <https://www.naver.com>{: target="\_blank" }

> 결과는

  1. 현재창에서 열기 naver
  2. 새창에서 열기 naver
  3. 기본 자동 링크 naver 링크 : https://www.naver.com

7. 이미지 넣기

이미지도 익숙해지면 쉽다. 링크형식과 똑같은데 앞에 !가 붙는다.

  1. ![이미지가 안보이면 나오는 텍스트 생략가능](이미지경로 또는 URL)
  2. ![이미지가 안보이면 나오는 텍스트 생략가능](이미지경로 또는 URL “커서를 올렸을 때 나오는 텍스트 설정 생략가능”)
![바다상어](https://images.unsplash.com/photo-1680967230555-a803660575dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1626&q=80)
![바다상어](https://images.unsplash.com/photo-1680967230555-a803660575dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1626&q=80 "바다상어")

> 결과는

바다상어

바다상어

이미지를 링크로 쓰로 싶으면 링크와 이미지를 합치면 된다.
[![텍스트](경로 또는 URL)](링크)
+ 새 창으로 열고 싶으면 {: target=”_blank” } 추가

사실 말이 어려워서 그렇지, 아까했던 이미지에 전체 대괄호만 다시 씌어주고 옆에 소괄호 붙여주면 된다.

[![바다상어](https://images.unsplash.com/photo-1680967230555-a803660575dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1626&q=80)](https://unsplash.com/ko/%EC%82%AC%EC%A7%84/Vio3XKE0aV0){: target="\_blank" }

바다상어

8. 리스트 스타일

8-1. 순서가 있는 리스트(Ordered List)

숫자 뒤에 점만 입력하면 바로 숫자 리스트가 된다. 엔터를 누르면 자동으로 다음 숫자가 생성되는데, 엔터를 한번 더 누르면 없어진다.리스트 안의 리스트를 만들고 싶다면 엔터 후 탭키를 눌러주면 된다. 그런데 숫자 리스트에서 1-1. 과 같은 형식은 지원이 안되는 것 같다.

1. 첫번째 리스트
2. 두번째 리스트
   1. 두번째 리스트의 자식 리스트


  1. 첫번째 리스트
  2. 두번째 리스트
    1. 두번째 리스트의 자식 리스트

8-2. 순서가 없는 리스트(Unordered List)

-공백 을 사용한다.

- 리스트 시작
  - 리스트 안의 리스트
    - 리스트 안의 안의 리스트
      - 리스트 안의 안의 안의 리스트


  • 채운 동그라미 스타일
    • 빈 동그라미 스타일
      • 네모 스타일
        • 네모 스타일 반복

9. 체크리스트

- [공백] 미완료
- [x] 완료


  • 미완료
  • 완료

10. Backslash 탈출

나는 진짜 특수문자를 사용하고 싶은데 마크업 문법이 적용된다면 백슬래시를 이용해서 탈출해보자.

- 특수 문자 쓰고 싶은데 문법 적용됨.  
  \* 특수 문자 앞에 백슬래시를 달아주면 적용 안됨.
  • 특수 문자 쓰고 싶은데 문법 적용됨.


* 특수 문자 앞에 백슬래시를 달아주면 적용 안됨.

11. 인용구

> 오른쪽 꺽쇠를 이용하면 인용구를 사용할 수 있다.

> 개발 일짱 나야나  
> 줄바꿈 시 이어지기도하고
>
> > 겹쳐서 쓸 수도 있다.
> >
> > > 3개 까지 가능하다.

> 결과는

개발 일짱 나야나
줄바꿈 시 이어지기도하고

겹쳐서 쓸 수도 있다.

3개 까지 가능하다.

12. 테이블

처음에 표 작성하는 방법을 보고 뭐야 이게,,? 했는데 막상 손으로 쳐보니까 쉽다.
우선 표를 작성하는 방법은 |내용| 형식이고, 내용들을 구분해줄 해더에는 바로 아랫줄에 -–만 추가 해주면 된다.
그리고 -– 란에 :를 추가해서 표 내의 정렬을 지정할 수 있다.

| 헤더1    | 헤더2    |  헤더3   |    헤더4 |
| -------- | :------- | :------: | -------: |
| 기본정렬 | 왼쪽정렬 | 중앙정렬 | 오른정렬 |
| 기본정렬 | 왼쪽정렬 | 중앙정렬 | 오른정렬 |
헤더1 헤더2 헤더3 헤더4
기본정렬 왼쪽정렬 중앙정렬 오른정렬
기본 정렬은 왼쪽이다 왼쪽 정렬이다 중앙 정렬이다 오른쪽 정렬이다

13. 각주

어떤 뜻을 보충하고 싶거나 하고 싶은 말이 더 많을 때 용이하게 쓰일 것 같다. 당연히 중복은 안된다. 각주는 페이지 맨 아래에 위치해있다.

이렇게 각주를 달면 된다.[^1].  
국어 책에서 넘나 많이 보던 것.[^2].

이렇게 각주를 달면 된다.1.
국어 책에서 넘나 많이 보던 것.2.






—– 휴,, 정리가 끝났다. 나에게도 이 글을 보는 이들에게도 도움이 되었으면! —–






  1. 진짜 글 하나 쓰는거 쉽지않네🥲. ↩

  2. 능숙해지면 금방 쓰겠지. ↩