마크다운 문법(Markdown Syntax) 정리

hana jeong·2022년 11월 6일
0

GitHub에서 ReadMe.md에 내용을 정리하다가 마크다운에 대해 알게 되었다

MarkDown은 무엇인가?

마크다운은 일반 텍스트 문서에 서식 요소를 추가하는 데 사용할 수 있는 경량 마크업 언어입니다. 2004년 John Gruber에 의해 만들어진 Markdown은 현재 세계에서 가장 인기 있는 마크업 언어 중 하나라고 합니다.(출처 : markdownguide

MarkDown의 장점

  • 많은 플랫폼에서 지원한다
  • 사용법이 단순해서 작성하기 쉽다
  • html로 변환되지만 태그 또는 서식으로 표시된 것처럼 보이지 않아서 그 자체만으로도 읽기 쉽다

MarkDown 기본 문법

  • 제목

    	# H1
    	## H2
    	### H3
    	#### H4
    	##### H5
    	###### H6

H1

H2

H3

H4

H5
H6

H1과 H2까지는 제목 아래 밑줄이 생김

  • 가로줄 넣기

    	  ---
      ***
      - - - - 
      * * *
      




  • 순서가 있는 목록

    번호를 붙여서 나타내며 엔터를 눌러 줄을 바꿈. 숫자와 내용 사이는 띄어쓰기 필수. 순서를 멋대로 작성해도 순서대로 나타남.

    1. 마포구 맛집
     3. 서대문구 맛집
     4. 중구 맛집
     2.	강남구 맛집
     5. 영등포 맛집
  1. 마포구 맛집
  2. 서대문구 맛집
  3. 중구 맛집
  4. 강남구 맛집
  5. 영등포 맛집
  • 순서가 없는 목록

    	- 마포구 맛집
    	* 서대문구 맛집
    	+ 중구 맛집

    +나 -, * 기호를 쓰며 섞어써도 같은 결과를 내기 때문에 원하는 걸 쓰면 됨

  • 마포구 맛집
  • 서대문구 맛집
  • 중구 맛집
- 마포구 맛집
	* 코끼리 분식  
	+ 오군 돈까스 

* 서대문 맛집
	+ 형제갈비
	- 타코몽

+  중구 맛집
	- 명화당
	* 쯔루하시 후게츠
  • 마포구 맛집

    • 코끼리 분식
    • 오군 돈까스
  • 서대문 맛집
    • 형제갈비
    • 타코몽
  • 중구 맛집
    • 명화당
    • 쯔루하시 후게츠
  • 텍스트 꾸미기

    	글씨 진하게 : 굵게 나타내고 싶은 텍스트 앞뒤로 **, __로 감싸기
    	기울임체:  * 또는 _로 감싸기	
    	굵은 기울임체 : *** 혹은 ___로 감싸기
    	밑줄 : <u>밑줄</u> 
    	취소선 : ~~취소~~     

글씨 진하게
기울임체
굵은 기울임체
밑줄
취소

  • 소스코드

    	1줄 짜리 소스코드를 넣고 싶다면 `다음과 같이 사용`

1줄 짜리 소스코드를 넣고 싶다면 다음과 같이 사용

여러 줄의 소스코드를 넣고 싶다면 
```$(document).ready(()=>{
    pageLoading()
  })

  function pageLoading() {
    $.ajax({
      type: "GET",
      url: "/hana/get",
      data: {},
      success: function (response) {
        let rows = response.comments;
        rows.forEach(function (val, idx) {
          const {name, text} = val
          let temp_html = `<div class="card mb-3">
                              <div class="card-body comments">
                                <h5 class="card-title">${name}</h5>
                                <p class="card-text">${text}</p>
                              </div>
                            </div>`
          $('#comment-list').append(temp_html)```
$(document).ready(()=>{
        pageLoading()
      })

      function pageLoading() {
        $.ajax({
          type: "GET",
          url: "/hana/get",
          data: {},
          success: function (response) {
            let rows = response.comments;
            rows.forEach(function (val, idx) {
              const {name, text} = val
              let temp_html = `<div class="card mb-3">
                                  <div class="card-body comments">
                                    <h5 class="card-title">${name}</h5>
                                    <p class="card-text">${text}</p>
                                  </div>
                                </div>`
              $('#comment-list').append(temp_html)
      
  • 링크

    	<주소>
    	[텍스트](주소)
    	[텍스트](주소, "부가설명")
    
    	<https://www.google.com/>
    	[google](https://www.google.com/)
    	[google](https://www.google.com/, "google")

https://www.google.com/
google
google

  • 인용구 (중복사용 가능)

    	> 구글 검색  
    	>> 구글 속 페이지
    	>>> 구글 속에 속에 페이지

구글 검색

구글 속 페이지

구글 속에 속에 페이지

  • 표 그리기

    	|수학    |    과학|   영어  |
    	|---|---|---|    
    	|70|80|90|
    
    
    	|수학    |    과학|   영어  |
    	|:---|:---:|---:|
    	|70|80|90|
수학과학영어
708090

수학과학영어
708090

첫 번째 예시는 두번째 열에 ---를 넣으면 헤더를 표시할 수 있다는 뜻임
두 번째 예시는 콜론(:)의 위치에 따라 왼쪽, 오른쪽, 중앙 정렬을 할 수 있다는 뜻임

profile
https://developer-hh.tistory.com 로 옮깁니다

0개의 댓글