영벨롭 개발 일지

[Markdown]마크다운 사용법 본문

Dev/Git & Markdown

[Markdown]마크다운 사용법

영벨롭 2022. 4. 27. 16:39

[ Markdwon이란 ]

 

 마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어입니다. 

 

 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단합니다. 

 

 확장자는 .md 이며, 주로 README 파일을 작성할 때 사용됩니다. 

 

장점 단점
- 문법이 쉽고 간결하다
- 관리가 쉽다
- 지원 가능한 플랫폼과 프로그램이 다양하다
- 표준이 없다
- 모든 HTML 마크업을 대신하진 못한다.

 

 

 

[ Markdwon 문법 ]

 

  • 제목 Header

 # 기호와 함께 사용하며 개수에 따라 <h1>~<h6> 태그를 표현할 수 있습니다.

 

 # 기호와 제목 사이에 띄어쓰기를 하는 것을 권장합니다. 

 

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

 

 

 

 

  • 문장 Paragraph

 문장을 표기할 때에는 기호 없이 텍스트만 작성합니다. 

 

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

 

 

 

 

 

  • 줄바꿈 Line Breaks

 문장을 표기할 때, 엔터키를 입력하여 작성하여도 실제 문서에서는 줄바꿈이 이루어지지 않습니다. 

 

 줄바꿈을 하기 위해선 줄바꿈을 원하는 문장 뒤에 띄어쓰기를 두 번 입력하거나 <br/> 태그를 삽입합니다.

 

동해물과 백두산이 마르고 닳도록  <!-- 띄어쓰기 두 번-->
하느님이 보우하사 우리나라 만세<br/>
무궁화 삼천리 화려강산

 

 

 

 

  • 강조 Emphasis
_이탤릭_  
**두껍게**  
**_이탤릭 + 두껍게_**  
~~취소선~~  
<u>밑줄</u>

 

 

 

  • 목록 List

 순서가 필요한 목록을 표기할 때에는 1. 내용 과 같이 작성하시면 자동으로 앞 번호가 순서에 맞게 표기됩니다. 

 

 서브 목록을 표기할 때에는 해당 목록 아래에서 들여쓰기를 두 번 한 뒤에 목록을 표기합니다. 

 

 순서가 필요하지 않은 목록을 표기할 때에는 -, *, + 기호 중 하나를 사용하여 표기합니다. 

 

1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
    1. 순서가 필요한 목록(들여쓰기 두 번)
    1. 순서가 필요한 목록
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록에서 사용 가능하 기호
    - 대쉬
    * 별표
    + 더하기

 

 

 

 

 

 

  • 링크 Links

 <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로 이동!")

 

 

 

 

 

 

 

  • 이미지 Images

 ![대체텍스트](이미지 주소)

 

![INSTAGRAM](https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Instagram-Icon.png/800px-Instagram-Icon.png)

이미지를 누르면 주소로 이동

[![INSTAGRAM](https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Instagram-Icon.png/800px-Instagram-Icon.png)](https://instagram.com)

 

 

 

 

 

 

 

  • 인용문 Block Quote

 인용문을 표기할 때에는 > 기호와 함께 표기합니다. 

 

 > 기호의 개수에 따라 중첩된 인용문을 작성할 수 있습니다. 

 

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

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

 

 

 

 

 

  • 인라인 코드 강조

 인라인 코드를 강조할 때에는 벡틱 기호 ` `를 사용하요 표기할 수 있습니다. 

 

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

 

 

 

 

  • 블록 코드 강조

 블록 코드를 강조할 때에는 벡틱 기호를 3번 입력하고 코드 종류도 작성합니다. 

 

 ```코드종류

코드내용

```

 

```html
<a href="https://naver.com" title="NAVER로 이동!" target="_blank">NAVER</a>
```

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

```javascript
function func() {
  var a = 'AAA';
  return a;
}
```

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

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

 

 

 

 

 

 

 

 

  • 표 Table 

 표를 작성할 때는 | 기호를 사용하여 표의 열을 구분합니다. 

 

 이때 표의 헤더부분 밑에 --|--|-- 를 작성하여 표의 헤더와 내용 부분을 구분할 수 있습니다. 

 

 해당 열의 기본 정렬은 왼쪽 정렬이며, 오른쪽 정렬은 --: 로 표기하고, 가운데 정렬은 :-: 로 표기합니다. 

 

position 속성

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

 

 

 

  • 수평선 Horizontal Rule

 수평선을 표기할 때에는 - (마이너스 기호), * (별표), _ (언더슬래쉬) 기호를 3번씩 작성합니다. 

 

---

***

___

 

 

 

 

  • 원시 HTML

 마크다운에서 지원하지 않는 기능을 표기하고 싶을 땐, 원시 HTML을 사용할 수 있습니다. 

반응형