화장을 한 얼굴은 예쁩니다. 그런데 화장품이 없으면 그 얼굴을 만들 수 없습니다. 화장을 지우면 어떻게 되는지도 알 수 없습니다.

마크다운은 화장을 안 한 문서입니다. 민낯 그대로인데도 읽힙니다. 그리고 필요할 때는 저절로 화장이 얹힙니다. 이번 시간에 배울 게 정확히 이겁니다.

이번 강부터 세 강 동안은 깃 명령어를 거의 치지 않습니다. 잠깐 옆길로 새는 것처럼 보이지만 그렇지 않습니다. 14강에서 깃허브에 파일을 올리는 순간, 마크다운을 모르면 아무것도 못 만듭니다.

문서를 꾸미는 세 가지 방식

지금까지 우리가 쓴 memo.txt 는 메모장 파일입니다. 여기에는 굵은 글씨도, 큰 제목도 넣을 수 없습니다. 넣을 방법 자체가 없습니다.

그러면 워드를 쓰면 되는데, 워드에는 다른 문제가 있습니다.

메모장 (.txt)

민낯 · 꾸밀 수 없음

• 어디서 열어도 그대로 읽힌다
• 제목도 굵은 글씨도 못 만든다
• 우리 memo.txt 가 여기 있다

워드 (.docx)

화장 · 프로그램이 있어야 함

• 마우스로 크기 키우고 굵게 만든다
• 워드가 없으면 못 연다. 열어도 깨진 글자만 나온다
• 깃이 안을 못 읽어서 diff 도 안 나온다

마크다운 (.md)

민낯인데 꾸밈이 읽힘

• 메모장으로 열어도 그대로 읽힌다
• 글자 몇 개로 제목 · 굵게 · 목록을 표시한다
• 깃허브에서 열면 저절로 꾸며져 보인다

두 번째 칸의 마지막 줄이 중요합니다. 워드 파일은 깃과 상성이 나쁩니다. 7강에서 git diff 로 어느 줄이 어떻게 바뀌었는지 봤는데, 워드 파일은 그게 안 나옵니다. 안이 사람이 읽을 수 있는 글자가 아니라서 그렇습니다. 깃은 글자 파일을 다룰 때 제일 강합니다.

<h1> 대신 # 하나

웹페이지에서 제목을 만들려면 원래 <h1> 같은 표시를 글 앞뒤로 둘러야 합니다. 앞에 한 번, 뒤에 한 번, 두 번 써야 합니다. 그래야 브라우저가 "여기부터 여기까지가 큰 제목" 이라고 알아듣습니다.

마크다운은 같은 일을 글자 하나로 합니다.

웹의 방식

앞뒤로 두 번 두른다

• <h1> 을 앞에, 닫는 표시를 뒤에
• 타자가 열 글자 넘게 늘어난다
• 표시를 모르는 사람은 본문이 어디부터인지 헷갈린다

마크다운의 방식

앞에 한 글자

• # 오늘의 메모
• 타자가 두 글자 늘어난다
• 처음 보는 사람도 본문은 그냥 읽힌다

여기서 짚고 갈 게 있습니다. 마크다운은 웹의 방식을 대신하는 게 아니라 줄여 쓰는 것입니다. # 으로 쓴 글은 결국 웹에서 보일 때 <h1> 로 바뀝니다. 우리는 짧은 쪽만 알면 됩니다.

그래서 같은 글자가 두 얼굴을 갖습니다. 내가 파일에 적어둔 건 늘 # 오늘의 메모 라는 글자 그대로이고, 깃허브나 노션이 그 파일을 열 때 # 을 제목 표시로 알아보고 큼직하게 그려줍니다. 파일 안에는 원문만 들어 있고, 꾸밈은 볼 때 얹히는 것입니다.

세 가지만 배웁니다

마크다운 문법은 열 개 남짓인데, 이번 강에서는 가장 많이 쓰는 셋만 봅니다. 나머지는 12강에서 한 번에 몰아서 다룹니다.

무엇	이렇게 쓴다	이렇게 보인다
제목	# 큰제목	큼직한 제목 줄
작은 제목	## 중간제목	한 단계 작은 제목 줄
굵게	**중요**	굵은 글씨
기울임	*살짝*	기울어진 글씨
목록	- 항목	점이 붙은 목록 줄
번호 목록	1. 항목	번호가 붙은 목록 줄

제목은 # 개수로 크기가 정해집니다. # 하나가 제일 크고, 늘릴수록 작아집니다. ###### 여섯 개까지 있는데, 실제로 쓰는 건 하나 · 둘 · 셋 정도입니다.

memo.txt 를 memo.md 로 다시 씁니다

이제 5강부터 키워온 파일을 마크다운으로 옮깁니다. 두 가지 일을 하는데, 10강에서 배운 대로 커밋을 나눠서 합니다.

먼저 이름만 바꿉니다.

1. 01

   탐색기에서 memo.txt 의 이름을 memo.md 로 바꿉니다

   내용은 아직 건드리지 않습니다

2. 02

   git status 를 칩니다

   깃이 뭐라고 하는지 먼저 봅니다

3. 03

   git add .

   9강에서 .gitignore 를 만들어뒀으니 이제 점 하나로 담아도 안전합니다

4. 04

   git status 를 다시 칩니다

   담기 전과 말이 달라집니다. 이게 이 단계의 볼거리입니다

5. 05

   git commit -m "메모 파일을 마크다운으로 전환"

   이름만 바꾼 커밋입니다

담기 전의 git status 는 이렇게 나옵니다.

• $ git status
• On branch master
• Changes not staged for commit:
• deleted: memo.txt
• Untracked files:
• memo.md
• no changes added to commit (use "git add" and/or "git commit -a")

깃이 당황한 것처럼 보입니다. "memo.txt 가 사라졌고, 모르는 memo.md 가 생겼다" 고 말하고 있습니다. 이름을 바꿨다는 건 아직 모릅니다.

그런데 git add . 로 담고 나서 다시 물어보면 말이 달라집니다.

• $ git add .
• $ git status
• On branch master
• Changes to be committed:
• renamed: memo.txt -> memo.md

renamed — 이름을 바꾼 것으로 알아봤습니다. 둘을 나란히 놓고 보니 내용이 같아서 같은 파일이라고 판단한 겁니다. 지운 것과 새로 만든 것이 아니라 한 파일의 이름이 바뀐 일로 기록됩니다.

이제 내용을 마크다운으로 고칩니다. 여기부터가 오늘 배운 것을 쓰는 자리입니다.

1. 01

   memo.md 를 열어 맨 위에 제목을 답니다

   # 오늘의 메모

2. 02

   빈 줄을 하나 두고, 아래에 작은 제목과 목록을 씁니다

   ## 배운 것
   
   - 깃은 폴더를 지켜본다
   - 커밋은 **한 줄로** 요약한다

3. 03

   저장하고 git diff 로 확인합니다

   7강에서 배운 그대로입니다. 어느 줄에 # 이 붙었는지 눈으로 봅니다

4. 04

   git add memo.md 하고 커밋합니다

   git commit -m "메모에 제목과 목록 표기 적용"

이걸 왜 지금 배우는가

깃 강의를 듣다가 갑자기 문서 표기법을 배우니 옆길로 새는 기분이 듭니다. 이유가 셋 있습니다.

언제	무엇에 쓰이나
14강	깃허브에 올리는 첫 파일이 README.md 다. 저장소 대문에 걸린다
19강	프로필 화면을 꾸미는 것도 마크다운 파일 하나다
20강	이 파일 하나가 웹페이지가 된다. URL 로 열린다

세 번째 줄이 이 편의 목표 지점입니다. 코드를 한 줄도 안 쓰고 내 웹페이지를 갖게 되는데, 그 페이지의 내용이 바로 오늘 배운 문법으로 쓰인 파일입니다.

정리하면

• 마크다운은 화장 안 한 문서입니다. 민낯으로도 읽히고, 볼 때 저절로 꾸며집니다
• .md 는 특별한 파일이 아니라 그냥 글자 파일입니다. 메모장으로 만들고 열 수 있습니다
• 워드 파일은 깃과 상성이 나쁩니다. 안이 글자가 아니라서 git diff 가 안 나옵니다
• 웹에서 <h1> 로 두르는 일을 마크다운은 # 한 글자로 합니다. 결과는 같습니다
• 오늘 배운 셋 — 제목 #, 굵게 **양옆**, 목록 - 항목
• 표시 뒤에는 한 칸을 띄웁니다. #제목 은 안 먹고 # 제목 이라야 합니다
• 줄을 나누려면 엔터를 두 번 칩니다. 한 번은 붙어서 나옵니다
• 파일 이름을 바꾸면 깃은 처음엔 deleted + Untracked 로 보다가, 담고 나면 renamed 로 알아봅니다
• 이름 바꾸기와 내용 고치기는 커밋을 나눠서 했습니다. 10강에서 정한 기준 그대로입니다

다음 12강에서는 나머지 문법을 한 번에 몰아서 봅니다. 링크 · 이미지 · 인용 · 구분선 · 표 · 코드 블록 · 체크박스까지 일곱 가지인데, 오늘 셋을 알았으면 나머지는 표를 보고 따라 치는 수준입니다. memo.md 에 표와 체크박스까지 얹어서 완성합니다.