💡Tips - 마크다운에 대하여

마크다운(MarkDown) 문법

위키백과에서 정의하는 마크다운(Markdown)의 정의는 다음과 같습니다.

마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.

  • 위키백과

마크다운(MarkDown)은 Github의 ReadMe.md 등에서 md 확장자를 통해서 접해보셨을 거에요, 쉽게 말하면 텍스트 문서를 작성하기 위한 언어 이고, 특수문자나 기호 등을 사용해서 HTML로 쉽게 변환할 수 있는 언어라고 생각하시면 됩니다.

개발자라면 마크다운(MarkDown) 문법 정도는 알고계셔야 좋습니다 :)

그럼 알아볼까요?

제목(Header)

제일 먼저 제목입니다. 제목을 작성하는 방법은 두가지로 나뉩니다.

  • #을 사용해 표시
  • Horizen을 사용해 표시

#을 사용해 표시

# 헤더 - h1
## 헤더 - h2
### 헤더 - h3
#### 헤더 - h4
##### 헤더 - h5
###### 헤더 - h6

#을 1개부터 6개까지, 총 6개 크기의 헤더를 작성할 수 있습니다. #이 적을 수록 큽니다.

  • 예시

헤더 - h1

헤더 - h2

헤더 - h3

헤더 - h4

헤더 - h5
헤더 - h6

수평선(Horizen)을 사용해 표시

Horizen이 뭐냐면, 수평선을 의미합니다. 후에 자세히 설명드리겠지만, 이 밑에 보이는 선으로 구분선을 쓸 수 있도록 해줍니다.

이걸 텍스트 바로 밑에 쓰면, 헤더를 표현할 수 있습니다.

헤더 - h1
=====

헤더 - h2
-----
  • 예시

헤더 - h1

헤더 - h2

수평선(Horizen)

위에서 사용했던 수평선에 대해서 설명드리겠습니다.

***
---
___

위 3가지 중에 쓰시면 되고, 3개 이상 쓰시면 적용됩니다. 위에서 사용했던 것 처럼 텍스트 바로 밑줄에 사용하면 헤더로 적용됩니다. 다만 ===는 수평선으로 사용되지 않고, 헤더를 표시할 때만 사용되는 수평선입니다.

===

안되죠?

목록(List)

목록을 사용할 때는 순서가 정해진 경우에는
1., 2. 와 같은 기호로, 순서가 정해지지 않은 경우에는
-,*,+를 사용합니다. 순서가 정해지지 않은 경 탭이나 스페이스바로 들여쓰기로 하위 목록을 정할 수 있습니다.

먼저 순서가 정해진 목록입니다.

순서가 있는 목록
1. 짜장면
3. 피자
2. 햄버거
  • 예시

순서가 있는 목록

  1. 짜장면
  2. 피자
  3. 햄버거

위에서 썼던 번호가 뒤바뀌어도 결과는 순서대로 나오게 됩니다.

다음은 순서가 정해지지 않은 목록입니다.

순서가 없는 목록
* 목록 1
  * 목록 1.1
    * 목록 1.2

- 목록 2

+ 목록 3
  • 예시

순서가 없는 목록

  • 목록 1
    • 목록 1.1
      • 목록 1.2
  • 목록 2
  • 목록 3

줄바꿈

줄을 바꿔봐요<br>
줄을 바꿔봐요 (스페이스바 3번 입력)
다음 줄
  • 예시

줄을 바꿔봐요
줄을 바꿔봐요
다음 줄

강조

이텔릭체
*테스트* _테스트_

볼드체
**테스트** __테스트__

취소선
~~테스트~~

밑줄

<u>밑줄</u>
  • 예시

이텔릭체 테스트 테스트

볼드체 테스트 테스트

취소선 테스트

밑줄

밑줄

밑줄같은 경우에는 마크다운 문법은 아니고, html 태그입니다.

링크

[텍스트](참조할 주소)를 써주시면 됩니다.

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

이렇게 사용하면 구글이라는 텍스트에 주소가 반영됩니다.

꺾쇠를 활용해서 링크를 그대로 반환할 수 있습니다.

구글: <https://google.com>
  • 예시

구글

이렇게 사용하면 구글이라는 텍스트에 주소가 반영됩니다.

꺾쇠를 활용해서 링크를 그대로 반환할 수 있습니다.

구글: https://google.com

이미지 삽입

링크를 쓰는 방법과 비슷합니다. 다만 앞에 !가 붙습니다.

이미지만 삽입
![이미지 설명](이미지 링크)

링크를 포함해서 이미지 삽입
[![이미지 설명](이미지 링크)](연결될 url)
  • 예시

이미지만 삽입 이미지

링크를 포함해서 이미지 삽입

이미지

다만 깃허브 블로그를 운영할 때 이런식으로 이미지를 이런식으로 올리는 경우 사이즈를 조절하기가 좀 까다로운 경우가 많아 저는 그냥 직접 html태그를 입력하는 방식으로 사용합니다.

html태그로 삽입

<img src = "주소" width = "50%" height = "50%" >

이런식으로 이미지를 삽입하면, 크기를 조정해 줄수 있고 %를 붙이지 않으면 픽셀로 조정됩니다. 다만 %는 HTML5에서는 픽셀(pixel) 단위만 적용됩니다.

저는 마크다운을 편집할 때 Atom을 사용하는데요, 플러그인 중에서
Markdown-preview-enhanced 를 사용하시면 Image Helper를 사용할 수 있습니다. 이렇게 하면 imgur에 이미지가 올라가서 url이 생성됩니다. 이 플러그인을 사용하면 Html 태그로 사용해서 쓰기 편해서 사용중입니다.

인용문

> 인용문 1
>> 인용문 2
>>> 인용문 3
  • 예시

인용문 1

인용문 2

인용문 3

>의 갯수에 따라 중첩하여 쓸 수 있습니다. 인용문 많이 쓰면 이쁜거 같아요 ㅎ

코드 블록

한 단어만 감싸는 경우는 다음과 같습니다.

`테스트`

테스트

전체 문장을 삽입하는 경우에는(코드) 코드의 시작과 끝에 ``` 를 붙이면 됩니다.

코드를 삽입 할 때 언어를 설정해서 하이라이트를 바꿔줄 수도 있습니다. 위쪽(시작) 부분에 언어 이름을 적어주시면 됩니다.

@RestController
public class ImageController {
    @GetMapping(value = "img/{imageName}.{extension}", produces = MediaType.IMAGE_PNG_VALUE)
    public @ResponseBody byte[] getImage(
            @PathVariable(name = "imageName") String imageName,
            @PathVariable(name = "extension", required = false) String extension,
            HttpServletRequest request) throws IOException{

        String imagePath = request.getServletContext().getRealPath("/img/"+imageName+"."+extension);
        InputStream imageStream = new FileInputStream(imagePath);
        byte[] imageByteArray = IOUtils.toByteArray(imageStream);
        imageStream.close();
        return imageByteArray;
    }
}

테이블

테이블을 작성하기 위해선 |로 구분해서 사용하며, 폰트스타일을 적용할 수 있습니다.

그리고 -으로 구분한 후 양쪽에 :(세미 콜론)을 붙이면 왼쪽, 가운데, 오른쪽 정렬이 가능합니다.

| 중식 | 한식 | 양식 |
|:----------|:----------:|----------:|
| **마라탕** | *비빔밥* | ~~파스타~~ |
  • 예시
중식 한식 양식
마라탕 비빔밥 파스타

체크박스

-,+,* 뒤에 띄어쓰기를 합니다. 그다음 대괄호를 적고 x 혹은 띄어쓰기를 넣으면 체크박스를 활성화 할 수 있습니다. x를 넣으면 체크가 활성화 됩니다.

- [ ] 운동 하기
- [x] 강의 듣기
  • 운동 하기
  • 강의 듣기

이모티콘

Github Pages에서 제공하는 jekyll에서는 jemoji를 사용해서 이모지를 삽입할 수 있습니다. Github에서 사용하는 마크다운에서는 바로 사용하실 수 있습니다.

(:smile:)이런식으로 사용하시면 되는데, Github Blog에서는 적용이 안됩니다. 이유는 kramdown을 사용하기 때문인데요, 자세히 아실 필요는 없고

iemoji

여기서 이모지 복사해서 사용하시면 됩니다.

jemoji가 안되어서 저는 오류로 잠깐 보류하고, 그냥 직접 복사해서 사용하는 중입니다. 😃이게 더 편한 것 같아요..ㅎ

jemoji는 후에 포스팅하겠지만 간략히 설명드리면, _config.yml에

plugins:
  -jemoji

를 추가하고, Gemfile에 등록후

sudo bundle install
sudo bundle update
bundle exec jekyll serve

해주시면 적용할 수 있습니다. 사용은 :smile:등으로 사용하실 수 있습니다.

형광펜

open color

해당 기능은 위 페이지를 참고하셔서 추가하셔야 하고, 저는 테마를 Summon님 의 Github에서 참고하여 수정하고 기능을 추가했기 때문에 먼저 추가해주셨습니다.

형광펜입니다 기본 형광펜 => 바이올렛

후기

저도 마크다운에 익숙하지 않아서 블로그 글 쓰는데 몇시간이 걸리지만, 이렇게 한번 정리해놨으니 앞으로 빠르게 쓸 수 있겠어요 ㅎ 이 글을 보신 여러분들도 다들 이쁜 마크다운 애용하시길 바랍니다. 혹시 더 필요할 게 있으면 계속해서 추가할 예정입니다. 감사합니다!