웹 개발에서 Markdown을 사용하는 방법

Feb 2, 2026

어떻게

웹 개발자와 콘텐츠 제작자로서 우리는 일반적으로 내부에 감싸는 텍스트를 많이 쓰는 시간을 많이 소비합니다. HTML. 암호. Markdown으로 그것을 할 수있는 더 좋은 방법이 있다고 말하면 어떻게해야합니까? 코드가 아닌 글쓰기에 집중할 수 있었던 방법은 무엇입니까?

Markdown은 John Gruber와 Aaron Swartz가 2004 년에 개발 한 일반 텍스트, 경량 마크 업 언어입니다. 원래는 일반 텍스트 파일을 구조적으로 유효한 HTML 또는 XHTML로 변환하여 XHTML / HTML을 쉽게 작성하도록 만들어졌으며, MarkDown은 원고, 자습서, 노트, 웹 컨텐츠 등의 글쓰기의 거의 모든 작성 유형에 사용할 수 있습니다.

비교적 간단하지만 처음 시작할 때 마찰이 조금 협박 할 수 있습니다. 그러나 일단 당신이 그 중단을 받으면 콘텐츠를 입력하는 대신 코드를 포맷하는 데 얼마나 많은 시간을 포맷하는 데 얼마나 많은 시간을 지출했는지 깨닫게됩니다.

01. MarkDown 편집기를 선택하십시오

웹에 대한 Markdown을 사용하면 작업 할 수있는 기본 구문과 제한 사항을 이해하는 것이 중요합니다. 시작하기 전에 사이트의 편집기와 인터프리터가 필요합니다. 번갈아, 게시하기 전에 마크 다운을 변환 할 수 있습니다.

You'll need some kind of editor to get started — 시작하기 위해 어떤 종류의 편집자가 필요합니다

선택할 수있는 몇 가지 편집자가 있습니다. 속담 HTML 및 PDF를 비롯한 다양한 내보내기 옵션을 제공하기 때문에 멋진입니다. 또 다른 좋은 대안은입니다 스태킹 - 무료 온라인 Markdown 편집기. 물론 일반 텍스트 편집기가 작동합니다.

Jetpack is handy for use with WordPress — Jetpack은 WordPress와 함께 사용하기 위해 편리합니다

MarkDown을 HTML로 변환 할 계획이 없으면 사이트에 플러그인 (또는 인터럽터)을 가져올 수 있습니다. WordPress의 경우, jetpack. Markdown을 탁월하게 지원하므로 해당 옵션을 사용 가능하게하는 한 게시물 및 주석 내부에서 직접 Markdown을 사용할 수 있습니다.

마크 업 언어와 마찬가지로 Markdown에는 자체 구문이 있습니다. 참고 : 다양한 맛이나 다양한 마크 다운이 있습니다. 이 기사에서는 일반적으로 공유 된 구문을 다룰 것입니다.

02. 제목을 설정합니다

HTML에서는 6 개의 제목 스타일이 있습니다. H1. , H2. , H3. , H4. , H5. 과 H6. ...에 Markdown 에서이를 다시 만들려면 일련의 해시 태그 심볼을 사용하십시오 ( # ) - 제목 번호에 해당합니다 - 표제 텍스트가 뒤 따릅니다. 예를 들어, A를 만드는 것 & lt; h1 & gt; 태그, 해시 태그를 사용하십시오 # ; An. & lt; h2 & gt; 태그, 두 개의 해시 태그를 사용하십시오 ## ; 등등 등.

Markdown 입력 :

 # 제목 1.
## 머리 장식 2.
### 제목 3.
#### 제목 4.
##### 제목 5.
###### 머리 6

HTML 출력 :

 & lt; h1 & gt; 제목 1 & lt; / h1 & gt;
& lt; h2 & gt; 2 & lt; / h2 & gt;
& lt; h3 & gt; 표제 3 & lt;
& lt; h4 & gt; 제목 4 & lt; / h4 & gt;
& lt; h5 & gt; 제목 5 & lt; / h5 & gt;
& lt; h6 & gt; 헤딩 6 & lt;

03. 단락을 표시합니다

단락은 그 것으로 나타납니다 & lt; p & gt; HTML 태그. Markdown에서는 하나 이상의 빈 줄로 구분됩니다. HTML과 마찬가지로 공백은 무시됩니다. 따라서 20 개의 빈 줄을 추가하면 하나의 단락만이 여전히 있습니다.

Markdown 입력 :

 빠른 갈색 여우가 게으른 개를 뛰어 넘습니다.
게으른 개는 게으른 개이기 때문에 신경 쓰지 않습니다.

HTML 출력 :

& lt; p & gt; 빠른 갈색 여우가 게으른 개를 뛰어 넘습니다. & lt; / p & gt; & lt; 게으른 개는 게으른 개이기 때문에 신경 쓰지 않습니다. & lt; / p & gt;

04. 라인 브레이크 스타일

HTML로 표현되는 라인 브레이크 & lt; br & gt; 태그는 단일 줄 바꿈을 사용하여 추가 된 줄 끝에 2 개의 공백이 추가됩니다.

Markdown 입력 :

 빠른 갈색 여우
게으른 개를 뛰어 넘는다.

HTML 출력 :

 & lt; p & gt; 빠른 갈색 폭스 & lt; 게으른 개 위로 뛰어 오르십시오. & lt; / p & gt;

05. 마크 강조

텍스트에 강조를 추가하는 방법에는 두 가지가 있습니다. 기울임 꼴 ( & lt; em & gt; HTML) 또는 굵게 ( & lt; strong & gt; HTML에서).

Markdown에서는 하나 또는 두 개의 별표를 사용 하여이 작업을 수행합니다 ( ...에 * 짐마자 밑줄 (_)을 사용할 수도 있지만 다른 일들을 위해 밑줄을 사용하는 다른 맛의 맛이 있기 때문에 별표가 붙어 있습니다.

Markdown 입력 :

 * 이탤릭 텍스트 *
** 대담한 텍스트 **

HTML 출력 :

 이탤릭 텍스트 & lt;
& lt; 강력한 & gt; 굵은 텍스트 & lt; / strong;

참고 : 세 개의 별표를 사용하여 대담한 기울임 꼴 텍스트를 만들 수도 있습니다. *** 대담하고 이탤릭 텍스트 *** ...에

06. 가로 규칙을 만듭니다

가로 규칙을 만들려면 (또는 & lt; hr & gt; HTML에서) 일련의 3 개의 하이픈을 사용하십시오 ( --- ), 별표 ( *** ) 또는 동일한 징후 ( ===. 짐마자 당신이 선호하는 것은 당신의 선택이지만, 당신이 위의 빈 줄을 포함하는지 확인하십시오.

Markdown 입력 :

 새로운 것을 배우는 것은 항상 많은 즐거움이 있습니다.

---

확실히!

HTML 출력 :

& lt; p & gt; 새로운 것을 배우는 것은 항상 항상 재미 있습니다. & lt; / p & gt; & lt; hr & gt; & lt; p & gt; 확실히! & lt; / p & gt;

07. 이미지 및 링크를 추가하십시오

HTML에서는 이미지가 추가됩니다 & lt; img & gt; 태그와 링크가 다음을 사용하여 추가됩니다 & lt; a & gt; 꼬리표.

Markdown에서 이미지는 느낌표로 시작합니다 ( ...에! ), 사각 브래킷이 뒤 따른다 ( ...] ) 'Alt Text'및 괄호 (괄호) () ) 이미지의 경로. 큰 따옴표 안에 선택권을 포함 할 수도 있습니다 ( "" 짐마자

링크가있는 경우 느낌표가 없으면 거의 동일합니다.

Markdown 입력 :

! [ALT 텍스트] (/ path / to / image.jpg "옵션 타이틀")
[링크 텍스트] (http://example.com "옵션 타이틀")

참고 : 참조 링크와 이미지를 사용할 수도 있지만 여기에는 덮여 있지 않습니다.

HTML 출력 :

& lt; img src = "/ path / to / image.jpg"Alt = "Alt Text"title = "선택권"/ & gt; & lt; href = "http://example.com"title = "선택권"& gt; 링크 텍스트 & lt; / a & gt;

08. 목록을 만드십시오

HTML에는 두 가지 유형의 목록이 있습니다 : 주문 ( & lt; ol & gt; )와 정한 어 ( & lt; Ul & gt; 짐마자 Markdown을 사용하여 주문 된 목록에 대한 번호를 사용하고 별표 ( ...에 * ) 또는 하이픈 ( - ) 정렬되지 않은 목록에 대해.

Markdown 입력 :

 1. 항목 1
2. 항목 2
* 첫 번째 항목
* 두 번째 항목
- 첫 번째 항목
- 두 번째 항목

HTML 출력 :

 & lt; ol & gt;
& lt; li & gt; 항목 1 & lt;
& lt; li & gt; 항목 2 & lt;
& lt; / ol & gt;
& lt; Ul & gt;
제 1 아이템 & lt; / li & gt;
제 2 아이템 & lt; / li & gt;
& lt; / ul & gt;
& lt; Ul & gt;
제 1 아이템 & lt; / li & gt;
제 2 아이템 & lt; / li & gt;
& lt; / ul & gt;

09. 인라인 코드 및 코드 블록을 추가합니다

HTML에서 코드로 작업 할 때는이를 인라인 요소로 포함 할 수 있습니다. & lt; 코드 & gt; 태그; 또는 사전 형식이 지정된 텍스트 블록으로 & lt; pre & gt; & lt; 코드 & gt; 콤비네이션.

Markdown에서는 이러한 요소가 각면에 단일 뒷면을 사용하여 구분됩니다 ( ` ); 또는 코드 블록 위의 3 개의 백틀 윅을 포함하는 분리 스타일을 사용하여 ( ``` 짐마자

Markdown 입력 :

`numberOfPoints '변수는 플레이어의 점수를 보유합니다.
Player.wins가 {
numberOfPoints + = 1.
}

HTML 출력 :

& lt; 코드 & gt; NumberOfPoints & lt; 코드 & gt; 변수는 플레이어의 점수를 보유합니다. & lt; pre & gt; & lt; 코드 & gt; Player.wins가 { numberOfPoints + = 1. } & lt; / pre & gt; & lt; / code & gt;

10. 스타일 위로 BlockQuotes.

BlockQuotes는 다음을 사용하여 HTML에 추가됩니다 & lt; blockquote & gt; 꼬리표. Markdown에서는 기호보다 큰 것을 사용하십시오 ( & gt; ) 선 앞에.

Markdown 입력 :

 & gt; 이것은 내 blockquote입니다.
& gt;
& gt; 이것은 동일한 blockquote의 일부입니다.
& gt; 이것은 새로운 blockquote입니다.

HTML 출력 :

 & lt; blockquote & gt;
이것은 내 블록 킬로이다. & lt; / p & gt;
& lt; br & gt;
& lt; p & gt; 이것은 동일한 blockquote의 일부입니다. & lt; / p & gt;
& lt; / blockquote & gt;
& lt; blockquote & gt;
이것은 새로운 blockquote이다. & lt; / p & gt;
& lt; / blockquote & gt;

11. 인라인 HTML을 포함합니다

지원되지 않는 HTML 요소를 만들어야하는 경우가 있습니다.예를 들어, 당신은 필요할 수 있습니다 & lt; 표 & gt; 또는 & lt; div & gt; 꼬리표.

그렇다면 Markdown과 HTML을 혼합 할 수 있지만 몇 가지 제한이 있습니다.예를 들어 블록 레벨 HTML 태그 내에 MarkDown을 포함 할 수 없습니다.

자세히보기 :

20 Node.js 모듈을 알아야합니다
12 일반적인 자바 스크립트 질문에 대한 답변
HTML 및 CSS 학습을위한 최고의 자원 중 9 개

웹 개발에서 Markdown을 사용하는 방법

01. MarkDown 편집기를 선택하십시오

02. 제목을 설정합니다

03. 단락을 표시합니다

04. 라인 브레이크 스타일

05. 마크 강조

06. 가로 규칙을 만듭니다

07. 이미지 및 링크를 추가하십시오

08. 목록을 만드십시오

09. 인라인 코드 및 코드 블록을 추가합니다

10. 스타일 위로 BlockQuotes.

11. 인라인 HTML을 포함합니다

어떻게 - 가장 인기있는 기사

초상화 사진 : 완벽한 인물 사진을 찍는 방법

NPM으로 생산성을 향상시키는 21 가지 방법

Houdini가있는 작업 이미지 마스크 마술

오일 페인트에서 반짝이 눈을 만드는 방법

컬러 연필을 혼합하는 방법

Photoshop에서 이중 노출을하십시오

야생 서쪽 트위스트로 만화를 만드는 방법

캐리커처의 해부학 : 15 탑 팁

카테고리