마크다운 간단 사용 방법

hyun0310woo·2021년 1월 20일
0

Markdown

목록 보기
1/1
post-thumbnail

티스토리를 사용하다가 불편한 점이 너무 많아서 마크다운도 익숙해질겸 벨로그로 갈아탈 생각입니다.
이전 정리 글을 다시 살펴보면서 공부도 할겸..


1. 제목(Header)

텍스트 바로 밑에 ===, ---를 붙혀서 사용하기도 한다는데 #으로 사용하는게 개인적으로 더 좋습니다.
#1~6 개수에 반비례해서 텍스트 크기를 설정할 수 있습니다.

1개

2개

3개

4개

5개
6개

2.인용구(BlockQuote)

인용은 자주 사용할듯 합니다. >를 사용해서 티스토리보다 더 편하게 사용할 수 있습니다.

인용안에 인용도 가능한거 같습니다.

>>꺽쇠를 늘려나가는 식으로 사용하는것 같습니다.


3.폰트 스타일(font-style)

사용할 법한 폰트 스타일만 정리합니다.

3-1. blod

** 혹은 __ 을 이용해서 텍스트를 감싸주면 됩니다.
강조를 사용했습니다.

3-2. 기울기

* 혹은 _을 사용해서 감싸주면 됩니다.
강조를 사용했습니다.

3-3. 취소선

~~을 사용해서 감싸주면 됩니다.
~~강조~~를 사용했습니다.

3-4. 밑줄

<u>태그를 사용하여 감싸주면 됩니다.
강조를 사용했습니다.

한글을 사용할 때는 글과 줄이 겹치기 때문에 사용하지 않을것 같습니다.


4.목록(List)

<ul> 태그처럼 순서가 없는 목록입니다.

*, +, -를 사용하여 만듭니다.

  • 목록
    • 목록
      • 목록

<ol> 태그처럼 순서가 있는 목록입니다.
숫자와 상관없이 1.를 앞에 붙혀 사용합니다.
1. 2.는 상관없이 자동으로 숫자가 생성되니 1.등으로 통일하여도 됩니다.

  1. 목록1
  1. 목록 1-1
  2. 목록 1-2
  3. 목록2
  4. 목록3

5. 코드(Code)

티스토리에서 블로그를 하셨던 분들이 벨로그로 넘어오는 가장 큰 이유 중 하나 일겁니다.
`` 혹은 ~~~ `로 감싸서 console.log("Code") 처럼 사용할 수 있지만 코드 전체를 사용하고자 한다면

```javascript
const yourBlog = (blog) => {
  let result;
  
  blog === "Velog" ? result = true : result = false;
  
  return result;
}
```
const yourBlog = (blog) => {
  let result;
  
  blog === "Velog" ? result = true : result = false;
  
  return result;
};

위와 같이 코드를 감싸주면 됩니다.
첫 번째줄 옆에 언어를 지정해서 syntax color를 지정해줄 수 있습니다.


6. 수평선(Horizon)

<hr>태그의 수평선 입니다.

* **, - --등으로 사용할 수 있습니다.



7. 이미지(Img)


<img>태그 입니다.

![Alt](파일경로)
![Alt](Img_URL)
![Alt](파일경로 "title")
Alt는 파일명 확장자로 쓰이며 이미지가 깨질 때 이미지를 텍스트로 설명할 수 있습니다.

Velog는 이미지를 드래그, 드롭으로 가져올 수 있습니다.


8. 링크(Link)

<link>태그 사용 방법입니다.

Link to Google = [Link to Google](https://www.google.com "구글")
[링크이름](url "링크설명")
{:target="_blank"} 새창을 원하면 (url) 뒤에 추가합니다.


9. 테이블(Table)

테이블은 |로 구분할 수 있고 폰트의 스타일도 지정이 가능합니다.
--- 하이픈으로 구분된 곳의 각 좌우, 양쪽에 :을 추가해주면 정렬이 가능합니다.

| | 제목1 | 제목2 |
|:--------:|:-----:| :---------:|
| blod | 정렬 | 밑줄 |
| font | 정렬 | |
| ~~font~~ | 정렬 | |


10. 체크박스(Check Box)

-, *, + 뒤에 띄어쓰기 후 []를 넣어 작성할 수 있습니다.
[ ]는 빈 체크박스, [x]는 체크된 체크박스입니다.

  • [ ] 빈 체크박스
  • [x] 체크된 체크박스


profile
자바스크립트를 좋아합니다. | 이유를 알고 있는 것과 모르는 것의 차이는 분명하다.

0개의 댓글