SCM/Git

Markdown (README.md) 문서 작성 방법

제이널 2022. 1. 6. 14:27

 

Github 저장소에서 README.md 파일을 본 적이 있는데, 확장자인 md는 Markdown을 의미하며

Github가 자동적으로 README.md 파일을 찾아서 저장소에 표시해줍니다.

 

 

마크다운은 경량 마크업 언어로, 문서를 작성하는 데 사용되며, 예를 들어 Github와 같은 저장소에서 프로젝트에 대한 설명을 담은 문서를 작성할 수 있습니다. 이제 위와 같은 마크다운 문서를 작성하는 방법에 대해 간단히 알아보겠습니다.

 

목차

1. 제목(Header)

2. 문장(Pragraph)

3. 줄바꿈(Line Breaks)

4. 강조(Emphasis)

5. 목록(List)

6. 링크(Link)

7. 이미지(Image)

8. 인용문(BlockQuote)

9. 인라인(inline) 코드 강조

10. 블록(block) 코드 강조

11. 표(Table)

12. 원시 HTML(Raw HTML)

13. 수평선(Horizontal Rule)

 

 

1. 제목(Header)

 

제목의 중요도에 따라 '#'의 개수를 조절해 표현할 수 있습니다.

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

 

2. 문장(Paragraph)

 

문장은 그냥 텍스트로 적으면 됩니다. 단, 엔터로 줄바꿈은 작성할 수 없습니다.

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세

 

3. 줄바꿈(Line Breaks)

 

띄어쓰기 두번('  ')이나 '<br/>' 태그를 사용해 줄바꿈을 할 수 있습니다.

동해물과 백두산이 마르고 닳도록  
하느님이 보우하사 우리나라 만세  
무궁화 삼천리 화려 강산<br/>
대한 사람 대한으로 길이 보전하세<br/><br/>

 

4. 강조

 

볼드체, 이텔릭체, 취소선, 밑줄을 표현할 수 있습니다.

_이텔릭_  
**두껍게**  
**_이텔릭 + 두껍게_**  
~~취소선~~  
<u>밑줄</u>

 

5. 목록(List)

 

순서가 있는 목록과 순서가 없는 목록을 표현할 수 있습니다.

하위 목록은 띄어쓰기 네 번('    ')으로 작성해야 합니다.

1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
    1. 순서가 필요한 목록
    1. 순서가 필요한 목록
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록

 

6. 링크(Link)

 

링크는 HTML 태그인 <a> 태그를 사용해 작성할 수 있고, 대괄호와 소괄호를 조합해 작성할 수도 있습니다.

<a href="https://google.com">GOOGLE</a>

[GOOGLE](https://google.com)

<a href="https://naver.com" title="NAVER로 이동">NAVER</a>

[NAVER](https://naver.com "NAVER로 이동")

 

7. 이미지(Image)

 

이미지도 마찬가지로 대괄호와 소괄호를 사용해 작성할 수 있지만, 앞에 느낌표를 붙여주어야 합니다.

또한, 이미지에 링크를 걸 수도 있습니다.

 

## 기본 이미지
![이미지 태그의 alt 부분](이미지 링크 주소)

## 링크가 첨부된 이미지
[![이미지 태그의 alt 부분](이미지 링크 주소)](이미지를 클릭했을 때 이동할 주소)

 

 

8. 인용문(BlockQuote)

 

꺽새 기호('>')를 사용해 인용문을 작성할 수 있습니다.

하위 인용문을 작성하려면, 꺽새 기호를 중첩해서 사용해야 합니다.

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.  
> (네이버 국어 사전)

> 인용문을 작성하세요!
>> 중첩된 인용문
>>> 중중첩된 인용문 1

 

9. 인라인(inline) 코드 강조

 

백틱(`) 기호를 사용해 인라인의 코드를 강조할 수 있습니다.

CSS에서 `background` 혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

 

10. 블록(block) 코드 강조

 

백틱 기호(`)를 세 번과 어떤 코드인지를 명시해서 코드 블럭을 만들 수 있습니다.

```html
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
```

```css
.list > li {
    position: absolute;
    top: 40px;
}
```

```javascript
(()=>{
    console.log('Hello!');
})
```

```bash
$ git commit -m 'Study Markdown'
```

```plaintext
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
```

 

11. 표(Table)

 

Vertical Bar( | )를 사용해 표를 만들 수 있습니다.

: 기호는 표 텍스트의 정렬 기준을 나타냅니다.

position 속성

값 | 의미 | 기본값
--|:--:|--:
static | 기준 없음 | O
relative | 요소 자신 | X
absolute | 위치 상 부모 요소 | X
fixed | 뷰 포트 | X
sticky | 뷰 포트 + 위치 상 부모 요소 | X

 

12. 원시 HTML(Raw HTML)

 

마크다운에서도 HTML 태그를 사용할 수 있습니다.

동해물과 <span style='text-decoration:underline;'>백두산</span>이 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세

<a href="https://google.com" title="GOOGLE로 이동">GOOGLE</a>

<img width="70" src="https://yt3.ggpht.com/ytc/AKedOLQPrYF5QVXRyq5YX8Y5xNwS5DTS-nDgcSL5zVF5Ew=s900-c-k-c0x00ffffff-no-rj">

 

13. 수평선(Horizontal Rule)

 

하이픈 세 번(---)을 사용해 수평선을 만들 수 있습니다.

---