Github 블로그 Tips (3) - 포스트의 가독성 높이기

3. 포스트의 가독성 높이기

깃허브 블로그의 포스트는 마크다운 파일(.md)을 이용해 업로드 한다. 따라서, 마크다운 문법에 익숙한 사람이라면 본인의 취향에 맞게 글을 정리할 수 있을것이다. 이번 포스트에서는 마크다운 문법 중에서도 포스트의 가독성을 높여주는 유용하면서도 기본적인 기능들을 소개하고자 한다.

3.1 헤더 (Headers)

제목을 쓰거나 문단을 구분할 때 사용되는 헤더 또는 헤딩태그 이다.

# H1: Header 1
## H2: Header 2
### H3: Header 3
#### H4: Header 4
##### H5: Header 5
###### H6: Header 6

위에서 볼 수 있는 것과 같이, # 문자만을 이용하기 때문에, 헤딩 태그를 사용하는데 큰 어려움은 없을 것이다. 블로그 테마에 따라서 특정 헤더에는 구분선이 함께 적용되기도 한다. 현재 필자가 사용중인 minimal-mistakes 기본 테마에서는 H2 헤더에 대해 구분선이 자동으로 추가되는 것을 볼 수 있다.

대부분의 테마에서 포스트 제목은 파일(.md) 상단에 title 항목을 이용해 표시하기 때문에 포스트 내에서의 제목은 H2 헤더를 이용하는 것 같다. 또한, 실제 포스트를 작성할 때 문단을 세세하게 구분하는 경우는 거의 없으므로, 개인적으로는 H3 또는 H4 태그 정도만을 이용해서 문단을 구분하는 것이 적당한 것 같다.

---

3.2 문장/단어 강조하기

문단 구분 이외에도 특정 문장이나 단어를 강조하는 방식으로 포스트의 퀄리티를 높일 수 있다. 먼저, 단어 또는 문장을 하나의 아스테릭(*) 문자를 이용해서 감싸면 기울임체, 두 개를 이용해서 감쌀 경우 굵은 글씨체로 표현된다. 부등호(>) 문자는 인용구를 표기하는 용도로 지원되는데, 특정 문구를 인용하지 않아도 원하는 문장을 강조하는 용도로 쓰는데 적합하다.

*기울임체*

**굵은 글씨**

>인용구 강조

기울임체

굵은 글씨

인용구 강조

위의 세 가지 정도가 가장 보편적으로 사용되는 강조 문법이고, 그 외에 유용한 기능으로는 Notice 기능이 있다(정확하게 마크다운 문법에서 제공해주는 것인지 이와 유사한 크렘다운(Kramdown)의 기능인지는 잘 모르겠다). minimal-mistakes 테마에서는 아래 예시와 같이 문장 아래에 {: .notice} 를 입력해주면, Notice 기능을 이용할 수 있다.

**Notice:** Notice 기능 이용해서 원하는 문장 강조하기.
{: .notice}

Notice: Notice 기능 이용해서 원하는 문장 강조하기.

추가적으로 Notice 뒤에 {: .notice--keywords} 처럼 특정 키워드를 입력해주면, 색상을 변경해줄 수도 있다. 사용 가능한 키워드로는 primary, info, warning, danger, success 등이 있다.

**Notice:** Notice 기능 이용해서 원하는 문장 강조하기.
{: .notice--success}

Notice: Notice 기능 이용해서 원하는 문장 강조하기.

---

3.3 그 외 기능

기본적인 포스팅 기능 이외에도 코드/수식 추가하기, 버튼 추가하기, 체크리스트 만들기, YouTube 영상 추가하기 등 다양한 기능들을 마크다운에서 지원하고 있다. 아래 링크 참조.

int main(void){
    int a = 10;
    int b = 5;

    printf("Hello World!\n");
    printf("a + b = %d\n", a+b);

    return 0;
}

개인적으로 여러 줄의 코드의 경우 일일이 옮겨 적고 들여쓰기 맞추고 하는 것보다 캡쳐해서 이미지의 형태로 올리는 방식이 더 편리한 것 같다.

Reference link: https://wikidocs.net/1678