Tistory블로그에서도 최근에 기본 문서 에디터로 마크다운 문법을 지원하기 시작 한 듯 하다.
간결하게 내용 위주로 문서를 작성할 수 있고 표현 포맷의 정형화 과정도 나름 쉽게 할 수 있다는 점에서 마크다운 문법은 꽤 괜찮은 언어라고 생각한다.
이번 페이지에서는 순수 기본 에디터만을 이용하여 마크다운 문법에 대해 작성 해 보고
기본 작성 내용을 기반으로 문서 내 HTML태그 혹은 CSS등 스타일시트 내용을 적용하여 문서를 보다 예쁘게 작성하는 식으로 나아가려 한다.
Markdown Page List
제목
- HTML의 <h1>, <h2> 등의 태그와 같이 제목 표현을 할 수 있다.
- <h1> ~ <h6>까지 6단계로 작성 가능하다.
- 보통 기본 문법으로는 지원하지 않는 경우가 많지만,
toc(목차)생성을 지원하는 마크다운 포맷에서는 목차 기준이 된다. #를 통해 제목을 표현한다.
| 마크다운 문법 | 표현 |
|---|---|
# 1단계 |
1단계 |
## 2단계 |
단계 |
### 3단계 |
3단계 |
#### 4단계 |
4단계 |
##### 5단계 |
5단계 |
###### 6단계 |
6단계 |
- 보통 전체 페이지의 대 제목은
=문자를 3개 이상 나열하여 표현하기도 한다.
제목
====강조
- 문자나 글귀 강조를 위해 사용(굵은 글씨, 기울임 체 등)
| 마크다운 문법 | 같은 의미의 HTML 태그 | 표현 |
|---|---|---|
*기울임꼴* 또는 _기울임꼴_ |
<em> | 기울임꼴 |
**굵게** 또는 __굵게__ |
<strong> | 굵은 글씨 체 |
~~취소선~~ |
<del> | |
| 없음 | <u> | 마크다운 문법에는 없음 |
인용
- 인용표현으로 하고자 하는 내용앞에
>문자로 표현한다
> 인용문이 있고,
>> _인용구 안에 인용문을 다음과 같이 표현할 수 있다._- 위 블럭 안의 내용은 아래와 같이 표현 된다.
인용문이 있고,
인용구 안에 인용문을 다음과 같이 표현할 수 있다.
목록
- 순서 있는 목록(ordered list)과 순서 없는 목록(unordered list)으로 표현 할 수 있다.
- 순서 있는 목록은 오로지 오름차순 형태로만 정렬 가능하다.
- 리스트 표현 상에서의 depth는 탭을 이용하여 구분한다.
- 순서 있는 목록은
숫자.로 표현한다. - 순서 없는 목록은
+,*,-문자들을 통해 표현하며 모든 기호는 리스트의 depth가 동일한 경우 동일한 기호로 표현 된다.
* C++
1. C
1. C++
1. Template
1. Meta Programming
1. Generic Programming
+ Python
- Markup Language
1. HTML
* HTML5
1. XML
1. Markdown- 위 블럭은 아래와 같이 표현 된다.
- C++
- C
- C++
- Template
- Meta Programming
- Generic Programming
- Python
- Markup Language
- HTML
- HTML5
- XML
- Markdown
- HTML
- C++
수평선
\<hr\>태그와 같은 수평선을*문자 혹은-문자를 단독으로 나열함으로써 표현 할 수 있다.
| 마크다운 문법 | 표현 |
|---|---|
* * * |
|
*** |
|
--- |
|
- - - |
위 의
표현열 들의 결과는 마크다운 기본 문법으로 표현이 되지 않아 <hr> 태그로 표현함.
줄바꿈(Line Breaks)
- 라인의 끝에 2개의 공백을 넣고 다음 라인을 시작한다.
- <br> 태그를 직접 사용한다
| 마크다운 문법 | 결과 |
|---|---|
| 동해 남해 |
동해 남해 |
| 소나무<br>쿼드로 | 소나무 쿼드로 |
링크
마크다운의 링크는 크게 외부링크와 내부링크로 나눌 수 있다.
- 외부링크
- 인라인링크
[표현문구](링크주소 "툴팁 텍스트") - 참조링크
[표현문구][1] (... 다른 내용 쓰다가 문서 어디서든) [1]: https://google.com "구글"[구글][1]
(다른 내용들을 기입하던 중이라도 상관 없이 쓸 수 있다)
[1]: https://google.com "구글" - URL 링크
마크다운 문서내 일반적으로 url 주소 혹은 e-mail 주소등은 링크로 표현이 되며 아래와 같으
<,>문자들을 통해서도 주소 설정이 가능하다.<https://google.com>내부링크
- 문서 내 참조(책갈피) 등 때 사용하는 것으로 이동하고자 하는 위치에는
#문자로 마킹 된 title 항목이 있는 곳만 가능하다. - 이동하고자 하는 위치의 title 은 영문으로만 이뤄진 곳이라야 한다.
[표현문구](#marked-title) : # 문자로 제목으로 지정되어야 하며 링크로 지정하는 내용이 소문자와 '-'문자로만 쓰여져야 하기 때문에 영문으로만 이뤄진 것이어야 한다. ex [마크다운 페이지 LIST](#markdown-page-list)
- 문서 내 참조(책갈피) 등 때 사용하는 것으로 이동하고자 하는 위치에는
각주(footnote)
- 보통 보충 설명 및 출처 공개 등에 사용한다.
마크다운[^markdown] (... 문서 내 어디서든) [^markdown]: 마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 온갖 태그로 범벅된 HTML 문서 등과 달리, 읽기도 쓰기도 쉬운 문서 양식을 지향한다.마크다운[^markdown]
[^markdown]: 마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 온갖 태그로 범벅된 HTML 문서 등과 달리, 읽기도 쓰기도 쉬운 문서 양식을 지향한다.
이미지
- 이미지의 경우는 링크의 마크다운 문법과 매우 유사하다. 외부 링크 방식의 기본 마크다운 문법 앞에
!만 붙여 준다고 생각 하면 된다. - 다만, 이미지의 크기나, 결과물에서의 배치(레이아웃)등을 조절하는 것에는 자유롭지 못하다.
테이블
- 표 내부에는 줄 바꿈을 지원하지 않기 때문에 직접 <br> 태그를 이용해야 한다
- 헤더 셀을 구분하기 위해서는 최소 3개 이상의 - (dash)를 나열해야 한다.
- 셀 병합에 대한 기능이 유연하지 않으며, 표준 지원이 아닌 듯 하다.
- 정말 간단하게 작성할 테이블이 아니라면, <table> 태그를 익혀 쓰는게 유용하고 깔끔 할 것 같다.
| 값 | 의미 | 기본값 | | ---------- | :---------------------: | :------------ | |`static` | 유형(기준) 없음 / 배치 불가능 | `static` | |`relative` | 요소 **자신**을 기준으로 배치| | |`absolute` | 선행자 요소를 기준으로 배치 | | |`fixed` | *브라우저 창*을 기준으로 배치 | | | cell span | cell that spans across two columns || 티스토리기본 마크다운 에디터 상에서는 아래와 같이 표현 된다.(셀 병합을 의도한 가장 마지막 행이 제대로 적용되어 있지 않은 것으로 나온다)값 의미 기본값 static유형(기준) 없음 / 배치 불가능 staticrelative요소 자신을 기준으로 배치 absolute선행자 요소를 기준으로 배치 fixed브라우저 창을 기준으로 배치 cell span cell that spans across two columns
Code Blocks
~문자 3개를 나열한 뒤, 표현할 프로그램 language명을 명시하면 해당 언어에 맞는 코드 내용을 깔끔하게 표현 할 수 있다.~문자는 ` 문자로 대체 가능하다.- 표준으로 지정된 사항은 없는 듯 하다,
markdown문법을 지원하여 변환해주는 확장 기능에 따라 적용 형식 (~~~{.cpp})이나 코드 하이라이트 스타일을 지원해주는 언어의 종류 등이 달라지는 듯. - 기본적으로는 대중적인 프로그램 관련 언어들은 거의 지원하는 것 같다.
``` cpp class Stack { ... }; ```
Tistory 기본 마크다운 에디터 상에서는 코드 하이라이트 등의 스타일이 지원되지 않는 듯 하다.
class Stack { public: void Pop(); int Top(); };
결론
- 비록
마크다운작성 문법만으로는 정말 보기 좋게, 예쁘게 결과 문서를 만들어 낼 수 없다. - 다만, 순수
마크다운작성 문법은 매우 쉽다. - 정말 간결하게, 내용 위주로 빠르게 결과문서를 작성하면서, 표현 포맷을 정형화 시키기에는 최적이라는 생각이다.
- 지금 이 문서를 기반으로 간단한 HTML 태그와 css 스타일 적용을 통해 보다 나은 형태로 결과 문서를 바꿔보자.
나오K