벨로그를 시작하기에 앞서 Markdown(마크다운)을 알아보고, 앞으로 자주 사용할 사용법을 중점적으로 정리해보려고 한다.
1. 마크다운이란?
마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다.
HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일 (.md 파일) 이나 온라인 게시물 등에 많이 사용된다. 특히 Github Repository의 README.md 때문에 개발자들에게는 친숙할 것이라 생각한다. (비록 .md 확장자 파일이 Markdown 언어로 작성된 파일인 것을 몰랐을지라도) 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼져가게 된다.
2. 마크다운의 장점
2.1 쉽다
문법이 간단하여, 쉽고 빠르게 익힐 수 있다.
2.2 편리하다
나는 운영체제에서나, IDE 에서나, 이렇게 글을 적는 에디터 환경에서나, 내가 자주 사용하는 기능을 실행할 때 항상 단축키 사용을 지향한다. (군 시절 행정 관련 보직을 맡았던 남자들은 알 것이다. 마우스에 손을 대지 않고서 워드프로세싱 작업이 가능하다는 것을...ㅋㅋ)
마크다운 문법을 사용하면 에디터에서 필요한 아이콘을 찾아 누르는 과정을 생략하고, 키보드로 바로 문법을 사용하여 단축키를 사용하는 느낌이기에 아주아주 편리하다.
2.3 활용성이 높다
Github, Confluence 등 마크다운을 지원하는 에디터를 사용할수 있는 환경이라면, 이미 숙지하고있는 마크다운 문법으로 가독성 좋은 글을 쉽게 작성할 수 있다.
3. 마크다운 문법
3.1 헤더
🗒️ 입력
# 제목 1 `<h1>`
## 제목 2 `<h2>`
### 제목 3 `<h3>`
#### 제목 4 `<h4>`
##### 제목 5 `<h5>`
###### 제목 6 `<h6>`💻 출력
제목 1 <h1>
제목 2 <h2>
제목 3 <h3>
제목 4 <h4>
제목 5 <h5>
제목 6 <h6>
3.2 인용(Blockquotes)
🗒️ 입력
> # 1단
인용(Blockquotes) 1단
인용(Blockquotes) 2단
인용(Blockquotes) 3단
>> ## 2단
인용(Blockquotes) 중복 사용 > 중첩 가능 (2단 중첩)
>>> ### 3단
인용(Blockquotes) 중복 사용 > 중첩 가능 (3단 중첩)
>>>> #### 4단
인용(Blockquotes) 중복 사용 > 중첩 가능 (4단 중첩)
>>>>> #### n단
계속해서 중첩할 수 있다💻 출력
1단
인용(Blockquotes) 1단
인용(Blockquotes) 2단
인용(Blockquotes) 3단2단
인용(Blockquotes) 중복 사용 > 중첩 가능 (2단 중첩)
3단
인용(Blockquotes) 중복 사용 > 중첩 가능 (3단 중첩)
4단
인용(Blockquotes) 중복 사용 > 중첩 가능 (4단 중첩)
n단
계속해서 중첩할 수 있다
3.3 목록
3.3.1 번호 형태 목록
🗒️ 입력
> # 1단
1. First
2. Second
3. Third💻 출력
1. First
2. Second
3. Third
3.3.1 기호 형태 목록
*, +, - 아무 문자나 사용 가능하며, 동일한 효과를 가진다.
🗒️ 입력
* 1단계
- 2단계
+ 3단계
+ n단계...💻 출력
- 1단계
- 2단계
- 3단계
- n단계...
- 3단계
- 2단계
3.4 코드 블럭
백틱(`) 3개로 감싸서 작성한다. (아래에서는 임의로 표현을 위하여 세미 콜론으로 사용)
코드블럭 시작점에 사용하는 언어를 선언하면 Syntax Highlighting이 가능하다.
백틱 한개로만 감쌀 경우, 글자 단위로 코드 효과를 낼 수 있다.
🗒️ 입력
'''python
def solution(num):
return num
'''
`Just Do it`Just Do it
💻 출력
def solution(num):
print('hello', 'world')
return num3.5 가로선 넣기
다양한 입력을 통해 가로선을 넣을 수 있으며, 동일한 효과를 가진다.
🗒️ 입력
* * *
***
*****
- - -
---
-----
_ _ _
___
_____💻 출력
3.6 링크(Link)
🗒️ 입력
인라인 링크
[인라인 링크](https://velog.io/@hashwook)
url 링크
<https://velog.io/@hashwook>
참조 링크
[velog]:https://velog.io/@hashwook
[hashwook velog]
그리고 다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
Google : https://google.com
Naver : <https://naver.com>💻 출력
URL 링크
https://velog.io/@hashwook
참조 링크
그리고 다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
Google : https://google.com
Naver : https://naver.com
3.7 강조(Emphasize)
🗒️ 입력
__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~~취소선~~
밑줄은 <u>밑줄치기</u> 태그로 감싸기💻 출력
굵게
굵게
기울여 쓰기
기울여 쓰기
취소선
밑줄은 Underline 태그로 감싸기
3.8 글자 색상
🗒️ 입력
<span style="color:red">red</span>
<span style="color:#d3d3d3">#d3d3d3</span>
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>💻 출력
red
#d3d3d3
rgb(245, 235, 13)
3.9 이미지 삽입
🗒️ 입력
1. 일반 이미지 삽입하기: 
예시: 
2. 이미지에 설명 삽입하기: 
예시: 
** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함
3. 이미지에 링크 걸기: [](연결할 url "url 설명 문구")
예시: [](https://www.apple.com/kr/mac-mini/ "Mac mini")
사이즈 조절 기능은 따로 없기 때문에 URL에 <img width="" height=""></img>를 이용해야 한다.💻 출력
-
일반 이미지 삽입하기: 
예시:
-
이미지에 설명 삽입하기: 
예시:
** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함 -
이미지에 링크 걸기: [](연결할 url "url 설명 문구")
예시:
마무리
velog 기록을 본격적으로 시작하기전에, 앞으로 내가 자주 사용할 법한 syntax들만 중점적으로 정리해보았다.
더욱 더 다양하고 상세한 마크다운 사용법을 알고 싶다면,
https://www.markdownguide.org/ 페이지 방문을 권한다.
이상 끝~
