ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 마크다운(Markdown) 기초부터 부숴보자
    Tool 2021. 10. 16. 10:27

    안녕, 형들~ 🙌
    오늘은 마크다운 사용법에 대해서 얘기해 보려고해~!

    다들 마크다운이 뭔지는 알고 있겠지??
    확장자 파일보면 .md 로 박혀있는 애들 이 있을 텐데 얘네들을 마크다운이라고 하는데,
    서식이 있는 문서를 만들고 싶을 때 일반적으로 사용되고, 다른 마크업 언어에 비해 문법이 쉽고 간단해서 여러 곳에서 많이 사용되고 있어.

    특히!! README.md 처럼 리드미나 온라인 게시물을 올리는 용도로 많이 사용되어지고 있어.

    그래서 오늘은 기본 텍스트 에디터가 아닌 마크다운으로 포스팅을 넣어 보려고 해~
    그럼 가보자구!! 🤩

    기본 텍스팅

    일단 마크다운의 섹션 구분은 엔터키 두번으로 표현할 수 있어.
    만약에 엔터키 한번 만 넣어주게 되면 아래처럼 문장이 같은 줄에 연달아 표시되게 돼.

    마크다운 결과
    1.  
    2.  
    3. 1. 2. 3.
    마크다운 결과
    1.  
       
    2. 1.
      2.
    3. 3.

    Heading(제목)

    일단, 제목은 #을 넣어주어서 표현할 수 있어.
    #의 갯수를 통해 단계설정이 가능하고 1단계 부터 6단계 까지 설정가능해~

    h1

    h2

    h3

    h4

    h5
    h6

    Horizontal Rule(구분선)

    구분선은 ===, --- 를 넣어서 표현할 수 있어.
    그리고 === 바로 위에 텍스트가 있다면 heading1이 되고,
    --- 바로 위에 텍스트가 있다면 heading2가 되니깐 사용할 때 주의하는게 좋아.
    구분선만 따로 사용하고 싶다면 --- 위에 공백 한 줄씩 추가해주면 돼

    Heading

    Sub-Heading


    Text Style(글꼴)

    Italic(이탤릭)

    이탤릭 체는 *텍스트*, _텍스트_ 를 넣어서 표현할 수 있어.

    텍스트
    텍스트

    Bold(볼드)

    볼드 체는 **텍스트**, __텍스트__ 를 넣어서 표현할 수 있어.
    그리고 **_텍스트_** 처럼 해주면 볼드랑 이탤릭을 합칠 수 도 있어.

    텍스트
    텍스트

    Strikethrough(취소선)

    취소선은 ~~텍스트~~ 를 넣어서 표현할 수 있어.

    텍스트

    Underline(밑줄)

    취소선은 <u>텍스트</u> 를 넣어서 표현할 수 있어.

    텍스트

    BreakLine(개행)

    개행은 </br> 로 표현할 수 있어.

    Quote(인용문)

    인용문은 >를 넣어서 표현할 수 있어.

    List(목록)

    Numbered List(순서있는 목록)

    순서있는 목록은 1., 2. 과 같이 순서에 따른 숫자를 넣어서 표현할 수 있어.
    그리고 안에 하위 순서를 넣고 싶은 경우에는 해당 부분에서 Tab 을 입력서 단계를 표현할 수 있어.

    1. 첫번 째 1. 첫번 째
    2. 두번 째 2. 두번 째
      1. 두번 째의 첫번 째 Tab

    Bullet List(순서없는 목록)

    순서없는 목록을 표현하는 방법은 2개가 있는데, *, - 를 넣어서 표현할 수 있어.
    그리고 순서있는 목록과 똑같이 하위 순서를 넣고 싶은 경우에도 해당 부분에 Tab을 입력해서 단계를 표현할 수 있어.

    • 첫번 째 * 첫번 째
    • 두번 째 * 두번 째
    • 첫번 째 - 첫번 째
      • 첫번 째의 첫번 째 Tab

    Link(링크)

    링크는 [내용](링크) 를 넣어서 표현할 수 있어.

    구글
    네이버
    깃헙

    Code(코드)

    코드는 밑에서 설명해보도록 할게

    /* 코드를 아래처럼 넣어서 표현할 수 있어.
     * ` 코드 `
     **/

    Code-Block(코드블럭)

    코드 블럭은 밑에서 설명해보도록 할게

    /* 코드블럭을 아래처럼 넣어서 표현할 수 있어.
     * ``` kotlin
     * 코드내용
     * ```
     **/
    private val number = 3
    /* ``` java
     * 코드내용
     * ```
     **/
    private int number = 3

    Table(표)

    학생번호 이름 나이
    211001 김철수 20
    211002 박영희 19
    211003 홍길동 21

    Image(이미지)

    이미지는 [![ImageTitle](ImageLink)](EmbeddingLink) 를 넣어서 표현할 수 있어.

    이미지 전체를 링크의 squared bracket 안에 넣으면 돼.

    Image

     

    Example Domain

    Example Domain This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission. More information...

    example.com

     

     

    위에 글을 적을 때 사용한 마크다운 전문은 아래에 첨부해 놓을 테니깐 참고 부탁해~

     

    그럼 끝!!

    더보기

    안녕, 형들~ 🙌  

    오늘은 마크다운 사용법에 대해서 얘기해 보려고해~!

     

    다들 마크다운이 뭔지는 알고 있겠지??  

    확장자 파일보면 .md 로 박혀있는 애들 이 있을 텐데 얘네들을 마크다운이라고 하는데,  

    서식이 있는 문서를 만들고 싶을 때 일반적으로 사용되고, 다른 마크업 언어에 비해 문법이 쉽고 간단해서 여러 곳에서 많이 사용되고 있어.

     

    특히!! README.md 처럼 리드미나 온라인 게시물을 올리는 용도로 많이 사용되어지고 있어.

     

    그래서 오늘은 기본 텍스트 에디터가 아닌 마크다운으로 포스팅을 넣어 보려고 해~  

    그럼 가보자구!! 🤩

     

    ## 기본 텍스팅

     

    일단 마크다운의 섹션 구분은 엔터키 두번으로 표현할 수 있어.  

    만약에 엔터키 한번 만 넣어주게 되면 아래처럼 문장이 같은 줄에 연달아 표시되게 돼.

     

    | 마크다운 | 결과 |

    | --- | --- |

    | 1. |   |

    | 2. |   |

    | 3. | 1. 2. 3. |

     

    | 마크다운 | 결과 |

    | --- | --- |

    | 1. |   |

    |   |   |

    | 2. | 1. |

    |   | 2. |

    | 3. | 3. |

     

    ## Heading(제목)

     

    일단, 제목은 `#`을 넣어주어서 표현할 수 있어.  

    이 `#`의 갯수를 통해 단계설정이 가능하고 1단계 부터 6단계 까지 설정가능해~

     

    # h1

     

    ## h2

     

    ### h3

     

    #### h4

     

    ##### h5

     

    ###### h6

     

    ## Horizontal Rule(구분선)

     

    구분선은 `===`, `---` 를 넣어서 표현할 수 있어.

    그리고 `===` 바로 위에 텍스트가 있다면 heading1이 되고,

    `---` 바로 위에 텍스트가 있다면 heading2가 되니깐 사용할 때 주의하는게 좋아.

    구분선만 따로 사용하고 싶다면 `---` 위에 공백 한 줄씩 추가해주면 돼

     

    Heading

    ===

     

    Sub-Heading

    ---

     

    ===

     

    ---

     

    ## Text Style(글꼴)

     

    ### Italic(이탤릭)

     

    이탤릭 체는 `*텍스트*`, `_텍스트_` 를 넣어서 표현할 수 있어.

     

    *텍스트*

    _텍스트_

     

    ### Bold(볼드)

     

    볼드 체는 `**텍스트**`, `__텍스트__` 를 넣어서 표현할 수 있어.

    그리고 `**_텍스트_**` 처럼 해주면 볼드랑 이탤릭을 합칠 수 도 있어.

     

    **텍스트**  

    __텍스트__

     

    ### Strikethrough(취소선)

     

    취소선은 `~~텍스트~~` 를 넣어서 표현할 수 있어.

     

    ~~텍스트~~

     

    ### Underline(밑줄)

     

    취소선은 `<u>텍스트</u>` 를 넣어서 표현할 수 있어.

     

    <u>텍스트</u>

     

    ### BreakLine(개행)

     

    개행은 `</br>` 로 표현할 수 있어.

     

    </br>

     

    ### Quote(인용문)

     

    > 인용문은 `>`를 넣어서 표현할 수 있어.

     

    ## List(목록)

     

    ### Numbered List(순서있는 목록)

     

    순서있는 목록은 `1.`, `2.` 과 같이 순서에 따른 숫자를 넣어서 표현할 수 있어.  

    그리고 안에 하위 순서를 넣고 싶은 경우에는 해당 부분에서 `Tab` 을 입력서 **단계**를 표현할 수 있어.

     

    1.  첫번 째 `1. 첫번 째`

    2.  두번 째 `2. 두번 째`

        1.  두번 째의 첫번 째 `Tab`

     

    ### Bullet List(순서없는 목록)

     

    순서없는 목록을 표현하는 방법은 2개가 있는데, `*`, `-` 를 넣어서 표현할 수 있어.  

    그리고 순서있는 목록과 똑같이 하위 순서를 넣고 싶은 경우에도 해당 부분에 `Tab`을 입력해서 **단계**를 표현할 수 있어.

     

    *   첫번 째 `* 첫번 째`

    *   두번 째 `* 두번 째`

    -   첫번 째 `- 첫번 째`

        -   첫번 째의 첫번 째 `Tab`

     

    ## Link(링크)

     

    링크는 `[내용](링크)` 를 넣어서 표현할 수 있어.

     

    [구글](https://google.com)  

    [네이버](https://naver.com)  

    [깃헙](https://github.com)

     

    ## Code(코드)

     

    코드는 밑에서 설명해보도록 할게

     

    ``` kotlin

    /* 코드를 아래처럼 넣어서 표현할 수 있어.

     * ` 코드 `

     **/

    ```

     

    ## Code-Block(코드블럭)

     

    코드 블럭은 밑에서 설명해보도록 할게

     

    ``` kotlin

    /* 코드블럭을 아래처럼 넣어서 표현할 수 있어.

     * ``` kotlin

     * 코드내용

     * ```

     **/

    private val number = 3

    ```

     

    ```java

    /* ``` java

     * 코드내용

     * ```

     **/

    private int number = 3

    ```

     

    ## Table(표)

     

    | 학생번호 | 이름 | 나이 |

    | --- | --- | --- |

    | 211001 | 김철수 | 20 |

    | 211002 | 박영희 | 19 |

    | 211003 | 홍길동 | 21 |

     

    ## Image(이미지)

     

    이미지는 `[![ImageTitle](ImageLink)](EmbeddingLink)` 를 넣어서 표현할 수 있어.

    > 이미지 전체를 링크의 squared bracket 안에 넣으면 돼.

     

     

    [![Image](Icon-pictures.png "icon")](http://example.com)

     

     

     

     

Designed by Tistory.