젊은 날의 치매를 위한 벨로그 마크다운 작성법

HongDuHyeon·2021년 11월 1일
1
post-thumbnail
post-custom-banner

✅ 마크다운이란?

마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법이다. README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능하다.
-위키백과

📖 마크다운 작성법

1. 제목

h1부터 h6까지 표현이 가능하며, #의 개수로 컨트롤이 가능하다.

✍ 작성

# h1

##h2

### h3

#### h4

##### h5

###### h6

💻 결과

h1

h2

h3

h4

h5
h6
어디서 많이 본 태그 같은데...

2. 문단 간격

문단 간격은 <br/>로 나타내며, 여러번 바꿀시엔 <br/> 태그를 더 써주면 된다.

✍ 작성

첫번째 문단 <br/><br/>
두번째 문단

💻 결과

첫번째 문단


두번째 문단

3. 인용 (Blockquotes)

본문 안에 > 로 표기하면 된다.

✍ 작성

> # 1단
인용문 첫 번째 줄
인용문 두 번째 줄
인용문 세 번째 줄
>> ## 2단
중복해서 사용하면
>>> ### 3단
중첩 인용문을 표현할 수 있다
>>>> #### 4단
계속 중첩을 할수있고 인용문 안에는 제목 수준을 보여줄 수도 있다.

💻 결과

1단

인용문 첫 번째 줄
인용문 두 번째 줄
인용문 세 번째 줄

2단

중복해서 사용하면

3단

중첩 인용문을 표현할 수 있다

4단

계속 중첩을 할수있고 인용문 안에는 제목 수준을 보여줄 수도 있다.

3. 리스트

순서가 있는 숫자 리스트와 순서가 없는 리스트 두가지 다 작성할 수 있다.

✍ 작성

* 별 모양도 그렇고
- 마이너스도 그렇고
+ 플러스도 똑같이 나온다

💻 결과

  • 별 모양도 그렇고
  • 마이너스도 그렇고
  • 플러스도 똑같이 나온다

(*,+,-) 를 이용해서 순서가 없는 리스트를 작성해보았다.

이어지는 문단 안에선 스페이스바만 눌러줘도 된다.

(엔터만 눌러줘도 줄바꿈 되면서 되는듯하다)

✍ 작성

- 첫번째 리스트

  첫번쨰 리스트 하위 문단
  
- 두번째 리스트

  두번쨰 리스트 하위 문단

💻 결과

  • 첫번째 리스트
    첫번쨰 리스트 하위 문단
  • 두번째 리스트
    두번쨰 리스트 하위 문단

숫자 리스트는 숫자 + 마침표를 이용하면 된다.

참고: 숫자 리스트는 순서가 맞지 않아도 자동으로 순서가 맞춰진다.

✍ 작성

1. 숫자가 있는
2. 리스트는
3. 앞에 숫자 + 마침표(.)을 붙혀주면
4. 된다.

💻 결과
1. 숫자가 있는
2. 리스트는
3. 앞에 숫자 + 마침표(.)을 붙혀주면
4. 된다.


4. 코드블럭

3개의 백틱 옆에 본인이 쓰고자 하는 언어를 작성하고 시작하면 된다.

사실 난 이게 제일 중요하다

✍ 마크다운 작성


```javascript
var mainVisual = $(".main_visual > .slide").owlCarousel({
    animateOut : 'fadeOut',
    animateIn : 'fadeIn',
    items : 1,
    loop : true,
    margin : 0,
    autoplay : true,
    autoplayTimeout : 5000,
    autoplaySpeed : 2000,
    nav : true,
    dots : false
});
```

💻 결과

var mainVisual = $(".main_visual > .slide").owlCarousel({
    animateOut : 'fadeOut',
    animateIn : 'fadeIn',
    items : 1,
    loop : true,
    margin : 0,
    autoplay : true,
    autoplayTimeout : 5000,
    autoplaySpeed : 2000,
    nav : true,
    dots : false
});

5. 강조하기

기울여 쓰기, 굵게 쓰기, 밑줄 쓰기, 취소선

✍ 작성

*기울여 쓰기*
_기울여쓰기_
**굵게 쓰기**
__굵게 쓰기__
~~취소선~~

💻 결과

기울여 쓰기
기울여쓰기
굵게 쓰기
굵게 쓰기
취소선

6. 링크

6-1. 인라인 링크

[링크](https://예시.com "링크 제목") 인라인 링크

✍ 작성

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

💻 결과

Google

6-2. URL 링크

<예시.com/> <예시@예시.com> url 링크

✍ 작성

<https://www.google.com/>
<abc1@gmail.com/>

💻 결과

https://www.google.com/
abc1@gmail.com/

7. 이미지

7-1. 이미지 삽입

✍ 작성

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

![vue image](https://vuejs.org/images/logo.png)

💻 결과

vue image

7-2. 이미지 링크 이동

마크다운 이미지 코드를 링크 코드로 묶어준다.
[![설명](이미지 링크)](https://예시.com "링크 설명")

✍ 작성

[![vue image](https://vuejs.org/images/logo.png)](https://kr.vuejs.org/ "vue 이미지")

💻 결과

vue image

이렇게 간소하게 나마 마크다운을 정리해보았는데....
해보았는데.....

네. 해보았습니다.

계속 업로드 중... 아마 그럴겁니다.
profile
마음이 시키는 프론트엔드.. RN과 IOS를 곁들인..
post-custom-banner

2개의 댓글

comment-user-thumbnail
2022년 1월 27일

최고최고

1개의 답글