[Github]Markdown 작성법

How to write Markdown?🤔

Github에서는 Markdown Editor를 지원하고 있습니다.
레포지를 작성하거나 이슈에 글을 남길 때 HTML tag를 늘 사용하는데 불편했습니다..😂
김 버그 CSS, HTML강의를 듣는 과정 중 Markdown 튜토리얼을 발견하게 되었고
공부해두면 전보다 능률적이고 이쁜 레포지를 작성 할 수 있을 것 같습니다 😍

 

---

🌲이탤릭체와 볼드체

텍스트 형식에 대한 두 가지 기본 요소인 이탤릭체 와 볼드체에 대해 알아보겠습니다.

 

🌱이탤릭체(_이탤릭체_)

마크다운으로 이탤릭체 를 사용하기 위해서 여러분은 글자의 바깥쪽에 밑줄(_)을 추가하면 됩니다.
예를 들어, _이것_은 이탤릭체 가 됩니다.

Writing in Markdown is _not_ that hard!

➡ Writing in Markdown is not that hard!

🌱볼드체(**볼드체**)

비슷하게, 마크다운에서 볼드체를 사용하기 위해서, 여러분은 글자의 바깥쪽에 별표( ** )를 추가하면 됩니다.
**정말** 이런식으로요.

I **will** complete these lessons!

➡I will complete these lessons!

 

🌱볼드체&&이탤릭체(**_볼드체&&이탤릭체_**)

마지막으로 볼드체와 이탤릭체를 모두 적용한 단어를 만들 것입니다.
일반적으로 별표와 밑줄을 어느 순서로 배열하든지 상관없습니다.
(별표를 **_바깥쪽에_** 배치하여 좀 더 읽기 쉽게 만들어주세요.)

If you're thinking to yourself, **_This is unbelievable_**, you'd probably be right.

➡If you're thinking to yourself, This is unbelievable, you'd probably be right.

---

🌲헤더(header)

헤더는 웹사이트, 잡지 기사, 공지사항에 자주 사용되어 한 구획에 대한 이목을 끌도록 합니다.
이름에서 알 수 있듯이, 헤더는 한 구획에서 제목이나 부제로 사용됩니다. 헤더는 6가지 타입이 존재합니다.
사이즈 순으로:

이것은 헤더 1입니다

이것은 헤더 2입니다

이것은 헤더 3입니다

이것은 헤더 4입니다

이것은 헤더 5입니다
이것은 헤더 6입니다

마크다운에서 헤더를 만들기 위해, 여러분은 해쉬 마크(#)를 문단 앞에 사용하면 됩니다.
여러분은 여러분이 원하는 헤더 사이즈 크기만큼 해쉬 마크 개수를 늘려 사용하면 됩니다.

예를 들어, 헤더 1을 사용하기 위해 해쉬 마크(# 헤더 1)를 한 개 사용할 수 있습니다.
헤더 3을 사용하기 위해 해쉬 마크(### 헤더 3)를 세 개를 사용할 수 있습니다.

# Header one ##Header two ###Header three ####Header four #####Header five ######Header six

➡Header one

Header two

Header three

Header four

Header five

Header six

 

---

어떤 헤더를 사용해야 적절한 지는 여러분에게 달렸습니다. 일반적으로, 헤더 1과 헤더 6은 조금 사용되어야 합니다.
헤더에 볼드체를 입힐 순 없지만, 특정 단어에 이탤릭체는 사용할 수 있습니다.
아래 입력 창에서, 첫 번째 줄을 헤더 4로,
책의 이름("One Hundred Years of Solitude", "One Hundred Years...")을 이탤릭체로 만들겠습니다..

####Colombian Symbolism in _One Hundred Years of Solitude_ Here's some words about the book _One Hundred Years..._.

➡Colombian Symbolism in One Hundred Years of Solitude

Here's some words about the book One Hundred Years....

---

🌲링크(Links)

www(world wide web)의 다른 웹사이트에 링크하는 방법을 배울 것입니다.
마크다운에는 두 가지 링크 유형이 있지만, 두 링크 유형 모두 정확히 같은 방식으로 렌더링 됩니다.

---

1. 첫 번째 링크 스타일은 인라인 링크입니다.

인라인 링크를 만들기 위해선
1. 링크할 텍스트를 대괄호( [ ] )로 싼 다.
2. 링크할 주소를 소괄호로( ( ) )로 감싸면 된다.
예를 들어, Github 방문! 이란 텍스트에 www.github.com로 링크되는 하이퍼링크를 만들고자 하면,
여러분은 마크다운으로 이렇게 작성하면 됩니다.
[GitHub 방문!](www.github.com).

[Search for it.](www.google.com)

➡ Search for it.

➕볼드체 추가 가능

[You're **reallly, reallly** going to want to see this.](www.dailykittten.com)

➡ You're really, really going to want to see this.

➕헤더에도 링크를 만들 수 있다.

####the Latest From [the BBC](www.bbc.com/news)

➡The Latest News from the BBC

---

2. 두 번째 링크 타입은 참조 링크입니다.

다른 링크 타입은 참조 링크입니다.
이름에서 알 수 있듯이, 참조 링크는 실제로 문서 내의 다른 위치에 대한 참조를 나타냅니다.
여기 예제가 있습니다.

 여기에 [태그 1][참조 링크1]가 있습니다. 여기에 [태그 2][참조 링크2]가 있습니다. 앗, [태그 3][참조 링크1]도 있었네요. [참조 링크1]: www.github.com [참조 링크2]: www.google.com

"참조"는 위에서 두 번째로 나타나는 대괄호들을 의미합니다. ([참조 링크 1]와 [참조 링크2]).
이 대괄호들은 마크다운 문서 하단에 외부 웹 사이트에 대한 적절한 링크로 정의됩니다.
참조 링크 스타일의 장점은 같은 장소에 대한 다중 링크는 한 번만 업데이트하면 된다는 것입니다.(재활용성)
예를 들어 [참조 링크1] 링크를 모두 다른 사이트로 이동시키기로 했다면 우리는 하나의 참조 링크만 변경하면 됩니다.
렌더링 된 마크다운에는 참조 링크가 나타나지 않습니다.

참조 링크를 정의하는 방법
1. 대괄호로 묶은 참조 태그를 작성
2. 태그 뒤에 콜론
3. 링크할 주소를 작성하면 됩니다.
[Hello world]: www.hello_world.com

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.com <!--[a fun place],[another fun place] 뒤에있는 링크를 한번만 업데이트하면 전체적으로 다 바뀐다. 마치 자바스크립트에서 변수 설정해주는 것과 비슷한 개념이라 생각한다-->

➡Do you want to see something fun?
Well, do I have the website for you!

---

🌲이미지(Images)

여러분이 마크다운에서 링크를 사용할 줄 안다면, 이미지도 사용할 수 있습니다.
그 이유는 두 문법이 거의 동일하기 때문입니다.
이미지 또한 두 가지 타입이 존재합니다. (링크처럼 두 타입 모두 렌더링 되는 방식은 같습니다.)
이때, 링크와 이미지의 차이는 이미지는 앞에 느낌표(! )를 사용합니다.

---

1. 첫 번째 이미지 타입은 인라인 이미지 링크라 부릅니다.

인라인 이미지 링크를 사용하기 위해
1. 느낌표를 입력(! )
2. 대괄호로 ( [ ] ) 대체 텍스트(Alt Text)를 감싼다.
3. 소괄호로 ( ( ) ) 링크를 감싸면 됩니다. (대체 텍스트는 시각 장애인들을 위한 문단 혹은 문장입니다.)

예를 들어, https://octodex.github.com/images/bannekat.png에 대한 이미지 링크와
Benjamin Bannekat란 대체 텍스트를 생성하려 할 때, 여러분은 마크다운에서 이렇게 사용하시면 됩니다.

![Benjamin Bannekat](https://octodex.github.com/images/bannekat.png).

❗비록 여러분이 대체 텍스트를 필요로 하지 않아도,
시각 장애가 있거나, 스크린 리더를 사용하거나, 고속 인터넷 연결이 없는 사람들을 포함하여
여러분의 청중들이 여러분의 콘텐츠에 접근할 수 있게 할 것입니다.

이때는 문장 앞에 느낌표를 사용 후 대체 텍스트에 대괄호를 사용하고
이미지 태그에 대괄호를 사용하면 됩니다, (하단 코드)

![The founding father][Father]

마크다운 페이지 맨 하단에 이미지 태그를 정의하면 됩니다. (하단 코드)

[Father]: http://octodex.github.com/images/founding-father.jpg.

예시

![Black cat][Black] ![Orange cat][Orange] [Black]: https://upload.wikimedia.org/wikipedia/commons/a/a3/81_INF_DIV_SSI.jpg [Orange]:http://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/256/22221-cat-icon.png

---

🌲인용문(Blockquotes)

만일 여러분이 다른 출처의 인용문을 언급하거나 잡지 기사의 인용문을 디자인해야 한다면,
마크다운의 인용문 (blockquote) 구문이 유용할 것입니다.

인용문은 독자들의 주의를 끌기 위해 특별히 포맷된 문장 또는 단락입니다.

"아무것도 하지 않는 죄는 일곱 가지 죄 중에서 가장 치명적이다. 악한 사람이 목적을 달성하려면 선한 사람은 아무것도 하지 말아야 한다고 말해 왔다."

 

인용문을 사용하기 위해서, 문장 앞에 "~보다 큰" 의미를 가진

캐럿 기호(>)만 붙여주면 됩니다.

 

I read this interesting quote the other day: >"Her eyes had called him and his soul had leaped at the call. To live, to err, to fall, to triumph, to recreate life out of life!"

각 줄에 캐럿 기호를 배치할 수도 있습니다.
이것은 여러분의 인용구가 여러 단락에 이르는 경우에 특히 유용합니다.

 

> 그의 말은 그 자신의 천성적으로 어떤 깊은 화음에 부딪친 것 같았다. 그는 자기 자신에 대해, 있는 그대로 또는 되고 싶은 대로 말하였는가? 스티븐은 잠시 동안 말없이 그의 얼굴을 지켜보았다. 차가운 슬픔이 그곳에 있었다. 그는 자신에 대해, 그가 두려워하는 외로움에 대해 이야기했다. > > —누구한테 말하는 거야? 스티븐이 길게 물었다. > > 크랜리는 대답하지 않았다.

❗빈 줄에도 캐럿 기호를 포함시켜야 한다는 것에 주목해주세요.
이렇게 하면 전체 인용문들이 다 함께 그룹화됩니다.

 

>Once upon a time and a very good time it was there was a moocow coming down along the road and this moocow that was coming down along the road met a nicens little boy named baby tuckoo... > >His father told him that story: his father looked at him through a glass: he had a hairy face. > >He was baby tuckoo. The moocow came down the road where Betty Byrne lived: she sold lemon platt.

➕인용문 내에서 이탤릭체, 이미지, 링크와 같은 다른 마크다운 요소도 사용할 수 있습니다.

---

🌲리스트(List)

리스트 타입은 보통 2가지가 존재합니다.
1. 순서가 매겨지지 않은 것(unordered) = HTML tag <ul>
2. 순서가 매겨진 것(ordered) = HTML tag <ol>
별표(*)로 된 리스트와 숫자로 된 리스트가 존재한다고 말씀드리는 게 더 적절한 거 같네요.

---

1. 순서가 매겨지지 않은 리스트 타입(unordered)

순서가 매겨지지 않은 리스트를 생성하기 위해 여러분은
리스트의 각 항목에 별표( * )를 앞에 붙여주면 됩니다.
또한 각 항목은 자신의 라인을 가지고 있어야 합니다.

* 우유 * 계란 * 연어 * 버터

• 우유
• 계란
• 연어
• 버터

2. 순서가 매겨진 리스트 타입(ordered)

순서가 매겨진 리스트는 별표(*) 대신에 숫자를 붙이면 됩니다.

1. 보울 위에 계란 세 개를 깨뜨린다
2. 우유 3.7L를 보울에 붓는다
3. 버터를 힘차게 연어를 문지른다
4. 연어를 우유, 계란을 쏟은 보울에 넣는다

1. 보울 위에 계란 세 개를 깨뜨린다 2. 우유 3.7L를 보울에 붓는다 3. 버터를 힘차게 연어에 문지른다 4. 연어를 우유,계란을 쏟은 보울에 넣는다

➕여러분은 리스트 안에 이탤릭체, 볼드체, 링크를 추가할 수 있습니다.

---

❗🌱심화

때로는 좀 더 깊이 있는 리스트를 만들거나, 리스트에 다른 리스트를 겹쳐서 만들 수도 있습니다.
여러분이 해야 할 것은 앞의 항목보다 공백 한 칸 을 별표(*) 앞에 더 들여놓으면 됩니다.

* 틴틴 * 기자 * 얼간이 같은 주황색 머리 * 세상에서 제일 멋진 개와 친구들 * 햅덕 * 선장 * 멋진 턱수염 * 위스키 좋아함 * 아마 스카치도?

• 틴틴
  • 기자
  • 얼간이 같은 주황색 머리
  • 세상에서 제일 멋진 개와 친구들
• 합덕
  • 선장
  • 멋진 턱수염
  • 위스키 좋아함
    • 아마 스카치도?

❗여러분이 무한적으로 하위 리스트를 추가할 수 있지만, 대개는 3단계까지만 사용하는 것이 좋습니다.
그렇지 않으면, 여러분의 텍스트는 엉망진창이 될 것입니다.

---

🌲단락을 다루는 법

여러분이 어떤 내용들이 추가될 순서가 매겨지지 않은 리스트를 생성한다고 가정해봅시다.

(하단의 하늘색 배경이 칠해진 글은 예시입니다.)

 

1. 보울에 계란 3개를 깨뜨린다.

여러분은 흘리지 않고 계란을 깨뜨리고 싶을 거예요.
만약 여러분이 좀 흘렸으면, 휴지를 사용해 닦아주세요!
2. 우유 3.7L를 보울에 붓는다.
기본적으로 위와 같은 가이드를 갖습니다: 흘리지 마세요. 흘렸으면 깨끗이 닦아주세요!
3. 버터를 힘차게 연어에 문지른다.
"힘차게"란 말은 수직 운동을 의미합니다. 제 아이 줄리아가 한 때 그리 말했어요.

위아래로 이리저리 버터를 연어에 문질러주세요

4. 연어를 우유, 계란을 쏟은 보울에 넣는다.
여기에 연어를 잘 떨어뜨리니 몇 가지 기술이 있습니다.

• 주변에 송어나 어린아이가 있는지 확인하세요.
• 양손을 사용하세요.
• 떨어뜨릴 상황을 대비하여 주변에 휴지를 놔두세요.

1. 보울에 계란 3개를 깨뜨린다. 여러분은 흘리지 않고 계란을 깨뜨리고 싶을거에요. 만약 여러분이 좀 흘렸으면, 휴지를 사용해 닦아주세요! 2. 우유 3.7L를 보울에 붓는다. 기본적으로 위와 같은 가이드를 갖습니다: 흘리지 마세요. 흘렸으면 깨끗히 닦아주세요! 3. 버터를 힘차게 연어에 문지른다. "힘차게"란 말은 수직 운동을 의미합니다. 제 아이 줄리아가 한 때 그리 말했어요. > 위 아래로 이리저리 버터를 연어에 문질러주세요. 4. 연어를 우유,계란을 쏟은 보울에 넣는다. 여기에 연어를 잘 떨어뜨리는 몇가지 기술이 있습니다: * 주변에 송어나 어린아이가 있는지 확인하세요. * 양손을 사용하세요. * 떨어뜨릴 상황을 대비하여 주변에 휴지를 놔두세요.

❗1번 항목의 하위 두 항목이 하나의 빈 공간(one space)을 가졌다는 것에 주목해주세요.
이것은 약간 이상해 보일 수도 있으니, 여러분은 글자에 맞게 적절히 들여 쓰기 하시면 됩니다.(3번, 4번 항목처럼요)
➕이 단락에서 여러분은 인용문, 다른 리스트 등 모든 종류의 마크다운 요소를 포함시킬 수 있습니다!

---

🌲단락(Paragraphs)

마크다운은 단락을 포맷하는 몇 가지 방법이 있습니다.
몇 줄의 시로 예를 들어볼게요. 여러분이 이런 형태의 글을 쓰기 원한다고 해봅시다:

나는 나 자신과 모순되는가? 그렇다면 아주 잘되었다… 나는 나 자신과 모순이다, (나는 크다… 나는 다량의 것을 품고 있다.)

여러분은 각 구절마다 자신의 라인을 가지면 문제가 해결될 거라 생각할지 모릅니다.
하지만 생각과는 다르게 마크다운은 단순히 하나의 직선으로 렌더링 합니다

나는 나 자신과 모순되는가? 그렇다면 아주 잘되었다… 나는 나 자신과 모순이다, (나는 크다… 나는 다량의 것을 품고 있다.)

 

📢문단 나눔(hard breaks)

이것은 문단 나눔이라 불립니다.

만약 여러분이 개행을 강제로 넣으면, 결합이 깨지게 됩니다.

나는 나 자신과 모순되는가? 그렇다면 아주 잘되었다… 나는 나 자신과 모순이다, (나는 크다… 나는 다량의 것을 품고 있다.)

 

📢줄 나눔(soft breaks)

우리의 시에서 요구하는 건 줄나눔입니다.

여러분은 각 줄의 끝에 2번의 공백을 넣음으로(스페이스 2번) 줄 나눔을 할 수 있습니다.
공백은 눈에 보이지 않아 실제로 보기는 어렵지만, 이렇게 보일 수 있습니다.

나는 나 자신과 모순되는가?·· 그렇다면 아주 잘되었다… 나는 나 자신과 모순이다,·· (나는 크다… 나는 다량의 것을 품고 있다.)

각 점( · )은 키보드의 스페이스를 나타냅니다

 

해당 코드 작성 및 정보는 이 튜토리얼에서 가져왔습니다