본문 바로가기

프론트엔드/Markdown

Markdown

github에 올라온 코드들 중 소개를 하는 파일이 있습니다.

보통 README.md 로 되어 있습니다.

.md로 끝나는 파일이 markdown로 만든 파일로 생각하시면 됩니다.

 

Markdown 장점

문법이 쉽고 간결하다.

관리가 쉽다.

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

 

Markdown 단점

표준이 없다.

모든 HTML 마크업을 대신하지 못한다.

 

파일 만들기 및 미리보기

github에서 README.md를 자동으로 찾는 경향이 있어서 파일 이름도 똑같이 만들어봅니다.

오른쪽 분활독보기 버튼 클릭하고 미리보기를 할 수 있습니다.

 

제목, 문장, 줄바꿈

제목 앞에 # (샵+빈칸)하고 입력하면 h1태그가 나옵니다.

#의 개수만큼 h1~h6태그가 나옵니다.

#뒤에 띄어쓰기가 없으면 일부 환경에서 제대로 나타나지 못합니다.

그래서 꼭 띄어쓰기를 추가하는 것을 권장합니다.

 

문장을 입력하는데 별다른 기호없이 그대로 입력하면 됩니다. html파일의 <p>태그과 같습니다.

줄바꿈은 일부 환경에서 띄어쓰기 두 번을 통해서 실행되는데도 있지만

가급적으로 <br />를 넣어서 처리하는 것을 권장합니다.

 

강조, 목록

캡처에 다 나온듯이 굳이 설명 안 하겠습니다.

취소선은 css에서 text-decoration: line through; 과 같습니다.

마크다운에서 밑줄은 없어서 <u>태그로 대체 처리합니다.

list하부에 또 list를 만들려고 하면 들여쓰기 두 번 해야 됩니다.

순서가 필요한 목록은 html <ol>태그와 같습니다.

 

링크, 이미지

html의 a태그처럼 이름은 앞에 중괄호에 넣고, 링크는 뒤에 소괄호안에 넣습니다.

 

a태그의 title속성, 즉, 마우스를 해당 링크에 대면 나타난 글씨는

소괄호안에 링크를 먼저 입력 후, 띄어쓰기, 큰 따움표 안에 작성하면 됩니다.

 

a태그의 target속성, 즉, 새탭 열기 여부는 마크다운에는 없습니다.

 

이미지는 링크와 유사합니다. 대신 대괄호 앞에 ! 를 추가합니다.

 

이미지에 링크 걸기 기능도 있습니다.

링크 대괄호안에 이미지를 넣고, 소괄호 안에는 넘어가는 링크를 입력하면 됩니다.

 

인용문, 코드 강조

인용문은 > 로 실행됩니다.

중첩 개념이 있어서 >가 많을 수록 더 안쪽으로 인용됩니다.

inline코드 강조는 원하는 단어 앞뒤에 `를 붙여주면 됩니다.

block코드 강조는 ```언어 내용```를 만들어서 내용을 추가하면 됩니다.

 

 

열을 구분할려면 | 앞뒤 띄어쓰기를 하면 됩니다.

--|--|--는 표 머리와 내용을 구분해줍니다.

열갯수와 맞개 --를 입력하고 | 로 열 구분합니다.

 

내용은 기본적으로 왼쪽 정렬이고,

가운데 정렬은 :--: 이며,

오른쪽 정렬은 --: 입니다.

 

 

원시 HTML, 수평선 

마크다운이 제공하는 기능이 많지 않습니다.

필요시 HTML문법 그대로 작성해도 똑같이 출력됩니다.

이럴 때 원시 HTML라고 불립니다.

수평선을 작성하는 방법은 3개입니다.

---, ***, ___ 모두 가능합니다.