마크다운 주요 문법

이 글은 블로그 포스트 작성 시 주로 사용할 수 있는 마크다운의 주요 문법들을 남긴 포스팅 입니다.

블로그를 운영하며 필요했거나 사용한 마크다운 문법이 있다면 이곳에 지속적으로 업데이트할 예정 입니다.

마크다운은 HTML을 사용하여 더 복잡한 레이아웃이나 스타일을 적용할 수 있습니다.

이 포스트는 HTML 이나 Jekyll 에서 사용되는 Front Matter 관련 표현도 함께 작성 하였습니다.

( 해당 문서는 Typora 편집기로 작성 하였습니다. )

라인

• 마크다운에서 라인을 만들려면 하이픈(-), 별표(*), 언더바(_)를 세 개 이상 연속하여 작성합니다.

예시

제목 (헤더)

• 마크다운에서 제목 (헤더)를 만들려면 # 기호를 사용하고 뒤에 제목 내용을 추가합니다.
• #의 개수에 따라 제목의 수준이 달라집니다. 한 번 사용할수록 수준이 낮아지며, 최대 6개까지 사용할 수 있습니다.

예시

# 이것은 제목입니다 (제목 1)
## 이것은 부제목입니다 (제목 2)
### 이것은 소제목입니다 (제목 3)
#### 이것은 소소제목입니다 (제목 4)
##### 이것은 더 소소제목입니다 (제목 5)
###### 이것은 더더 소소제목입니다 (제목 6)

이것은 제목입니다 (제목 1)

이것은 부제목입니다 (제목 2)

이것은 소제목입니다 (제목 3)

이것은 소소제목입니다 (제목 4)

이것은 더 소소제목입니다 (제목 5)

이것은 더더 소소제목입니다 (제목 6)

개행 문자

• 개행 문자(줄 바꿈 문자)는 텍스트에서 새로운 줄로 이동하여 텍스트를 다음 줄로 시작하도록 하는 문자입니다. 이것은 일반적으로 텍스트 편집기에서 엔터 키를 눌러 새 줄로 이동하는 것과 유사한 역할을 합니다.
• br 태그는 브라우저에게 새로운 줄로 이동하도록 지시하는 태그입니다. 마크다운 개행 문자로 개행 표현이 어려운 경우 사용 합니다.
• <br/> 와 같이 작성할 수 있습니다.

텍스트 스타일

• 마크다운은 아래와 같이 다양한 텍스트 스타일을 제공합니다.

• Bold
  • **Bold** 와 같이 작성할 수 있습니다.

• Italics
  • __Italics__ 와 같이 작성할 수 있습니다.

• Strikethrough
  • ~~Strikethrough~~ 와 같이 작성할 수 있습니다.

• Underline
  • <ins>Underline</ins> 와 같이 작성할 수 있습니다.

• ^Superscript
  • Superscript(슈퍼스크립트)는 일반 텍스트 위에 작게 올려 표시되는 문자 또는 숫자입니다. 이것은 보통 제곱수, 화학식, 수학적 표현, 상징 등에서 사용됩니다.
  • <sup>Superscript</sup> 와 같이 작성할 수 있습니다.

• _Subscript
  • Subscript(서브스크립트)는 일반 텍스트 아래에 작게 표시되는 문자 또는 숫자입니다. 주로 화학식, 수학적 표현, 수식 등에서 사용됩니다.
  • <sub>Subscript</sub> 와 같이 작성할 수 있습니다.

• Abbreviation: HTML
  • abbr 태그의 title 속성을 사용하여 마우스를 해당 약어 위로 가져갈 때 확장된 용어를 브라우저상 보여줍니다.
  • <abbr title="HyperText Markup Language">HTML</abbr> 와 같이 작성할 수 있습니다.

• Citation: — Chester How
  • cite 태그는 인용된 작품의 제목을 나타내는 데 사용됩니다.
  • <cite>&mdash; Chester How</cite> 와 같이 작성할 수 있습니다.

텍스트 컬러

• 마크다운에서는 직접적으로 텍스트에 색상을 지정하는 방법은 제공되지 않습니다. 하지만 HTML을 사용하여 이를 구현할 수 있습니다.
• <span style="color:blue">파란색 텍스트</span> 와 같이 작성할 수 있습니다.

예시

파란색 텍스트

링크

• 마크다운은 아래와 같은 방법으로 링크를 연결하는 방법을 제공 합니다.

• 새 창으로 링크 NAVER
  • 새 창으로 링크 [NAVER](https://www.naver.com) 와 같이 작성할 수 있습니다.

• 새 탭으로 링크 NAVER
  • NAVER NewTab Link [NAVER](https://www.naver.com){:target="_blank"} 와 같이 작성할 수 있습니다.

블록 인용구

• 블록 인용구는 주로 인용된 텍스트를 표시하고 강조하는 데 사용 합니다.
• > 블록 인용구 와 같이 작성할 수 있습니다.

예시

블록 인용구

코드

• 마크다운은 아래와 같은 방법으로 코드를 강조하는 방법을 제공 합니다.

• 코드인라인 System.out.println(" hello world! ");
  • 마크다운에서 코드를 인라인으로 작성할 때는 ` (역따옴표)를 사용합니다.

예시

System.out.println(" hello world! ");\ 와 같이 작성할 수 있습니다.

• 코드펜스
  • 마크다운에서 코드를 블록으로 작성할 때 사용합니다.
  • 세 번의 ` (역따옴표) 을 사용하여 작성합니다.

예시

//코드라인은 코드펜스 통해 입력할 수 있습니다. ( Typora 단축키 : option + commend + c )

```
System.out.println( "hello world!" );
```

이미지

• 마크다운에서 이미지를 표현할 때 아래와 같은 방법을 제공합니다.
  • ![대체 텍스트](이미지 URL "이미지 제목") 와 같이 작성할 수 있습니다.

예시

excerpt separator

• excerpt separator 란 포스트의 일부분만을 홈페이지나 목록에서 보여주고, 사용자가 글의 전체 내용을 읽기 위해 포스트를 클릭하도록 유도하는 기능 입니다.
• Jekyll과 같은 일부 정적 사이트 생성기에서 사용되는 Front Matter(페이지 상단에 있는 메타데이터)의 설정입니다.
• <!--more--> 와 같이 작성할 수 있습니다.

예시

이것은 첫 번째 문단입니다.

<!--more-->

이것은 두 번째 문단입니다. 이 부분부터는 블로그의 개별 포스트 페이지에서만 볼 수 있습니다.

맺음말

마크다운 문서를 처음 접하였던건 사회 초년생 시절 회사 개발 프로젝트별 프로젝트의 소개, 프로젝트 스펙, 패키지 구조, 빌드 및 배포 방법 등의 설명을 가독성있게 작성하기 위해서였습니다. 그 아이디어는 아마도 Github의 README.md 파일의 영향을 받은 듯 합니다.

당시에는 조금이라도 더 편하게 작성해보겠다고 유료 소프트웨어인 Typora 도 구매해서 신나게 프로젝트별 README.md 문서도 작성하고 API 문서도 작성하고 하다보니 이제는 어느정도 친숙해진 듯 합니다.

그렇게 마크다운 문서를 작성하기 시작했고 지금은 이렇게 개인 블로그 포스트도 작성할 때 활용할 수 있게 되었습니다.

제가 알고있는 마크다운 문법은 위 내용에서 크게 벗어나지 않습니다. 하지만 위 내용만으로도 예쁘고 정갈한 문서를 작성할 수 있는게 바로 마크다운의 장점이 아닐까 싶습니다.