profile HaeRim's Dev Blog HTML, CSS, JS, Vue

Markdown

» dev

마크다운(Markdown)이란?

마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다.
일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML을 잘 모르는 사람도 쉽게 다양한 서식을 추가할 수 있는 문서 편집 문법이다.
확장자는 .md를 사용한다.


마크다운 문법 사용하기


제목(Header)

’#’의 갯수로 ‘h1’~’h6’까지 나타낼 수 있습니다.

작성 ✍️

  #제목  
  ##제목  
  ###제목  
  ####제목  
  #####제목  
  ######제목

결과 🙌

제목

제목

제목

제목

제목
제목

텍스트 강조 / 모양

markdown 에서도 텍스트 강조, 기울기, 취소줄 등 여러가지 텍스트 효과를 줄 수 있다.

작성 ✍

  1. *기울기*  
  2. _기울기_  
  3. **굵은글씨**
  4. __기울기/굵은글씨__
  5. ***기울기/굵은글씨***
  6. ~~취소줄~~

결과 🙌

  1. 기울기
  2. 기울기
  3. 굵은글씨
  4. 기울기/굵은글씨
  5. 기울기/굵은글씨
  6. 취소줄

수평선(hr) 작성

  1. ---
  2. * * *
  3. __ __ __ - or * or _ 등을 3개 이상 입력하면 작성할 수 있다.

작성 ✍

---
***
__ __ __

결과🙌





코드블럭 (Code Block)

  1. 스페이스바 네 번 입력해서 띄우기 (빈칸 네 개 필요)
  2. ` ``` ` 으로 앞뒤 감싸기
  3. ` ~~~ ` 으로 앞뒤 감싸기

작성 ✍

` ` ` 
  code start
` ` `
~ ~ ~ 
  code start
~ ~ ~

결과🙌

    code start
    code start

🤔 더 알아보기

만약 코드의 컬러를 넣어주고 싶다면 어떻게 해야할까?
css, js, c, php … 특정 언어를 명시해 줄 수 없을까?

👉 ` ``` ` 뒤에 언어를 명시해주면 두 가지가 해결 된다!

작성 ✍️

  ` ` `javascript  
    var hello = "안녕!";  
    console.log(hello);  
    ` ` `

결과🙌

    var hello = "안녕!";
    console.log(hello);

❓ 코드블록부분을 black 처리 하고 싶었지만 아직 방법을 모르겠다.
    추후 찾아 볼 예정!


  1. < >url 혹은 이메일 주소 감싸주기
  2. [링크에 사용할 이름](URL)

작성 ✍

<https://haerim95.github.io/>  
[Haerim 개발 블로그](https://haerim95.github.io/)

결과🙌

https://haerim95.github.io/
Haerim 개발 블로그


테이블 (Table)

Markdown에서도 테이블을 만들 수 있다. ||를 사용하여 작성한다. 헤더 테이블 작성 다음 줄에 열에 맞게 |---|를 작성해줘야 한다. 테이블 안에서 ` : (세미콜론) `를 통해 텍스트 정렬도 가능하다.

작성 ✍️

  | 과일 | 과자 |
  |:---:|---:|
  | 사과 | 애플파이|
  | 바나나 | 바나나킥 |
  | 포도 | 마이구미 |
  | 체리 | 체리마루 |

결과 🙌

과일 과자
사과 애플파이
바나나 바나나킥
포도 마이구미
체리 체리마루

![이미지 설명글](Image URL)

작성 ✍️

    ![markdown logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg "마크다운 로고")

결과 🙌

markdown logo


코드강조

markdown 안에 코드강조 을 넣고 싶을 때 사용한다. 코드강조은 현재 보이는 코드강조 글자에 있는 효과이다.

작성 ✍️

  나는 `개발자`가 되고 싶다.

결과 🙌

나는 개발자가 되고 싶다.