마크다운 정리하기

Minhee·2021년 9월 20일

우리는 코딩을 하며 여러 언어를 배운다.
여기 개발을 하는 데 직접적으로 쓰이지는 않으나 알아두면 효녀가 되는 언어가 있다.
바로 제목에서 스포했던 대로 마크다운 언어이다.
앞으로 velog에 포스팅을 종종 할 예정이니 문법을 한번 정리하는 시간을 가져보겠다.

🤔 마크다운이 뭔데?

마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다.
HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일 (.md 파일) 이나 온라인 게시물 등에 많이 사용된다.

🙄 마크다운, 뭐가 좋아?

쉽다

문법이 정말 간단하다.
배우는 데 30분 정도면 충분할 것 같다.

범용성이 높다

나는 마크다운을 아래의 경우에 사용한다.

github에서 프로젝트를 보기 편하게 문서 작성할 때

notion에 정리해둘 글이 있을 때

velog에 포스팅할 때

회사 위키에 검토한 내용을 정리할 때

요즘 이 마크다운 문법을 지원하는 아주 똑똑한 프로그램, 에디터들이 많기 때문에 배워두면 이렇게 여러 플랫폼에서 뽕 뽑을 수 있다.
에디터마다 문법이 정확히 맞아 떨어지지는 않아도, 결이 비슷하기 때문에 쉽게 에디터에 적용할 수 있다.

간편하다

또 마크다운 문법만 알아두면 글 작성할 때 일일이 내용을 블록해서 굵게나 기울이기 버튼을 찾아 클릭하고..💦💦
이런 번거로운 작업을 할 필요 없다.
그냥 키보드 입력만으로 제목, 인용, 넘버링 등등의 효과를 바로바로 적용시킬 수 있어 육체적으로도(?), 시간적으로도 여러모로 알아두면 이득이다.

📜 마크다운 문법

(위) 문법
(아래) 출력되는 내용

헤더

# 제목 1 `<h1>`
## 제목 2 `<h2>`
### 제목 3 `<h3>`
#### 제목 4 `<h4>`
##### 제목 5 `<h5>`
###### 제목 6 `<h6>`

제목 1 `<h1>`

제목 2 `<h2>`

제목 3 `<h3>`

제목 4 `<h4>`

제목 5 `<h5>`

제목 6 `<h6>`

강조

`<em>` 기울이기는 *asterisks*나 _underscore_ 한 번
`<strong>` 굵게는 **asterisks**나 __underscore__ 두 번
`<del>` 취소선은 ~~tilde~~ 두 번
`<u>`밑줄</u>은 `<u></u>` 태그로 감싸기

<em> 기울이기는 asterisks나 underscore 한 번
<strong> 굵게는 asterisks나 underscore 두 번
<del> 취소선은 ~~tilde~~ 두 번
밑줄은 <u></u> 태그로 감싸기

인용

<blockquote> 인용

> 혼자 생활하며 부끄러워 마라.
사람들은 혼자 열심히 하는 사람을 멋있게 생각하지 절대 손가락질하지 않는다.
> *(행정법 전효진 강사)*

혼자 생활하며 부끄러워 마라.
사람들은 혼자 열심히 하는 사람을 멋있게 생각하지 절대 손가락질하지 않는다.
(행정법 전효진 강사)

아래처럼 중복된 인용문도 가능하다.

> 사회탐구 이지영 강사
>> 다시 도전하면 됩니다.
>>> 어떤 실패도 치명적이지 않습니다.
>>> 어떤 패배도 영원하지 않습니다.
>>> 어떤 잘못도 내 인생을 통째로 부정하지는 못합니다.

사회탐구 이지영 강사

다시 도전하면 됩니다.

어떤 실패도 치명적이지 않습니다.
어떤 패배도 영원하지 않습니다.
어떤 잘못도 내 인생을 통째로 부정하지는 못합니다.

- unordered list `<ul>`
    - unordered list `<ul>`
        - unordered list `<ul>`
    - unordered list `<ul>`
1. ordered list `<ol>`
1. ordered list `<ol>`
   - unordered list `<ul>`
   + unordered list `<ul>`
   * unordered list `<ul>`
1. ordered list `<ol>`
   1. ordered list `<ol>`
   1. ordered list `<ol>`
1. ordered list `<ol>`

unordered list <ul>
- unordered list <ul>
  - unordered list <ul>
- unordered list <ul>

ordered list <ol>
ordered list <ol>
- unordered list <ul>
- unordered list <ul>
- unordered list <ul>
ordered list <ol>
1. ordered list <ol>
2. ordered list <ol>
ordered list <ol>

하이퍼링크

구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>

[구글](https://google.com)

[네이버](https://naver.com "링크에 대한 설명을 작성할 수 있다.")

[상대적 참조](../subpage/page1)

[유튜브][youtube link]

[깃허브][0]

문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.

[youtube link]: https://www.youtube.com
[0]: https://github.com
[참조 링크]: https://www.facebook.com "페이스북으로 순간이동!"

구글 홈페이지: https://google.com
네이버 홈페이지: https://naver.com

문서 안에서 참조 링크를 만들어두고 그대로 사용할 수도 있다.

이미지

![](https://images.unsplash.com/photo-1534193818851-7b2485fe4047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGFscHN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60 "언젠간 가고 말거야 스위스")

![happy][link]

[link]: https://images.unsplash.com/photo-1591035897819-f4bdf739f446?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGhhcHB5fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60 "웃어. 웃으라구!!"

happy

이미지 클릭 시 하이퍼링크 효과를 줄 수도 있다.

[![Nike](https://simg.nicepng.com/png/small/927-9275067_nike-nike-black-logo-transparent.png)](https://www.nike.com/kr/ko_kr)

코드

인라인(inline) 코드 강조

`a 변수`혹은 `b 변수` 가 어떠한 영향을 미친다.

a 변수 혹은 b 변수 가 어떠한 영향을 미친다.

블록(block) 코드 강조

```html
< a href="https://store.musinsa.com/app/" target="_blank">무신사< /a>
```

<a href="https://store.musinsa.com/app/" target="_blank">무신사</a>

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

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

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

function func() {
  var a = 'just a var';
  return a;
}

```
No language indicated, so no syntax highlighting.
```

No language indicated, so no syntax highlighting.

표

 크루 | 리더 | 세컨드 | 서브 | 어시스트
---|:---|---:|:---:|---
| Cocainbutter | 리헤이 | 제트썬 | 가가, 질린 | 비키 |
| Holybang | *허니제이* | 제인 | 로아, 타로 | 헤르츠 |
| Hook | 아이키 | 뤠이젼 | 예본, 효우 | 선윤경 |
| Lachica | 가비 | **리안** | 에이치원, 피넛 | 시미즈 |
 Prowdmon | 모니카 | 립제이 | 케이데이, 함지 | **헤일리**
 Want | 효진초이 | 로잘린 | **모아나, 엠마** | *이채연*
 WayB | **노제** | *리수* | 돌라, 안쏘 | 규리안
 YGX | 리정 | 예리 | *여진, 지효* | 이삭

크루	리더	세컨드	서브	어시스트
Cocainbutter	리헤이	제트썬	가가, 질린	비키
Holybang	허니제이	제인	로아, 타로	헤르츠
Hook	아이키	뤠이젼	예본, 효우	선윤경
Lachica	가비	리안	에이치원, 피넛	시미즈
Prowdmon	모니카	립제이	케이데이, 함지	헤일리
Want	효진초이	로잘린	모아나, 엠마	이채연
WayB	노제	리수	돌라, 안쏘	규리안
YGX	리정	예리	여진, 지효	이삭

수평선

--- (minus)
___ (underscore)
*** (asterisks)

Minhee

다음 포스트

마크다운 정리하기

🤔 마크다운이 뭔데?

🙄 마크다운, 뭐가 좋아?

쉽다

범용성이 높다

간편하다

📜 마크다운 문법

헤더

제목 1 `<h1>`

제목 2 `<h2>`

제목 3 `<h3>`

제목 4 `<h4>`

제목 5 `<h5>`

제목 6 `<h6>`

강조

인용

목록

하이퍼링크

이미지

코드

인라인(inline) 코드 강조

블록(block) 코드 강조

표

수평선

AGC 과제 - 2

0개의 댓글

관련 채용 정보

마크다운 정리하기

🤔 마크다운이 뭔데?

🙄 마크다운, 뭐가 좋아?

쉽다

범용성이 높다

간편하다

📜 마크다운 문법

헤더

제목 1 <h1>

제목 2 <h2>

제목 3 <h3>

제목 4 <h4>

제목 5 <h5>

제목 6 <h6>

강조

인용

목록

하이퍼링크

이미지

코드

인라인(inline) 코드 강조

블록(block) 코드 강조

표

수평선

AGC 과제 - 2

0개의 댓글

관련 채용 정보

제목 1 `<h1>`

제목 2 `<h2>`

제목 3 `<h3>`

제목 4 `<h4>`

제목 5 `<h5>`

제목 6 `<h6>`