diff --git a/public/images/posts/everything-about-markdown/2.png b/public/images/posts/everything-about-markdown/2.png deleted file mode 100644 index ae28fd5..0000000 Binary files a/public/images/posts/everything-about-markdown/2.png and /dev/null differ diff --git a/public/images/posts/everything-about-markdown/3.png b/public/images/posts/everything-about-markdown/3.png deleted file mode 100644 index ef37690..0000000 Binary files a/public/images/posts/everything-about-markdown/3.png and /dev/null differ diff --git a/public/images/posts/everything-about-markdown/9.png b/public/images/posts/everything-about-markdown/9.png deleted file mode 100644 index 2bf662b..0000000 Binary files a/public/images/posts/everything-about-markdown/9.png and /dev/null differ diff --git a/src/posts/docs/everything-about-markdown.md b/src/posts/docs/everything-about-markdown.md index a2283aa..17569f0 100644 --- a/src/posts/docs/everything-about-markdown.md +++ b/src/posts/docs/everything-about-markdown.md @@ -1,50 +1,49 @@ --- -title: '마크다운(***Markdown***)의 모든 것' -description: '마크다운(Markdown) 및 GFM(GitHub Flavored Markdown)에 대한 개념, 문법, 사용법, 활용법 총 정리.' +title: '마크다운Markdown의 모든 것' +description: '마크다운Markdown 및 GFMGitHub Flavored Markdown에 대한 개념, 문법, 사용법, 활용법 총 정리.' created: '2024-05-25' -updated: '2024-07-27' +updated: '2024-10-26' tags: - 'markdown' --- -***Markdown*** 파일의 확장자는 `.md`로 끝난다. 개발을 하다 보면 `README.md`라는 이름의 파일을 한 번쯤 만나게 되는데, 이것이 가장 대표적인 ***Markdown*** 파일이라 할 수 있다. +마크다운Markdown 파일의 확장자는 `.md`로 끝난다. 개발을 하다 보면 `README.md`라는 이름의 파일을 한 번쯤 만나게 되는데, 이것이 가장 대표적인 마크다운 파일이라 할 수 있다. -***Markdown***과 비슷하지만 문법이 좀 더 복잡한 `.adoc` 확장자의 ***AsciiDoc*** 문법도 있으며, 좀 더 다양한 형태의 문서를 만들 수 있다. -다만, 문법이 훨씬 복잡하고 지원 플랫폼이 적어 사용에 제약이 많다. +마크다운과 비슷하지만 문법이 좀 더 복잡한 `.adoc` 확장자의 AsciiDoc 문법도 있으며, 좀 더 다양한 형태의 문서를 만들 수 있다. 다만, 문법이 훨씬 복잡하고 지원 플랫폼이 적어 사용에 제약이 많다. -## 1. ***Markdown***에 대하여 +## 1. 마크다운Markdown에 대하여 -### 1-1. ***Markdown***이란? +### 1-1. 마크다운이란? -[***Markdown***](https://www.markdownguide.org/getting-started/)은 텍스트 기반의 마크업 언어로 2004년 존 그루버에 의해 만들어졌다. 쉽게 읽고 쓸 수 있으며, ***HTML***로 변환이 용이하다. 특수문자와 기호를 이용한 간단한 구조의 문법을 사용하여, 웹에서 보다 빠르게 콘텐츠를 작성하고 직관적으로 인식할 수 있다. +[마크다운](https://www.markdownguide.org/getting-started/)은 텍스트 기반의 마크업 언어로 2004년 존 그루버에 의해 만들어졌다. 쉽게 읽고 쓸 수 있으며, HTML로 변환이 용이하다. 특수문자와 기호를 이용한 간단한 구조의 문법을 사용하여, 웹에서 보다 빠르게 콘텐츠를 작성하고 직관적으로 인식할 수 있다. -***Markdown***이 각광받기 시작한 이유는 ***Github*** 덕분이다. ***Repository***에 대한 정보를 기록하는 `README.md`는 ***Github***를 사용하는 사람이라면 가장 먼저 접하게 되는 문서이다. ***Markdown***을 통해 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼지게 된다. +마크다운이 각광받기 시작한 이유는 [깃허브GitHub](https://github.com/) 덕분이다. 리포지토리Repository에 대한 정보를 기록하는 `README.md`는 깃허브를 사용하는 사람이라면 가장 먼저 접하게 되는 문서이다. 마크다운을 통해 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼지게 된다. -***Markdown***에는 ***HTML Tag***를 삽입하여 활용할 수 있다. (단, 모든 ***Tag***가 지원되는 것은 아니다.) 문서상에 더욱 풍부한 표현을 원할 때 활용하면 좋다. +마크다운에는 HTML 태그Tag를 삽입하여 활용할 수 있다. 비록 모든 태그를 지원하는 것은 아니지만, 문서상에 더욱 풍부한 표현을 원할 때 활용하면 좋다. -이때, ***Markdown*** 문서의 표현 방식은 ***CSS***설정에 따라 달라진다. 따라서, 어떤 플랫폼(***Github***, ***VScode***, ***Velog***, ***Discord*** 등등)을 사용하느냐에 따라 표현 방식에 차이가 있을 수 있다. +이때, 마크다운 문서의 표현 방식은 CSS설정에 따라 달라진다. 따라서, 어떤 플랫폼(GitHub, VScode, Velog, Discord 등)을 사용하느냐에 따라 표현 방식에 차이가 있을 수 있다. ### 1-2. 마크다운의 장ㆍ단점 #### 1-2-1. 장점 - 문법이 쉽고 간결하다. -- 모든 것에 사용할 수 있다. (웹 사이트, 문서, 메모 등) +- 다양한 곳에 사용할 수 있다. (웹 사이트, 문서, 메모 등) +- 지원하는 프로그램과 플랫폼이 다양하다. - 별도의 도구 없이 대부분의 환경에서 작성 가능하다. (메모장에서도 가능) - 다양한 형태로 변환이 가능하다. - 텍스트로 저장되기 때문에 용량이 적어 보관이 용이하다. - 텍스트이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다. -- 지원하는 프로그램과 플랫폼이 다양하다. #### 1-2-2. 단점 - 표준이 없기 때문에 도구에 따라서 변환방식이나 생성물이 다르다. -- 모든 ***HTML*** 문법을 대체하지 못한다. +- 모든 HTML 문법을 대체하지 못한다. -## 2. ***Markdown*** 사용법(문법) - 표준 마크다운 문법 +## 2. 마크다운 사용법(문법) - 표준 마크다운 문법 -각 ***Markdown*** 문법은 ***HTML*** 태그로 변환되어 브라우저에 출력된다. 모든 ***HTML*** 태그를 지원하는 것은 아니며, 일부 중요한 문법만을 제공한다. +각 마크다운 문법은 HTML 태그Tag로 변환되어 브라우저에 출력된다. 모든 HTML 태그를 지원하는 것은 아니며, 일부 중요한 문법만을 제공한다. ### 2-1. 제목(Headings) @@ -179,7 +178,7 @@ tags: ### 2-2. 줄 바꿈(Line Breaks) -줄 바꿈(Line Breaks)을 위해서는 문장 마지막에 2칸 이상 띄어쓰기( )를 입력하거나, 문장 마지막에 ***HTML*** `
` 태그를 직접 입력한다. +줄 바꿈(Line Breaks)을 위해서는 문장 마지막에 2칸 이상 띄어쓰기( )를 입력하거나, 문장 마지막에 HTML `
` 태그를 직접 입력한다. #### 2-2-1. Markdown style @@ -205,7 +204,7 @@ tags: #### 2-2-2. HTML style -***HTML*** `
` 태그를 직접 입력한다. +HTML `
` 태그를 직접 입력한다. - 입력 @@ -227,11 +226,11 @@ tags: ### 2-3. 수평선(Horizontal Rules) -`-`, `_`, `*` 각 기호를 3개 이상 입력해, `
` 태그로 변환되는 '수평선(Horizontal Rules)'을 표현한다. +`-`, `_`, `*` 각 기호를 3개 이상 입력해, `
` 태그로 변환되는 수평선Horizontal Rules을 표현한다. -단, `-`를 사용할 경우, 제목(Headings)으로 인식할 수 있으니, 이전 라인은 비워두어야 한다. +단, `-`를 사용할 경우, 제목Headings으로 인식할 수 있으니, 이전 라인은 비워두어야 한다. -***Markdown*** 문서를 미리보기로 출력할 때, *페이지 나누기* 용도로 많이 사용한다. +마크다운 문서를 미리보기로 출력할 때, *페이지 나누기* 용도로 많이 사용한다. #### 2-3-1. `-` style @@ -295,7 +294,7 @@ tags: ### 2-4. 주석(Comments) -`[//]: #`, `` 기호를 사용해, 주석(Comment)을 표현한다. +`[//]: #`, `` 기호를 사용해, 주석Comment을 표현한다. #### 2-4-1. Markdown style @@ -325,7 +324,7 @@ tags: #### 2-4-2. HTML style -***HTML***에서 이용하는 `` 기호를 사용한다. +HTML에서 이용하는 `` 기호를 사용한다. - 입력 @@ -351,9 +350,9 @@ tags: ### 2-5. 강조(Emphasis) -각각 ``(기울임), ``(두꺼움), ``(취소선) 태그로 변환되는 '강조(Emphasis)'를 표현한다. +각각 ``(기울임), ``(두꺼움), ``(취소선) 태그로 변환되는 '강조Emphasis'를 표현한다. -***Markdown***에서 지원하지 않는 밑줄을 추가하려면, ***HTML*** ``(밑줄) 태그를 직접 사용할 수 있다. +마크다운에서 지원하지 않는 밑줄을 추가하려면, HTML ``(밑줄) 태그를 직접 사용할 수 있다. #### 2-5-1. 기울임(이태릭체) @@ -415,11 +414,11 @@ tags: ### 2-6. 인용문(Blockquotes) -`
` 태그로 변환되는 '인용문(Blockquotes)'을 표현한다. +`
` 태그로 변환되는 '인용문Blockquotes'을 표현한다. -`>` 기호를 사용하며, 중첩된 인용문(Nested blockquotes)을 만들 수 있다. +`>` 기호를 사용하며, 중첩된 인용문Nested blockquotes을 만들 수 있다. -인용문 내부에 다른 ***Markdown*** 요소를 포함할 수 있다. (제목, 리스트, 코드 블록 등등) +인용문 내부에 다른 마크다운 요소를 포함할 수 있다. (제목, 리스트, 코드 블록 등등) - 입력 @@ -460,7 +459,7 @@ tags: ### 2-7. 목록(Lists) -`
    `, `