Markdown 정리

양재혁(Jaehyuk-Yang)·2023년 7월 15일
0

Markdown 언어의 장단점

  • 장점

    • 문법이 쉽고 간결

    • 관리가 쉬움

    • 지원 가능한 플랫폼과 프로그램이 다양

  • 단점

    • 표준이 없음

    • 모든 HTML 마크업을 대신 못함


제목(Header)

제목1

제목2

제목3

제목4

제목5
제목6
  • #의 개수가 많아질수록 작아짐 (제목의 중요도가 낮아짐)

  • #이 1개면 h1 태그와 동일


문장(paragraph)

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세

줄바꿈(Line Breaks)

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세

  • 특별한 기호 없이 문장 삽입 -> p태그와 동일

  • 줄바꿈

    • 끝에서 띄어쓰기 2번
    • br태그 삽입

강조(Emphasis)

이텔릭

두껍게
이텔릭 + 두껍게
취소선
밑줄

  • 글자 기울이기

    • 기울이고 싶은 글자 앞 뒤로 '_' 삽입
  • 글자 두껍게

    • 두껍게 하고 싶은 글자 앞 뒤로 '**' 삽입
  • 글자 기울이기 + 글자 두껍게

    • 기울이고 두겁게 하고 싶은 글자 앞에 '**_' 삽입
    • 글자 뒤에 '_**' 삽입
  • 글자 취소선

    • 취소하고 싶은 글자 앞 뒤로 '~~' 삽입
  • 글자 밑줄

    • 밑줄 치고 싶은 글자 앞 뒤로 u태그 삽입

목록(List)

  1. 숫자가 필요한 목록
  2. 숫자가 필요한 목록
  3. 숫자가 필요한 목록
    1. 숫자가 필요한 목록
    2. 숫자가 필요한 목록
  4. 숫자가 필요한 목록
  • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록
    • 순서가 필요하지 않은 목록
    • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록
  • 목록 앞에 숫자. 을 하면 ordered list형태로 나옴

  • ordered list 시, 1. 1. 1.로 작성하여도 순서대로 나옴

  • 중간에 있는 목록을 지우더라도 순서는 자동으로 계산

  • 들여쓰기 2번 시, sub 목록으로 전환


링크(Links)

Google

Google

Naver

Naver

Naver

  • a태그 내부에 title 작성 시 링크에 커서를 가져다 놓으면 커서에 title에 작성한 값 나옴

  • target="_blank" 시 새 창에 링크 페이지 열림


이미지(Images)

HEROPY

HEROPY

  • 이미지와 링크의 차이

    • 서두에 ! 존재 여부

인용문(BlockQuote)

남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어 사전)

인용문을 작성하세요!

중첩된 인용문 1

중중첩된 인용문 1
중중첩된 인용문 2
중중첩된 인용문 3

  • 인용문 사용 시 '>' 기호 사용

  • '>' 기호 개수를 늘리면 중첩된 인용문으로 사용


인라인(inline) 코드 강조

CSS에서 background 혹은 background-image 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

  • 인라인 코드 강조 시, 강조하고 싶은 글자 앞 뒤로 ` 기호 사용

블록(block) 코드 강조

<a href="https://www.google.co.kr/" target="_blank">Google</a>
.list > li {
  position: absolute;
  top: 40px;
}
function func(){
  var a = 'AAA';
  return a;
}
$ git commit -m 'Study Markdown'
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
  • 블록 코드 강조 시 ```(언어명) 로 시작

  • 내부에 코드 내용 작성

  • 마무리 시, ``` 작성


표(Table)

position 속성

의미기본값
static기준 없음O
relative요소 자신X
absolute위치 상 부모 요소X
fixed뷰포트X
  • --|--|-- 를 기준으로 위는 표의 머리, 아래는 표의 몸통으로 구분

  • 처음 표의 내용은 왼쪽 정렬

  • --|:--:|--

    • 2번째 열 가운데 정렬
  • --|--|--:

    • 3번째 열 오른쪽 정렬

원시 HTML(Raw HTML)

동해물과 백두산이 마르고 닳도록

하느님이 보우하사 우리나라 만세

Naver

HEROPY
  • HTML 문법 사용 가능

수평선(Horizontal Rule)




  • ---와 ***기호를 통해 수평선 사용 가능

Markdown Readme.md

Markdown 실습

profile
Frontend developer

0개의 댓글