[Markdown] 벨로그를 작성해보자

유자·2020년 10월 16일
12

마크업(Markup)과 다크다운(markdown)의 차이는 아래 글에 간단하게 설명해 놓았다.
https://velog.io/@syj9760/신기한-웹개발-세상-HTML


1. 단락 구분


#의 개수로 구분하며 총 6개까지 작성 가능

🔽 마크다운 작성 예시 🔽

# h1 
## h2
### h3
#### h4
##### h5
###### h6

⏬ 화면 표시 예시 ⏬

h1

h2

h3

h4

h5
h6

=, - 로 구분하여 2개까지 작성 가능. 개수 상관 없음

🔽 마크다운 작성 예시 🔽

h1
=======
h2
-------

⏬ 화면 표시 예시 ⏬

h1

h2


-, *, _ 3개 이상 연속 작성해 구분선 삽입

🔽 마크다운 작성 예시 🔽

--- : 대시
*** : 별
___ : 언더바

⏬ 화면 표시 예시 ⏬






엔터키와 같은 기능 <br/>

🔽 마크다운 작성 예시 🔽

1. 이게 br이다
2. 이게 진정한 <br/>이다
3. 이게 진정한 <br/><br/>이다

⏬ 화면 표시 예시 ⏬
1. 이게 br이다
2. 이게 진정한
이다
3. 이게 진정한

이다


간편하게 숫자 목록 만들기

🔽 마크다운 작성 예시 🔽

1. 일이지요
2. 이지요
3. 삼이지요

⏬ 화면 표시 예시 ⏬
1. 일이지요
2. 이지요
3. 삼이지요


-, *, + 로 숫자없는 목록 만들기

🔽 마크다운 작성 예시 🔽
1. -또는*또는+을 적고 만들 목록의 내용을 적는다.
2. 엔터키를 눌러 다음 줄로 내려온 후에 스페이스바로 2번 띄워준다.
3. 다시 -또는*또는+을 적고 만들 목록의 내용을 적는다.
4. 스페이스바로 2번 띄우지 않고 위와 맞춰서 -또는*또는+을 적으면 같은 단계로 작성된다.

- 이렇게
  - 만들어
    - 봅시다
      - 정말
        - 재밌지요?

- 이렇게
  - 만들어
    - 봅시다
    - 정말
    - 재밌지요?

⏬ 화면 표시 예시 ⏬

  • 이렇게
    • 만들어
      • 봅시다
        • 정말
          • 재밌지요?

  • 이렇게
    • 만들어
      • 봅시다
      • 정말
      • 재밌지요?

2. 블럭 생성


백틱(`)으로 코드블럭 생성

🔽 마크다운 작성 예시 🔽
백틱 3개씩 시작할 때, 끝날 때 적어줍니다.

⏬ 화면 표시 예시 ⏬

위 아래로

백틱(`)으로 특정 언어의 코드블럭 생성

🔽 마크다운 작성 예시 🔽
시작할 때 적은 백틱 3개 옆에 사용하는 언어를 적어줍니다.
끝날 때 백틱 3개를 다시 적어줍니다.

```javascript
let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
``` 

⏬ 화면 표시 예시 ⏬

let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);

백틱(`)으로 인라인 코드 생성

🔽 마크다운 작성 예시 🔽
시작할 때 백틱 1개, 끝날 때 백틱 1개 작성

⏬ 화면 표시 예시 ⏬
인라인


'>' 로 인용문 생성

🔽 마크다운 작성 예시 🔽
'>'의 개수에 따라 중첩 가능

> no one left behind
>> someone

⏬ 화면 표시 예시 ⏬

no one left behind

-someone


3. 링크, 이미지 삽입


'[]' 로 인라인 링크 삽입

🔽 마크다운 작성 예시 🔽

인라인 링크
[인라인](https://velog.io/@syj9760)

⏬ 화면 표시 예시 ⏬
인라인 링크
인라인


'<>' 로 url 링크 삽입

🔽 마크다운 작성 예시 🔽

url 링크
<https://velog.io/@syj9760>

⏬ 화면 표시 예시 ⏬
url 링크
https://velog.io/@syj9760


이미지 삽입 (10MB 이하)

🔽 마크다운 작성 예시 🔽

1.
![이미지 설명](이미지 링크)
![greenapple](https://www.cignew.net/media/wysiwyg/E-LIQUID/MAGICCLOUD/green-apple-WEB.jpg)

2.
![파일명.확장자](이미지경로/파일명.확장자) -> 예시 없음

⏬ 화면 표시 예시 ⏬

![이미지 설명](이미지 링크)

삽입된 이미지에 링크 삽입 (10MB 이하)

🔽 마크다운 작성 예시 🔽

[![이미지 설명](이미지 링크)](url 링크 "링크 이름")
[![greenapple](https://www.cignew.net/media/wysiwyg/E-LIQUID/MAGICCLOUD/green-apple-WEB.jpg)](https://velog.io/@syj9760 "내 블로그")

⏬ 화면 표시 예시 ⏬

[![이미지 설명](이미지 링크)](url 링크 "링크 이름")


'|' 로 표 삽입

🔽 마크다운 작성 예시 🔽
1. '|'로 열 구분
2. 글자 강조 가능

이젠|내가 쓴거|봐야지
---|---|---
벨로그|마크다운|__정복__
별거|없구만|~~ㅎㅎ~~

⏬ 화면 표시 예시 ⏬

이젠내가 쓴거봐야지
벨로그마크다운정복
별거없구만ㅎㅎ

'- [ ]' 로 체크박스 삽입

🔽 마크다운 작성 예시 🔽
1. 대괄호 안에 띄워쓰기 해줘야함
2. 게시글에서 체크박스 체크 가능

- [ ] 양치하기
- [ ] 세수하기

⏬ 화면 표시 예시 ⏬

  • 양치하기
  • 세수하기

4. 글자 강조


굵게, 기울이기, 취소선

🔽 마크다운 작성 예시 🔽

_기울여쓰기_
*기울여쓰기*

__굵게 쓰기__
**굵게 쓰기**

___굵게 기울여쓰기___
***굵게 기울여쓰기***

~~취소선~~

⏬ 화면 표시 예시 ⏬
기울여쓰기
기울여쓰기

굵게 쓰기
굵게 쓰기

굵게 기울여쓰기
굵게 기울여쓰기

취소선


참고

profile
No one left behind

1개의 댓글

comment-user-thumbnail
2023년 1월 11일

압도적 감사!

답글 달기