#35 깃(Git) - 깃허브 리드미(README) 2 : 마크다운(markdown) 문법

안녕하세요 여러분! 에이블디입니다!

 

이번 시간에는 지난시간에 이어서 README를 좀 더 잘 작성하기 위해 마크다운(markdown) 문법에 대해 알아보도록 하겠습니다!

 

README 파일의 확장자가 .md인 것은 마크다운이라는 형식으로 작성되기 때문인데요, 마크다운은 사용이 쉽고 HTML 태그에 비해 간단하기 때문에 편리하게 README를 작성할 수 있습니다.

단 마크다운은 마크다운을 지원하는 프로그램이나 사이트에서만 사용할 수 있습니다.

 

그럼 지금부터 깃허브에서 README 파일을 작성할 때 자주 사용하는 몇 가지 마크다운 문법을 살펴보도록 하겠습니다!

 

1. 제목

제목을 입력할 때는 텍스트 앞에 #을 붙입니다.

#을 한 개에서부터 여섯 개까지 붙여서 제목의 글자 크기를 정할 수 있는데요, #과 텍스트 사이에는 여백이 있어야 합니다.

위 이미지처럼 입력을 했을 때 어떻게 출력되는지 확인해 볼까요?

 

결과물은 위와 같습니다! 

 

제목의 글자 크기를 정해야 할 때 참고해서 사용하면 되겠죠?

 

2. 텍스트 단락 줄 바꾸기

텍스트 단락에서 줄을 바꿀 때는 'Enter'키를 두 번 눌러 아래 이미지처럼 편집기에서 빈 줄을 하나 넣어야 합니다.

결과물은 아래의 이미지와 같습니다!

제목 텍스트의 경우에는 편집기상에서 줄을 한 번만 바꿔도 결과 화면에 줄 바꾸기가 적용되어 나타납니다.

 

3. 가로 줄

작성 내용 중에 가로 줄을 추가하려면 아래 이미지의 방법 중 하나를 사용하면 됩니다.

결과 화면을 볼까요?

아래의 이미지와 같이 나옵니다!

 

4. 순서가 있는 목록

순서가 있는 목록은 1, 2, 3, ... 처럼 번호를 붙여서 나타 낼 수 있습니다.

아래와 같이 작성을 했다면

결과 화면은 어떻게 되는지 확인해 볼까요?

위와 같이 출력이 되는 걸 확인할 수 있습니다.

 

순서 목록을 작성할 때 1, 5, 4, 2, 3처럼 순서대로 작성하지 않아도 순서 목록은 1, 2, 3, 4, 5처럼 순서대로 나타납니다.

한번 해볼까요?

아래의 이미지와 같이 순서를 섞어서 작성해보았습니다.

이제 결과 화면을 볼까요?

위와 같이 출력되는 것을 확인할 수 있습니다.

 

5. 순서가 없는 목록

순서가 없는 목록은 +나 - 또는 *를 붙여서 나열하면 자동으로 글머리 기호가 붙습니다.

바로 해볼까요?

아래의 이미지와 같이 작성을 해 보았습니다.

결과 화면을 확인해 봐야겠죠?

위의 이미지와 같이 출력이 되는 걸 확인할 수 있습니다.

 

그리고 순서 없는 목록에서 'Tab'키를 눌러 항목을 들여 쓰면 여러 단계를 가진 목록을 만들 수도 있습니다.

바로 작성해 보도록 하죠!

아래와 같이 작성을 해 보았습니다.

결과 화면을 확인하면!

위의 이미지와 같이 화면이 출력되는 것을 확인할 수 있습니다.

 

6. 텍스트 강조

작성 중인 텍스트의 일부분을 굵게 또는 기울임체로 써서 강조할 수 있습니다.

- 굵게 : 굵게 나타낼 텍스트의 앞뒤를 ** 또는 __로 감싸줍니다.

- 기울임체 : 기울임체로 나타낼 텍스트의 앞뒤를 * 또는 _로 감싸줍니다.

- 굵은 기울임체 : 굵은 기울임체로 나타낼 텍스트의 앞뒤를 *** 또는 ___로 감싸줍니다.

- 취소선 : 취소선을 나타낼 텍스트의 앞뒤를 ~~ 로 감싸줍니다.

 

바로 작성을 해 봐야겠죠?

아래와 같이 작성해 주어 보았습니다.

결과 화면을 볼까요?

위의 이미지와 같이 화면이 출력되는 것을 확인할 수 있습니다.

 

7. 인용

인용문을 삽입할 때는 인용문의 첫 번째 줄 앞에 >를 추가합니다.

인용문 안에 또 다른 인용문을 삽입하려면 >>를 추가합니다.

 

바로 실습해 봅시다!

아래의 이미지와 같이 작성해 주었습니다.

결과 화면을 확인해 보겠습니다!

위의 이미지와 같이 화면이 출력되는 것을 확인할 수 있습니다.

 

8. 소스코드

텍스트 사이에 소스 코드를 삽입하려면 ` 기호를 코드 앞뒤로 감싸주면 됩니다.

이 기호는 쉼표가 아니로 키보드에서 숫자키 '1'왼쪽에 있는 키로 그레이브(grave) 키, 백팃(backtick) 키, 백 쿼트(backquote) 키라고 합니다.

맥북에서는 영문으로 변환하고 누르셔야 `기호를 사용할 수 있습니다.

한글로 사용하면 ₩기호가 나타납니다.

 

바로 실습해 볼까요?

아래의 이미지와 같이 작성해 주었습니다.

이제 결과 화면을 볼까요?

위의 이미지와 같이 화면이 출력되는 것을 확인할 수 있습니다.

 

여러 줄의 소스코드를 삽입하려면 소스코드의 앞뒤에 ```를 붙입니다.

그리고 ``` 뒤에 java나 javascript 등 프로그래밍 언어를 함께 지정하면 해당 언어에 맞는 소스 형태로 표시됩니다.

 

바로 실습해볼게요!

아래의 이미지와 같이 작성해 주었습니다.

이제 결과 화면을 보겠습니다.

위의 이미지와 같이 화면이 출력되는 것을 확인할 수 있습니다!

 

9. 링크

링크 주소는 다음과 같이 여러 가지 형태로 삽입할 수 있습니다.

1. <링크 주소>

2. [링크 텍스트](링크 주소)

3. [링크 텍스트](링크 주소, "부가 설명")

 

1번 형태로 입력하면 링크 주소가 그대로 화면에 나타나고 누르면 해당 주소로 이동합니다.

2번 형태는 링크 텍스트만 나타나며 텍스트를 누르면 괄호에 입력한 주소로 이동합니다.

3번 형태는 이동할 링크 주소 옆에 부가설명을 넣은 것인데요, 이렇게 하면 링크 텍스트 위로 커서를 올렸을 때 부가 설명이 말풍선 형태로 나타납니다.

 

바로 실습해볼게요!

아래의 이미지와 같이 작성해 주었습니다.

결과 화면을 확인해 보면!

위의 이미지와 같이 화면이 출력되는 것을 확인할 수 있습니다!

 

이번 시간에는 README 파일을 작성할 때 필요한 마크다운 언어에 대해 조금 살펴보았습니다!

 

다음 시간에는 README에 이미지를 포함시키는 방법에 대해 알아보도록 할게요!

 

그럼 여러분 다음시간에 만나요!