본문 바로가기

Manual/Web

마크다운 (Markdown) Manual

1. Header ( Hn )

 

Syntax : # content

 

HTML과 마찬가지로 작은 숫자일수록 크기가 커진다.

Hn = # n개 ( H3 = ### )

사용예시 :

# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

결과 :

 

 

 

2. BlockQuote

 

Syntax : >    content

 

'>' 를 사용하고 tab 으로 건너뛴 다음 '>' 를 다시 사용해서 블럭인용문 안에 n번째 인용문을 추가할수 있다.

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

 

사용예시 :

> This is a first blockqute.
>    > This is a second blockqute.
>    >    > This is a third blockqute.
> ### This is a H3
> * List
>    ```
>    code
>    ```

결과 :

 

 

 

 

 

3. 목록

  • 순서있는 목록

Syntax :

1. content

2. content

3. content

...

 

숫자와 점을 사용.
어떤 번호를 입력해도 순서는 내림차순 정의.

 

사용예시 :

 1. 1번째 목록
 2. 2번째 목록
 4. 4번째 목록
 3. 3번째 목록

결과 :

 

 

  • 순서없는 목록

Syntax :

* content

    + content

         - content


혼합해서도 사용가능

어떤 기호를 사용하던 탭 횟수에 따른 모양이 생성 된다.

4번째 하위 목록 부터는 같은 네모모양이 적용됨.

 

사용예시 :

* 1단계
  - 2단계
    + 3단계
      + 4단계
        * 5단계
          - 6단계

결과 :

 

 

 

 

4. 코드블럭

 

- 1. inline 코드블럭

 

Syntax : 

content

 

    source;

 

content

 

    일반 문장 사이에 '4개의 space' 또는 'tab' 을 사용하면 코드블럭 효과가 적용됨.

    코드블럭을 적용할 문장은 일반 문장과 enter 로 띄어놔야 정상 적용.

 

- 2. <pre><code> 'source' </code></pre> 사용

 

Syntax :

<pre>

<code>

    source;

</code>

</pre>

 

    마크업 형태로 태그를 열고 안에 코드내용을 작성.

 

- 3. ``` 'source' ``` 사용

 

Syntax :

```

source;

```

 

   ``` 형태 사용시 ```java 와 같은식으로 코드블럭에서 사용하는 언어를 선언해서

   Syntax Highlight 가 가능.

 

사용예시 :

 

- 1 inline 코드블럭

This is a normal paragraph:

    This is a code block.
    
end code block.

 

- 2 <pre><code> 'source' </code></pre> 사용

<pre>
<code>
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}
</code>
</pre>

- 3 ``` 'source' ``` 사용

```java
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}
```

 

 

 

 

 

5. 수평선 ( <hr/> )

 

Syntax :

*** ( * * * )

--- ( - - - )

 

사용하는 한줄 전체에 수평선 그려줌.

* 과 - 사용가능.

 

사용예시:

 

* * *

***

*****

- - -

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

 

결과:

 

 

 

 

 

 

6. 링크

- 1. 참조링크

 

Syntax : content [link keyword][id "alt"]

 

link keyword = 표시할 하이퍼텍스트,

id "alt" = 실제 URL 주소와 alt 입력.

 

- 2. 외부링크

 

Syntax : content [Title](link "alt")

 

Title = 표시할 하이퍼텍스트를,

link = 실제 URL 주소와 alt 입력.

 

- 3. 자동연결 

 

Syntax : content <URL or Email>

 

일반적인 URL 혹은 이메일주소인 경우 적절한 형식으로 링크를 형성한다.

 

사용예시:

 

- 1. 참조링크

Link: [Google][googlelink]

[googlelink]: https://google.com "Go google"

- 2. 외부링크

Link: [Google](https://google.com, "google link")

- 3. 자동연결

외부링크: <http://example.com/>
이메일링크: <address@example.com>

 

 

 

 

 

7. 강

 

Syntax :

*content* 

__content__ 

~~content~~

 

Italic : *, _

Bold : **, __

Cancle : ~~

 

문장 중간에 사용할때는 띄어쓰기를 하는것이 좋다.

 

사용예시:

* *single asterisks*
* _single underscores_
* **double asterisks**
* __double underscores__
* ~~cancelline~~

> 문장 중간에 사용할 경우에는 **띄어쓰기** 를 사용하는 것이 좋다.

결과:

 

 

 

 

 

8. 이미지

- 1. 이미지를 그대로 가져오기

 

Syntax : ![alt](/path/to/img.jpg "option")

 

- 2. 사이즈 조절을 하기위한 마크업

 

Syntax : <img src="/path/to/img.jpg" width="" height="" title="px(픽셀) 크기 설정" alt = ""></img>

 

사용예시:

- 1.

![석촌호수 러버덕](https://t1.daumcdn.net/cfile/tistory/2426E646543C9B4532 "RubberDuck")

- 2.

<img src="https://t1.daumcdn.net/cfile/tistory/2426E646543C9B4532" width="40%" height="30%" title="%(비율) 크기 설정" alt="RubberDuck"></img>

 

 

 

 

 

9. 줄바꿈

 

Syntax : content   \

 

3칸 이상 space 후 역슬래시 ( "   \" ) 하면 줄이 바뀐다.

 

사용예시:

* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다.    \        
이렇게

 

결과: