본문 바로가기
CS

마크다운(Markdown)이란? 마크다운 사용법 알아보기

by 장장 2020. 8. 24.

먼저, 마크다운을 알아보기 전에!

≫ 마크업(MarkUp) 언어란?

"마크(태그)"로 둘러싸인 언어

HTML, XML 등의 마크업 언어들은 문서의 구조를 정의합니다.

 

 

※ 마크다운(Markdown)?

일반 텍스트 기반의 마크업 언어

마크업 언어의 일종으로, README.md 파일이나 온라인 문서 혹은 텍스트 편집기로 문서 양식을 편집할 때 쉽게 쓰고 읽을 수 있으며, HTML로 변환이 가능한 언어이다.

 

단, 간단하기에 모든 HTML을 지원하지는 않는다고 한다.

예) SNS 태그 기능, 위키 백과 편집 기능

 

 


 

※ 마크다운 문법 뽀개기

 

▶ 마크다운 태그 종류

  • 제목 : #, ====
  • 인용 : >
  • 강조 : *, _
  • 링크 : [텍스트](주소 "설명")
  • 이미지 : ![텍스트](이미지 주소 "설명")
  • 리스트 : 1, *, -, +
  • 코드 표시 : 코드, 한 줄 띄우고 스페이스 4칸, ````코드````
  • 개행 : 엔터 2번, 강제 줄바꿈은 문장 끝에 스페이스바 2번
  • 가로선 : -----, *****, +++++

 

제목 : #, ===, ---

 

# : HTML의 <h1>

## : HTML의 <h2>

### : HTML의 <h3>

#### : HTML의 <h4>

##### : HTML의 <h5>

###### : HTML의 <h6>


제목입니다
===
소제목입니다
---

 

 

 

 

▶ 인용구문 : >

HTML의 <blockquote>

 

> 인용 구문1

>> 인용 인용

>>> 인용

>> 인용

> 인용

 

 

 

▶ 굵은 글씨, 기울여 쓰기 : *, _

HTML의 <bold>와 <i>

 

안녕

*안녕*

**안녕**

***안녕***

 

 

위를 _로 대체해도 아래와 모두 같은 결과

 

 

 

▶ 링크, 이미지

HTML의 <a href="  " alt="  ">링크</a> 

 

[Jang's Blog 바로가기](https://jangjang13.tistory.com/ "장장의 블로그 (생략 가능함)") 링크

[Jang's Blog 바로가기][1] 링크

[장장의 블로그 보러가기][jang] 링크


[1]: https://jangjang13.tistory.com/ "장장의 블로그"

[jang]: https://jangjang13.tistory.com/ "장장의 블로그로 갑시다"

 

 

Jang's Blog 바로가기 링크

 

Jang's Blog 바로가기 링크

 

장장의 블로그 보러가기 링크

 

 

 

HTML의 <img src="  ">태그

 

![고양이1](https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/4arX/image/ThmomYfV2fLl1k3iXCe__ZywsAk.jpg "고양이")
![고양이2][imgSrc]


[imgSrc]: https://lh3.googleusercontent.com/proxy/fMYaiDFj3po0IOYD_dAD8PhHIjrJHAE3DYwSN1v8TJppY061i1aQWnxnbUVJBHFTzzosfLMPohgFN8Z90kMb9hJFGhWcUY_9SSXhMeUUWRqZtZYW1F1CKsfJJZLU7zM8GMh6wIMn3JEMxFw

 

 

고양이1고양이2

 

 

 

 

▶ 리스트

HTML의 <ol><li> 태그, <ul><li> 태그

 

- 안녕하세요

- 반가워요

- 잘있어요

- 다시만나요


1. 안녕하세요

 - 반가워요
 
* 잘있어요

 + 다시 만나요

 

  • 안녕하세요
  • 반가워요
  • 잘있어요
  • 다시만나요

 

  1. 안녕하세요
    • 반가워요
  • 잘있어요
    • 다시 만나요

 

 

 

▶ 코드 표시 

 

스페이스 바 4번 혹은 ````코드```` 형태로 표현

 

```javascript 

function test() { 

 console.log("hello world!"); 
 
} 

```

 

 

 

 

▶ 수평선, 가로선

HTML의 <hr> 태그

 

---
***
+++

 

 

 

▶ 테이블

 

헤더1 | 헤더2 

------------ | ------------- 

내용1 | 내용2 

내용1-1 | 내용2-1



헤더1 | 헤더2 | 헤더3

:------------ | :-------------: | -------------:

왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬

 

 

▶ 체크박스

 

### 오늘의 할일

- [x] 마크다운 뽀개기

- [ ] 노래 듣기

- [x] 영화 보기

 

 

 

 

▶ 인라인 코드

글 중간에 `코드` 삽입하기

Java의 기본 입출력은 `System.out.println("출력");` 이다.

 

 

 

▶ EMOJI

 

:+1:
:-1:
:first_quarter_moon:
:sparkles: 
:basketball_woman:
:rocket: 
:clinking_glasses:
:octopus:

 

 

 

 

▶ 각주 달기

 

Jang's Blog는 장장이 운영하고 있다. [^장장]

[^장장]:장장은 Jang's Blog의 운영자이자 개발자이다.

 

 

 

 

댓글