whatisthis?

GitHub Markdown Tutorial 본문

WEB STUDY/ETC.

GitHub Markdown Tutorial

thisisyjin 2021. 9. 24. 13:38

 

https://www.markdowntutorial.com/

 

Markdown Tutorial

Markdown is a way to write content for the web. It’s written in what people like to call “plaintext”, which is exactly the sort of text you’re used to writing and seeing. Plaintext is just the regular alphabet, with a few familiar symbols, like ast

www.markdowntutorial.com

마크다운(Markdown)은 웹의 콘텐츠를 쓰는 방법 중 하나입니다. 마크다운은 “평문(plaintext)”으로 구성되어 있습니다. 평문이란 우리들이 쓰고 보는 것에 익숙해져 있는 종류의 텍스트입니다. 평문은 일반적인 한글(or 알파벳)일 뿐이며, 다음과 같은 몇 개의 친숙한 기호를 가지고 있습니다. 별표(asterisks) (* )와 백틱스(backticks) ( ` ).

 

 

 

** Markdown은 Markup language의 일종.

마크업 언어(Markup Language)는 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종 (데이터를 기술한 언어) 
마크다운은 온갖 태그로 범벅된 HTML (마크업 언어) 등과 달리, 읽기도 쓰기도 쉬운 문서 양식을 지향함.

 

 

1. 이탤릭체 볼드체

 

_문자_ 이탤릭체
**문자** 볼드체
**_문자_** 이탤릭체 + 볼드체
(순서는 상관 x)

 

___

 

 

2. 헤더

 

h1부터 h6까지 샵(#)의 개수로 나타냄

해쉬 마크(#)를 문단 앞에 사용

** 헤더에 볼드체를 입힐 순 없지만, 특정 단어에 이탤릭체는 사용할 수 있음.

 

 

___

 

 

3. 링크

-www(world wide web)의 다른 웹사이트에 링크하는 방법

인라인 링크 링크할 텍스트를 대괄호( [ ] )로 싼 다음,
링크할 주소를 소괄호로( ( ) )로 감싸기.
예> [GitHub 방문!](www.github.com)
참조 링크 실제로 문서 내의 다른 위치에 대한 참조.
변수 선언하듯이 하는 느낌.
[변수명]:www.주소
예> [참조 링크1]: www.github.com

** 링크된 텍스트에 볼드체를 추가 가능. 

** 헤더에도 링크를 만들 수 있음. 

 

참조 링크 예

우선 [ ] 안에 변수같이 써놓고 아래에서

[참조 링크1]: www.github.com 과 같이 작성해주면 된다.

** 대괄호로 묶은 참조 태그를 작성하고 그 다음에 콜론, 그 다음에 링크할 주소를 작성

 

 

___

 

 

4. 이미지

- 링크에다가 앞에 ! 붙인 것.

 

인라인 이미지 링크 느낌표를 입력하고 ( ! ),
대괄호로 [ ] 대체 텍스트(Alt Text)를 감싼 다음,
소괄호로  ( )  링크를 감싸면 됨.
![Benjamin Bannekat](https://octodex.github.com/images/bannekat.png)
참조 이미지 링크 문장 앞에 느낌표를 사용 후 대체 텍스트에 대괄호를 사용하고 이미지 태그에 대괄호를 사용
+) 이미지 태그에 참조링크처럼 변수로 선언하듯이.
![The founding father][Father] 입력 후
하단에서 [Father]: http://octodex.github.com/images/founding-father.jpg

** 대체 텍스트는 시각 장애인들을 위한 문단 혹은 문장. html의 경우 img태그의 alt 속성임.

** 대괄호로 묶은 참조 태그를 작성하고 그 다음에 콜론, 그 다음에 링크할 주소를 작성

 

 

참조 이미지 링크 예>

![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

 

___

 

 

5. 인용문 (Block Quotes)

 

- 문장 앞에 "~보다 큰" 의미를 가진 캐럿 기호 (>) 붙임. 

 

 

 

 

** 인용문의 각 줄에 캐럿 기호를 배치할 수도 있음.

(각 라인에 캐럿 기호를 넣어서 모든 인용할 부분을 하나의 인용문으로)

 

** 인용문 내에서 이탤릭체, 이미지, 링크와 같은 다른 마크다운 요소도 사용 가능!

 

 

___

 

6.. 리스트

 

순서가 매겨지지 않은 것(unordered) = ul
= 별표(*)로 된 리스트
리스트의 각 항목에 별표( * )를 앞에 붙여줌.
순서가 매겨진 것(ordered) = ol
= 숫자로 된 리스트
별표(*)대신에 숫자를 붙이면 됨.
 (1. 2. 3. 과 같이)

** 리스트 안에 이탤릭체, 볼드체, 링크를 추가할 수 있음.

 

** 리스트에 다른 리스트를 겹쳐서 만들 수 있음 (공백 한 칸 을 별표(*) 앞에 더 들여놓으면 됨.)

-> 하위 리스트는 대개는 3단계까지만 사용하는 것이 좋음.

리스트 들여쓰기 예시

 

___

 

 

7.  단락 (Paragraph)

 

줄 나눔 (soft breaks) 줄의 끝에 2번의 공백을 넣음 (스페이스 두번)
단락 나눔 (hard breaks) 개행을 강제로 넣음 (엔터 두번) -> 글의 흐름이 깨지게 됨 

 

- 줄 나눔(soft breaks)의 일반적인 용도는 리스트 내에서 단락을 포맷하는 것

 

 

___

 

 

8. 마무리