워드프레스 마크다운(Markdown) 문법 설명

WordPress.com에서는 2013년 11월 19일부터 마크다운(Markdown)을 지원하기 시작했다. 그리고 얼마전에 발표한 Jetpack 2.8에서 마크다운을 지원하게 되어서 설치형 워드프레스에서도 마크다운을 간편하게 사용할 수 있게 되었다.

아래의 표는 워드프레스 Support 페이지에 있는 Markdown quick reference를 번역하고, 몇가지 문법을 더 추가한 것이다. 표로 만들었기 때문에 화면이 작은 모바일 디바이스에서는 제대로 보이지 않을 수 있다.

워드프레스에서 지원하는 마크다운(Markdown) 문법은 기본 마크다운 문법에 Markdown Extra의 문법과 GitHub Flavored Markdown의 문법도 일부 수용한 형태로 되어 있다. 그래서 기본적인 마크다운의 문법보다는 기능이 더 많고, 조금 더 복잡하다. 하지만 블로그에 글을 쓸 때, 그 모든 문법을 알아야하는 것은 아니다. 아마 대부분의 사람들이 아래 표에 정리한 정도의 문법만으로도 블로그를 운영하기에는 충분할 것이다. 좀 더 자세한 설명이 필요하거나, 더 많은 문법을 알고 싶을 때는 아래 링크를 참조하면 된다.

마크다운변환후 모습
강조
*기울여쓰기(italic)* _기울여쓰기(italic)_
**굵게쓰기(bold)** __굵게쓰기(bold)__

이 때 * 과 _ 사이에는 공백이 있어서는 않된다.

기울임
굵은글씨

“기울여쓰기”는 HTML에서 “em”태그를, “굵게쓰기”는 HTML에서 “strong” 태그를 의미한다. 따라서 css에서 그 태그들이 어떻게 보여지도록 설정되었는지에 따라 보여지는 모습이 달라질 수 있다. 즉, 워드프레스 테마에 따라 “기울여쓰기”와 “굵게쓰기”의 모양이 달라질 수 있다는 뜻이다.

인라인 링크
[링크](http://example.com "링크제목").

대부분의 브라우저에서는 마우스 커서를 링크에 가져가면 링크제목이 뜬다.

링크.
참조 링크
[링크1][1] 과 [링크2][2].

[1]: http://example.com/ "링크제목1"
[2]: http://example.org/ "링크제목2"

참조 부분은 문서의 어떤 부분에 있어도 상관 없다. 그리고 주의해야할 것 중 하나는, 참조부분에서 []과 :는 꼭 붙어있어야 한다는 것이다.

링크1링크2.
URL만으로 링크하기
<http://example.com/>
<me@privacy.net>
http://example.com
me@privacy.net
인라인 이미지
로고: ![대체텍스트](/wp.png "이미지제목")

· 대체텍스트는 시각장애인용 브라우저를 이용할 때 그 이미지가 어떤 것을 가리키는지를 설명하는 용도로 사용된다.

· /wp.png 부분에 이미지주소를 넣어주면 된다.

로고: 대체텍스트
참조 이미지
더 작은 로고: ![대체텍스트][1]

[1]: /wp-smaller.png "이미지제목"
더 작은 로고: 대체텍스트
링크된 이미지
링크된 로고: 
[![대체텍스트](/wp-smaller.png)]
(http://wordpress.com/ "링크제목")
링크된 로고: 대체텍스트
수평선
---
***
___

수평선을 그리고 싶으면 -, *, _ 를 3개 이상 나열하면 된다. 이 때 “- – -“와 같은 식으로 중간에 공백을 넣어도 상관없다.




각주
(Footnotes)
각주 [^1] 는 이렇게 만든다.

[^1]: 각주다.

각주는 문서의 가장 밑에 원래 읽던 곳으로 돌아갈 수 있는 링크와 함께 추가된다.

각주 1 는 이렇게 만든다.


  1. 각주다.
줄넘기기
(개행)
각 라인의 끝에  
2개 이상의 스페이스를 넣으면  
줄 넘기기(개행)가 된다.

HTML에서와 같이 마크다운(Markdown)에서도, 에디터상에서 엔터를 쳐서 줄을 넝겨도 브라우저상에서 표현될 때는 줄이 넘겨지지 않은 상태로 나온다.

각 라인의 끝에
2개 이상의 스페이스를 넣으면
줄 넘기기(개행)가 된다.
문단 나누기
문단1 이다.

문단2 이다.

문단을 나눌 때는 문단과 문단 사이에 한 줄을 비워놓으면 된다.

문단1 이다.문단2 이다.
순서없는 리스트
(Bullet Lists)
* 목록
* 목록
- 목록
- 목록

순서없는 리스트를 작성하기 위해서는 -, +, *을 맨앞에 적으면 된다.

  • 목록
  • 목록
  • 목록
  • 목록
순서있는 리스트
(Numbered Lists)
1. 목록
1. 목록

순서있는 리스트를 작성하기 위해서는 숫자 다음 .을 찍는다. 적힌 숫자랑 상관없이 순서대로 번호가 매겨진다.

  1. 목록
  2. 목록
혼합 목록
(순서있는 리스트와 순서없는 리스트를 함께 쓰기)
1. 목록
2. 목록
   * 혼합 목록
   * 혼합 목록  
3. 목록
  1. Item
  2. Item
    • Mixed
    • Mixed
  3. Item
인용
(Blockquotes)
> 인용문.
> > 인용문안의 인용문.

> * 인용 목록 
> * 인용 목록

인용문.

인용문 안의 인용문.

  • 인용 목록
  • 인용 목록

인용문의 모양은 css에 어떻게 모양이 정의되었는지에 따라 달라진다. 따라서 테마를 바꾸면 인용문의 모양도 달라질 수 있다.

서식 설정 텍스트 (Preformatted)
  각각의 줄을 2개 이상의 
  스페이스로 시작하면 
  글을 타이핑하는 그대로 정확히 
  보여지게 할 수 있다.
  [test](http://test.com)

서식 설정 텍스트 태그는 마크다운이나 HTML 태그등을 그대로 보여주고자 할 때 사용하면 된다.

각각의 줄을 2개 이상의 
스페이스로 시작하면 
글을 타이팅하는 그대로 정확히 
보여지게 할 수 있다.
[test](http://test.com)
코드
`코드이다. [test](http://test.com)`
코드이다. [test](http://test.com)
코드 블럭
~~~~
이것은 
코드 블럭이다. 
~~~~

```
이것도 코드 블럭이다.
```
1
2
이것은
코드 블럭이다.
1
이것도 코드 블럭이다.
문법 강조
```css
#button {
    border: none;
}
```

이 문법은 wordpress.com에서만 지원된다. 설치형 워드프레스에서는 지원되지 않는다. 설치형 워드프레스에서는 코드블럭으로 보여진다. 지원되는 언어는 Posting Source Code에서 확인할 수 있다.

1
2
3
#button {
border: none;
}
제목
# 제목 1
## 제목 2
### 제목 3 
#### 제목 4 ####
##### 제목 5 #####
###### 제목 6 ######

#을 앞, 뒤에 모두 붙여도 되고, 앞에만 붙여도 된다.

제목 1

제목 2

제목 3

제목 4

제목 5
제목 6
정의 목록
(Definition Lists)
WordPress
:  세계 최대의 오픈 소스 
저작물 관리 시스템 

Markdown
:  일반 텍스트 문서를
HTML로 변환하는 도구
WordPress
세계 최대의 오픈 소스 저작물 관리 시스템
Markdown
일반 텍스트 문서를 HTML로 변환하는 도구

정의 목록의 모양은 css에 어떻게 모양이 정의되었는지에 따라 달라진다. 따라서 테마를 바꾸면 정의 목록의 모양도 달라질 수 있다.

(축)약어
(Abbreviations)
마크다운(Markdown)은 일반 텍스트를
HTML로 변환한다.

*[HTML]: HyperText Markup Language

(축)약어의 정의는 문서의 어떤 곳에든 있을 수 있다.

마크다운(Markdown)은 일반 텍스트를 HTML 로 변환한다.
인라인 HTML
<img src="/wp.png" align=right>

마크다운 문서를 작성할 때 마크다운으로 표현할 수 없는 것은 HTML을 이용해서 표현할 수 있다. 다만 주의해야할 것이 있다.

원래 마크다운 문법에서는 <div>, <table>, <pre>, <p>등의 블럭 엘리먼트들은 앞뒤에 빈 줄이 있어야 했지만, 워드프레스에는 markdown extra의 문법이 적용되어 있어서 그럴 필요가 없다. 다만 블럭 엘리먼트를 쓸 때는 앞에 3개 이상의 스페이스를 쓰면 안된다. 그러면 그 부분을 “서식 설정 텍스트”로 인식한다.

이 글 공유하기:

댓글 남기기

8 댓글 / "워드프레스 마크다운(Markdown) 문법 설명"

댓글 이메일 구독
avatar
정렬:   최신순 | 오래된 순
wpDiscuz