[12주차] 2. MarkDown

MarkDown

• 쉽고 빠르게 작성할 수 있는 문법
• html로 변환되서 실질적으로 적용
• 문서의 구조를 만드는 개념으로 꾸미는 개념은 아니다.

장점과 단점

장점

• html 문법보다 간단하고 쉬움
• 확장자가 md 파일을 가지고 문법을 작성하고 이 파일 하나만 관리해도 특정 글들을 쉽게 관리
• 굉장히 많은 곳에서 활용 됨, 지원되는 환경이 많다

단점

• 표준화된 문법이 없어 지원되는 환경에서 해석되는 방법이 다를 수 있다.
• html 문법으로 변환해서 적용되게 되는데 모든 html 태그들을 대신할 순 없다.(마크다운은 문서의 내용을 집중하기 위한 언어이므로)

문법

제목 Header

# 제목1	h1	제목1 ===
## 제목2	h2	제목2 ------
### 제목3	h3
#### 제목4	h4
##### 제목5	h5
###### 제목6	h6

강조 Emphasis

Italic체	*내용* or _내용_
두껍게	**내용** or _ _내용_ _
Italic체와 두껍게	**_내용_**
취소선	~~내용~~
밑줄	<u></u>

• HTML 태그 사용 가능, 하지만 마크다운에서 제공되는 것을 쓰는 것이 관리하기 용이
• 스타일을 문법 안에 쓰는 것은 추천하지 않음

목록 List

• html의 경우 ol 태그: 순서가 있는 개념, ul태그는 순서가 없는 개념
• 숫자. 이 하나의 기호가 되고 li태그가 되고 전체가 하나의 ol태그가 되는 것이라 보면 됨
• -(하이픈)이 하나의 기호가 됨. ul 태그의 li태그가 되는 것

링크

• html의 경우 a태그<a href=”해당 주소”>선택할 수 있는 이미지나 텍스트</a>
• [링크 걸 텍스트](해당 링크 주소url)
• [링크 걸 텍스트](해당 링크 주소url “title(링크설명텍스트)”)
• 상대경로도 작성 가능(./, ../)
• 하단에 참조링크 개념을 [참조링크이름]:주소 로 만들어 이름을 설정해 놓고 [링크 걸 텍스트][참조링크이름]으로 불러와 사용할 수 있다.
• 링크이름 : <링크 주소>

이미지

• 
• title은 생략 가능
• 링크와 동일하게 참조링크 지원
• 이미지 클릭시 링크로 이동하게 할 때 [](이동할 링크주소)

코드 강조

• 특정 글 안에서 코드 임을 알려주기 위해서 코드로 변환되는 부분을 만들어주는 것
• `(grave) 사용
• `코드` : inline 코드 강조, 텍스트를 다루는데 특화되서 특정 텍스트의 일부분에 코드다 라고 강조할 때 사용
• ```언어 코드구문 ``` : 이 전체가 특정 언어(html, css, js, bash, python)로 작성된 하나의 코드 다를 표현할 때 사용, 언어를 명시하는 것을 추천함

표

• |(vertical bar)을 통해서 col 구분
• table header 경계선은 header cell 수에 맞게 |---|작성
  • -(하이픈) 두개만 써도 됨
• ---에다 :을 붙이는 위치에 따라 정렬방식 달라짐
  • --- 왼쪽 정렬
  • ---: 오른쪽 정렬
  • :---: 가운데 정렬
• 끝 부분에는 | 은 생략 가능

인용문

• block quote 태그로 변환 됨
• 남의 말이나 글에서 직접 또는 간접으로 따온 문장 표현
• >인용문
• 인용문 안에 중첩으로 인용문 또 넣을 수 있음
  • >>중첩된 인용문
  • >>>중중첩된 인용문

원시 html

• 마크다운은 브라우저에 적용하기 위해 html로 변환되서 적용됨
• 기존 html 코드 사용할 수 있음(마크다운과 html을 혼용해서 사용할 수 있음)

수평선

• hr 태그
• ---
• ***
• ___

줄바꿈

• 줄바꿈하려는 곳에서 띄어쓰기 두번
• <br>태그 사용해도 됨

Tips

• vscode 작성하고 있는 md 파일 우측 상단에 돋보기 클릭시 미리보기 가능