Markdown 언어 기본 문법 및 팁
Categories: Language
이 글을 시작하기 전에 앞서 markdownguide.org에게 감사하다는 말을 표현하고 싶다.
참고로 위 사이트는 영어로 되어있으니 들어가서 당황하지는 말기를 바란다.
위 사이트에서 최대한 많은 부분을 가져와서 한글로 번역 및 내 생각대로 해석을 해보았다.
몇몇 부분은 영문 그대로 있는데 번역하기 애매하거나 귀찮았던 것 같다.
그래도 나름 며칠을 투자해서 써본 글이니 읽어보고 따끔한 피드백을 받고싶다.
이 글이 굉장히 길어질것 같다. 나는 이 글을 Basic Syntax랑 Extended(Advanced) Syntax로 나눠보려고 한다.
Basic Syntax
Markdown에서의 italics & bold texts
italics 는 text를 *(asterisk 1개) or _(underscore 1개)로 감싸주면 된다.
Tip: italics 쓸때 _(underscore) 옆에 공간을 줘야지 정상적으로 italics 적용이 된다. *(asterisk)는 상관 없다.
italics 가 적용 된 모습
_italics_가 적용이 안된 모습
bold는 text를 **(asterisk 2개)로 양쪽 모두 감싸주면 된다.
추가로 물론 italics 랑 bold를 같이 써줄수 있다.
이때, 순서는 상관없지만 되도록이면 읽기 편하도록 **(asterisk)를 바깥에 써준다.
text
Tip: italics랑 bold 효과를 같이 줄 text 양 옆에 ***(asterisk 3개)를 붙여준다.(다른 방법도 있지만 이게 가장 효과적)
Markdown에서의 Header
Header란?
글마다의 머리 문구라고 보면 된다. 글의 처음에 오게 되는 제목이며 그 다음에 오게 될 body의 내용을 간략하게 설명해준다. Markdown에서 Header는 #(Hash mark)로 표현이 된다.
여기서 # 갯수가 적을수록 글씨가 커지고 # 갯수가 많을수록 글씨가 작아진다.
상황에 따라 적절한 크기의 Header를 사용하면 될것 같다.
Header one
Header two
Header three
Header four
Header five
Header six
Markdown에서의 Link(2 different ways)
-
Inline Link
To create an inline link, you wrap the link text in brackets [ ], and then you wrap the link in parenthesis ( )[Link text that describes the link](https://hyunsang4072.github.io/)Link text that describes the link
여기서 link text란 실제로 사용자에게 보여지는 하이퍼링크이다.
이 link text를 사용자가 클릭하면, ( ) 안에 있는 링크로 이동이 되게 된다.주의!!! ( ) 안에 있는 link는 직접적으로 보이지는 않는다.
Tip: [ ] 안의 link text에도 italics 및 bold 적용 가능하다.
Tip: Header를 link로 만들수 있다.
-
Reference Link
Reference Link는 [ ]으로 link text를 주고 또 다른 [ ]를 붙여서 2번째 [ ]를 bottom of markdown document에 따로 링크와 연결시키는 식으로 사용한다.Do you want to [see something fun][a fun place]? Well, do I have [the website for you][another fun place]! [a fun place]: www.zombo.com [another fun place]: www.stumbleupon.comDo you want to see something fun?
Well, do I have the website for you!
Reference Link는 보통 하나의 링크를 여러 번 사용할 때 유용하다.
Reference Link의 장점? Multiple links to the same place only need to be updated once.Tip: You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in quotation marks after the URL.
추가로 설명하자면 Markdown에서 대체적으로 https같은 인터넷 주소를 쓰면 자동적으로 하이퍼링크 처리가 된다.
자동 링크 처리를 원치 않는다면
`을 주소 양쪽에 써줘서 자동링크를 비활성화시킨다.
Markdown에서의 Images(2 different ways)
-
Inline Image Link
Inline Image Link는 일반 Link와 비슷한 성향을 띄는 이미지 링크라고 보면된다.
다만 Link랑 다른게 있다면 맨 앞에!를 붙여줘야 한다는 점이다.
나머지는 Inline Link랑 똑같다.
여담이지만 탑건 매버릭 정말 재밌었다…
-
Reference Image Link
Reference Link와 비슷한 느낌이지만
!(Exclamation point)를 맨 앞에 붙여준다.![마녀 2 Movie Poster][마녀 2] [마녀 2]: https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA1MjZfMTk2%2FMDAxNjUzNTMzNjg0NjI3.vQrqFtgVZXM5pVp4neFs_EY815UbErskBQowztkaBk8g.3rN5aoq5oHvfQHk-nRWCI5K0kl-fhZKbSShCb61ISv4g.JPEG.hwpfiles%2FKakaoTalk_20220526_115222415_05.jpg&type=sc960_832Reference Link와 비슷한 느낌이지만
!(Exclamation point)를 맨 앞에 붙여준다.
그나저나 image가 너무 큰데 어떻게 크기 조절하는지 잘 모르겠다. 나중에 따로 알아봐야지…
추가로 Image에 Title을 주는 법과 링크를 걸어주는 방법!!!(Optional)
Image에 Title을 주는 법은 URL주소(or path)뒤에 "Title"을 주면된다.
이때 ""이든 ''이든 상관없는 듯 하다.
Image에 링크를 걸어주는 법은 Image 코드 전체를 [ ]로 감싸주고 그 뒤에 ( )추가 후 ( ) 안에 Image Link를 써주면 된다. 코드를 보면 무슨 말인지 이해가 갈것이다.
[](URL)
Alt text : 본인이나 다른 사용자가 알아볼수 있도록 간단하게 써주는 제목(아무거나 상관X)
Path : 외부에서 다운로드 받은 Image를 자신의 컴퓨터에 저장해놓은 경로예시) /assets/images/top-gun.jpg
[](https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA2MjVfNTQg%2FMDAxNjU2MTMzNTc1NTE1.JxKaH5ljGqOWuGFtXnnkpsTYTMmNHjy7qD9gBj9Za60g.265cQI8N7khDClWFrrxVtfgAERhT4x7_H3xwQyuP_VUg.JPEG.keun8102%2F%25C5%25BE%25B0%25C7%25B8%25C5%25B9%25F6%25B8%25AF.jpg&type=sc960_832)
Blockquotes
Blockquotes란?
Specific quote를 다른 소스에서 가져오거나 할때 쓰일 수 있다.
일반 글들과는 달리 더욱 더 눈에 띄는 특징이 있어 사용자들에게 큰 impact를 줄수있다.
사용법은 매우 간단하다. 그저 > 기호를 문단 맨 앞에 써주면 된다.
> This is how you use blockquotes with markdown!
This is how you use blockquotes with markdown!
Tip: 여러 문단을 써줄때 중간중간에 빈 줄에도 반드시 > 기호를 써줘야한다.
> The line below this one also needs > sign.
>
> And the paragraph continues... here.
The line below this one also needs > sign.
And the paragraph continues… here.
Tip: Block quotes can contain other Markdown elements, such as italics, images, or links.
Tip: Blockquotes can be nested. Add a >> in front of the paragraph you want to nest.
> Blockquotes outside
>
>> Nested Blockquotes
Blockquotes outside
Nested Blockquotes
Lists(many different ways to do this)
Unordered List
목록들을 나열할 때 사용할 수 있고 사용법도 굉장히 간단하다.
그저 elements를 나열하고 맨앞에 각각 -, *, +만(이중에 1택) 붙여주면 된다.
- Korea
- USA
- France
+ Korea
+ USA
+ France
* Korea
* USA
* France
모두 같은 결과를 준다.
- Korea
- USA
- France
Tip: If you want to make your list with more details, indent each asterisk one space more than the preceding item.
sub-list(nested)를 만들고 싶다면 그냥 main list에 indentation만 주면 된다.
- Korea
- South is better
- North is worse
- Korea
- South is better
- North is worse
Tip: You could also add italics, bold, or links within lists.
Tip: It’s usually a good idea to stop after three levels(or sub-lists).
Ordered List
An ordered list is prefaced with numbers, instead of asterisks.
1. Make .md file.
2. Learn markdown syntax.
3. Make a post.
4. Make a commit.
- Make .md file.
- Learn markdown syntax.
- Make a post.
- Make a commit.
Unordered and Ordered Together
1. Korea
- _Koreans_ live here.
2. USA
+ **People** live here.
3. France
* [People](https://www.google.com/) live here.
4. Sun
> It's pretty hot.
- Korea
- Koreans live here.
- USA
- People live here.
- France
- People live here.
- Sun
It’s pretty hot.
Tip: You can nest an unordered list in an ordered list, or vice versa.
Line Breaks
To create a line break or new line, end a line with two or more spaces, and then type return.
문장 끝에 two or more spaces 주고 엔터를 누르면 된다고 한다.
소스코드를 작성하고 직접 웹사이트에서 확인하면 무슨 느낌인지 이해가 될것이다.
This is
how it works.
This is
how it works.
참고로 HTML로 따지자면 <br> 태그라고 한다.(Markdown에서 사용 가능!!!)
Code
To denote a word or phrase as code, enclose it in backticks (`).
`Code`
`를 쓸때 잘못쓰면 원하지 않는 부분들도 Code 처리가 될수 있으니 주의하면서 쓰자.
Horizantal Rules
To create a horizontal rule, use three or more asterisks ***, dashes ---, or underscores ___ on a line by themselves.
--- , *** , ___
약간 Header와 Body 사이에 들어가면 좋을 것 같다.(실제로도 그렇게 많이 쓰이는 것 같다=내 생각)
Raw Markdown
Markdown 문법을 있는 그대로 보여주고 싶을때 쓸 수 있다.
문법 앞에 \ 를 붙여주면 된다.
*This is raw syntax.*
Fun fact: ` ``` ` 를 통해서 타 프로그래밍 언어를 코드 블록으로 나타낼 수 있다!(이건 좀 신기한 듯)
형태:
`언어
코드 블록
\`
#include <stdio.h>
int main()
{
printf("Hello, C!");
return 0;
}
Tip: Code는 띄어쓰기 4개로도 가능하다.
코드
코드
취소선(Strikethrough Text)
원하는 Text의 양 옆에 ` ~~ `로 감싸주면 된다.
~~I love CS.~~
I love CS.
밑줄치기(Underline)
밑줄 Text는 원하는 글 양 옆을 <u>으로 감싸주면 된다.
HTML 태그라서 open/close tag로 해줘야한다.
예를들어 <u>로 open해주고, </u>로 close 하는 식.
<u>This text is underlined.</u>
This text is underlined.
공백 태그(New line)
작성 중 elements(글, 이미지 등등) 사이에 공백을 주고 싶을 때 쓸수 있다.
<br> 태그를 이용하면 된다. 이 태그 또한 HTML 태그의 종류 중 하나.
URL과 Email 주소
URL이나 Email 주소를 Link로 보여주고 싶을 때는 <>로 감싸주면 된다.
이때, Email 주소 Link는 이메일을 보낼 수 있게 하는 Link다.(mailto:)
URL:
<https://hyunsang4072.github.io/>
https://hyunsang4072.github.io/
Email:
<hyunsang237@berkeley.edu>
같은 파일내의 다른 Header로 이동
같은 파일(페이지)에서 다른 Header(문단)로 이동할 수 있다.
Header가 기억이 안난다면 Markdown에서의 Header
굳이 왜? 라는 생각이 들수도 있지만, 기나긴 글이라면 필요할수 있다고도 생각한다.
사용법은 Inline Link랑 거의 동일하다고 보면된다. 다만, 추가로 링크만 조금 수정해주면 될 뿐이다.
-
헤더 제목 문자열을 복사하고 (문단의 주소)에 복사한다.
https://hyunsang4072.github.io/language/syntax/#markdown%EC%97%90%EC%84%9C%EC%9D%98-images2-different-ways -
특수 문자를 제거하고 원하는 헤더의 이름이랑 맞춰준다.
https://hyunsang4072.github.io/language/syntax/#markdown에서의-images2-different-ways -
공백을 -로 변경한다.
https://hyunsang4072.github.io/language/syntax/#markdown에서의-images2-different-ways -
대문자는 소문자로 변경한다.
1~4 스텝을 마친 후 모습:
[Image Header로 이동](https://hyunsang4072.github.io/language/syntax/#markdown에서의-images2-different-ways)
Tip: You could emphasize your links by adding **(asterisks).
HTML in Markdown
Markdown이라고 해서 Markdown syntax나 기능만 고집해야 되는 것은 절대 아니다. 원한다면 HTML 태그들도 같이 사용해줄수 있다!(and other languages supported by your editor)
This **word** is bold. This <em>word</em> is italic.
HTML도 쓰고 Markdown도 쓰고 코딩하는 본인에게 더 편한 스타일로 맞춰가면 된다.
Tip: 이 포스트를 작성하면서 방금 깨닫게 되었는데 VS Code 사용자 분들은 원하는 텍스트를 선택해놓고(드래그) Ctrl 키하고 같이 B나 I를 눌러주면 B는 Bold, I는 Italics를 쓸수 있다.
This **word** is bold. This <em>word</em> is italic.
This word is bold. This word is italic.
Extended Syntax
Tables
To add a table, use three or more hyphens --- to create each column’s header, and use pipes ( |
) to separate each column. For compatibility, you should also add a pipe on either end of the row. |
쉽게 말해서 테이블의 틀을 키보드의 문자로 표현한다고 생각해보면 될것 같다.
--- 를 기준으로 그 위는 Header(제목), 아래는 Body(값, 수치 등등).
| 키로 column을 나눌 수 있다. | 키는 Shift + Enter위에 있는 키(backslash) 를 눌러서 사용할수 있다. 컴퓨터(or 노트북)마다 키보드 위치등이 다를 수 있으니 본인의 환경에 맞춰서 사용하도록 하자.
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
위의 코드는 아래의 테이블을 만들어 낸다.
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
Alignment(정렬)
: 를 왼쪽, 양쪽, 오른쪽에 위치시킬 수 있으며 각각 왼쪽정렬, 가운데정렬, 우측정렬을 만든다. ---로 지정되어있는 row에서 사용한다.
| 제목 | 장르 | 내용 |
| ---: | :--- | :---: |
| 탑건 Top Gun | AAA | 비행기가 아닌 전투기 |
| 토르 | B | 망치는 해머 |
| Witch2 마녀2 | CCCCC | 여주인공분이 이쁨 |
Tip: Table을 만들다 보면 틀이 좀 지저분해질수가 있는데 결과는 같다.
| 제목 | 장르 | 내용 |
|---|---|---|
| 탑건 Top Gun | AAA | 비행기가 아닌 전투기 |
| 토르 | B | 망치는 해머 |
| Witch2 마녀2 | CCCCC | 여주인공분이 이쁨 |
Table 안의 Text 수정에 대해서:
-
사용 가능: links, code (
`로 감싼 code만 가능, code blocks 안됨), bold, italics. -
사용 불가: headings, blockquotes, lists, horizontal rules, images, or most HTML tags.
Backticks(`) 정리
: 3개는 Code block용
` : 2개는 Backticks 안에 Backticks 쓸때
` `` : 1개는 Code용
사용자의 용도에 따라 flexible 하게 쓰면 될것 같다.
Footnotes
한국말로 각주 라고 한다.
글을 쓰다가 어떠한 단어나 문장에 대한 상세 설명을 따로 본문에 지장이 안가게하면서 쓸수 있게끔 도와준다고 보면 된다.
사용자가 각주를 클릭하면 링크로 연결되 페이지의 가장 아래로 내려가(foot) 해당 각주에 맞는 글쓴이의 설명을 확인할 수 있다.
각주를 사용하기 위해서는:
[^numbers or words here]를(Identifier라고 한다) 사용해 링크를 만들어주고- 예시
C language.[^1] - 숫자와 단어로만 구성; spaces 및 tabs 사용 불가
- 예시
- 만들어준 Identifier를
:을 사용해 설명과 연결시켜주면 된다.- 예시
[^1]: Programming language. - footnote 설명은 lists, blockquotes, and tables를 제외한 어디든지 와도 상관없다.
- 예시
I love CS.[^1]
[^1]: Computer Science의 약자
I love CS.1
주의: 각주(footnotes) 처리된 텍스트의 링크를 눌렀을때 해당 글 페이지 가장 하단으로 이동하게된다. 당황하지 말자.
Heading IDs
약간 더 deep한 내용인데 Markdown으로만 원하는 모든것들을 자신의 웹사이트에 표현할수 있으면 좋겠지만, 가끔은 다른 언어의 도움을 받는것도 좋다.
예를들어 우리는 Markdown에서 # 기호를 사용해 Header를 사용하는 법을 배웠었다.
이 Header를 꾸미고 싶다면 어떻게 할까?
또 다른 프로그래밍 언어인 CSS(Cascading Style Sheets)를 사용해 Header를 더 이쁘게 꾸밀수가 있다.
여기서 CSS를 이용하기 위해 Header에 Custom ID를 부여해 CSS에서 해당 Header만 꾸밀수 있게 해줄수 있다.
(이 부분이 이해가 안된다면 HTML과 CSS를 간단하게 다루는 연습이나 아니면 관련 동영상이나 글들을 훑어보는 것을 추천한다. 마스터 해오라는것은 아니다.)
사용하는 방법은 Header와 같은 줄에 {}안에 #커스텀-ID를 써주면 된다.
커스텀-ID는 사용자 마음대로 정해주면 된다. 짧고 간략하게 짓는걸 추천!
Markdown 문법:
### My Great Heading {#custom-id}
HTML 문법:
<h3 id="custom-id">My Great Heading</h3>
약간의 차이점이 있지만 둘다 결국 Header에 id를 부여하는 것이다.
Definition Lists
개인적으로 잘 안쓸것 같기는 하지만 혹시 모르니 짧게 설명해야겠다.
List의 한 종류로 이름 그대로 의미를 정정할수 있는 리스트다.
사용법은 원하는 단어나 문장을 평소처럼 써주고 해당 단어/문장의 definition을 다음 줄에 :과 함께 써주면 된다.(: 다음에 띄어쓰기)
Markdown
: a programming language
C
: another programming language
: low-level
- Markdown
- a programming language
- C
- another programming language
- low-level
Task lists (also referred to as checklists and todo lists)
일반 리스트와 거의 비슷하지만 Task list는 checkbox가 옆에 붙는다.
- [ ] Have a life
- [x] Update a post
- [ ] Be productive
- Have a life
- Update a post
- Be productive
주의할점: [ ] 대괄호 사이에 공백을 줘야지만 정상적으로 작동된다.
Emoji(2 different ways)
두 방법 중 본인의 preference에 따라 알맞게 사용하면 될듯 하다.
- Copying and Pasting Emoji(복사/붙여넣기)
- Emojipedia
- Use the website above to use emoji.
- 근데 모든 emoji가 정상적으로 사용되지는 않는것 같다. (깨짐 현상 있음)
- Emojipedia
- Using Emoji Shortcodes
- insert emoji by typing emoji shortcodes
- 형식:
:이모티콘: - Lists of shortcodes for emoji
예시:
:tent:–> :tent: - 이것도 마찬가지로 깨지거나 사용이 안되는 emoji들이 드물게 있음.
Highlight(하이라이트)
말그대로 강조할때 쓸수있는 하이라이트 기능이다.
사용법은 간단하다. 원하는 Text 양쪽을 ==로 감싸주면 된다.
==Highlighted Text==
==Highlighted Text==
Subscript
Subscript란? H~2~O에서 ~2~와 같이 일반 글자보다 작고 아래에 있는 문자나 숫자를 의미한다.
사용법은 Subscript를 적용할 Text의 양쪽을 ~으로 감싸주면 된다.
H~2~O
H~2~O
Superscript
Superscript란? X^2^에서 ^2^와 같이 일반 글자보다 작고 위에 있는 문자나 숫자를 의미한다.
사용법은 Superscript를 적용할 Text의 양쪽을 ^으로 감싸주면 된다.
X^2^
X^2^
-
Computer Science의 약자 ↩
Leave a comment