[Markdown] 기본 포스트 작성용 마크다운 문법 정리

1. 제목줄 작성법

헤더(Headers)

# h1

## h2

### h3

#### h4

##### h5

###### h6

또는 아래처럼 사용가능


  h1     h2
  ==     --

2.중첩구조

BlockQuote > 블럭인용문자를 이용한다

first blockqute

second blockqute

third blockqute

> first blockqute
>> second blockqute
>>> third blockqute

이 안에서는 다른 마크다운 요소를 포함할 수 있다

first

second

글머리 기호 있게

글머리 기호 없게

글머리 기호(*,+,- 지원)

one
- two
  - three

- one
  - two
    - three

*,+,- 혼합하여 사용도 가능하다

3. 줄바꿈 하고싶을 때

스페이스바 두번 + 엔터

안녕하세요
반갑습니다.

  쓰기

안녕하세요<br>반갑습니다

스페이스바 없이 엔터를 한번만 했을 경우 이렇게 붙여서 써집니다.

스페이스바 없이 엔터를 한번만 했을 경우
이렇게 붙여서 써집니다.

4. 문법 그대로 보여주고 싶을 때

\ 붙여주기

안녕

\<u>안녕</u>

<pre><code>{code}</code></pre> 이용하기

{System.out.println("Hello World!")}

<pre>
<code>
{System.out.println("Hello World!")}
</code>
</pre>

코드블록 이용하기


```언어이름(소문자)

여기에 코드작성

```

System.out.println("Hello World!")
이렇게 블록이 생깁니다

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

5. 글자 효과

기울기(ltalic)

*기울기* or _기울기_ -> 기울기

강조효과

**강조** -> 강조

혼합

* or _를 3개까지 중첩하여 강조와 기울기 효과를 동시에 줄 수 있다

***혼합*** or ___혼합___ -> 혼합

결론 : * or _를 사용 시
1개 - 기울기
2개 - 강조
3개 - 기울기 + 강조
위처럼 개수에 따라 효과를 줄 수 있다.

취소선

~~취소선~~ -> ~~취소선~~

밑줄

밑줄 -> 밑줄

체크박스

체크박스　->　- [x] 체크박스
체크박스　->　- [ ] 체크박스

글씨색

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

노란 글씨입니다.

6. 수평선

* * *

***

*****

- - -

---------------------------------------

위 줄은 모두 수평선을 만든다. 페이지 나누기 용도로 많이 사용.

7. 띄어쓰기(공백) 넣기

마크다운(Markdown)은 HTML 코드를 기반으로 글을 쓰는 거라서 띄어쓰기(스페이스바)를 여러번 입력하더라도 하나로 인식해버린다.
그래서 따로 공백을 여러번 주고 싶을 경우 별도의 처리가 필요하다.

공백 특수문자 사용 (   )

HTML용 특수코드로 Non-breaking space의 약자이며 여러번 입력하면 입력한만큼 공백을 표시.
  대신  을 사용할 수도 있다.

안녕하세요.&nbsp;.&nbsp;.&nbsp;.&#160;.&#160;.여러분

안녕하세요. . . . . .여러분

위 예시에서는 편하게 알아보기 위해 공백 사이사이 .을 넣었지만 . 없이도 연달아서 사용 가능하다.

전각문자로 띄어쓰기 입력 ( )

키보드로 한글 입력 시 한글은 2바이트(전각)로 표현되지만 스페이스 바는 1바이트(반각)으로 표시된다. 참고로 영어는 1바이트(반각)이다.
HTML에서 1바이트(반각) 띄어쓰기를 여러번 해도 띄어쓰기 한번으로 인식되어 표시되지만 2바이트(전각) 띄어쓰기는 공백이 아닌 문자로 인식하기때문에 입력한만큼 공백으로 표시된다.

한국어 키보드에서는 2바이트(전각) 공백을 입력할 수 없고 일본어/중국어 키보드일 때 입력 가능하다.

안녕하세요.　.　.　.　.　.여러분

안녕하세요.　.　.　.　.　.여러분

위처럼 전각 띄어쓰기라서 보다 공백이 넓게 표시되며 ( ) 괄호 안 공백을 드래그로 복사하여 이용하면 된다.

8. 접기 / 펼치기

HTML 코드인 details를 사용하여 일정 구간을 접었다 펼쳤다 할 수 있다.
details 안의 summary 태그 바로 아래 한 줄은 공백으로 비워두어야 한다.
그리고 details 태그는 익스플로어에서는 사용할 수 없기 때문에 사용시 주의가 필요하다.

접기/펼치기

<details markdown="1">
    <summary>접기/펼치기</summary>

<!-- summary 아래 한칸 공백 두고 내용 삽입 -->

</details>

details코드 안에 들어가는 markdown="1" 은 접는 구역 안에   등의 태그가 들어가야 할 경우 적어주면 좋다.
일반적인 markdown preview 에서는 따로 적지 않아도 알아서 인식을 하지만 그 외에서는 인식을 하지 않을 수도 있기 때문. 따라서 markdown="1"은 jekyll에서 html사이에 markdown을 인식 하기 위한 코드라고 생각하면 된다.

만약 details 의 모양 등을 수정하고 싶다면 CSS로 수정해주면 된다.

See the Pen Untitled by hsy3373 (@hsy3373) on CodePen.

CSS 수정 관련한 추가 내용은 여기를 참고하자(클릭)

Gom's