Markdown
Markdown
Markdown?
마크다운이란 텍스트 기반의 마크업 언어로 2004년에 만들어졌다고 한다.
특수기호와 문자를 이용해 하나의 문서를 만들어 낼 수 있는 언어이다. 쉽게 배울수 있다는 장점이 있다.
단점으로는 표준이 없고(마크다운 문법을 활용하는 환경에 따라서 어떤 문법은 적용될 수도 있고 아닐 수도 있어서 작성한 문서가 다른 곳에서는 다른 모양이 될 수 있다.
주로 사용되는 곳이 웹이기 때문에 마크업은 HTML로 변환되는데 모든 HTML을 마크업으로 대체할 수 없다는 한계를 가진다. 그래서 HTML코드를 섞어서 작성하는 방법을 사용할 수도 있다.
한 번 배워놓으면 여러모로 유용하다. 슬랙이나 에버노트같은 프로그램에서 사용할 수 있고 특히 리드미를 멋있게 작성할 수 있다.
기본 문법들
제목(헤딩)
# 제목1 ## 제목2 ### 제목3 #### 제목4 ##### 제목5 ###### 제목6
# 제목1
## 제목2
### 제목3
#### 제목4
##### 제목5
###### 제목6
이들은 웹에서 보여질 때 각각 HTML의 h1~h6태그로 대치된다.
제목에 해당하는 내용은 다음과 같이 작성하면 된다.
문장
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, voluptas officia, reiciendis fuga nostrum maxime ipsum iure alias, cum in eveniet id tempora pariatur fugit magni molestias non? Corrupti, obcaecati.
제목과 본문 사이에 한줄 공백을 넣어주면 된다.
# 제목
본문
완성된 결과를 보면 우리가 코드 에디터에서 작성한 것과 다르게 나올 수 있다. 특히 줄바꿈. HTML에서와 마찬가지로 줄바꿈을 명시하지 않으면 줄바꿈되지 않는다.
줄바꿈
두가지 방법이 있는데 하나는 띄어쓰기를 두 번하는 것이고 다른 하나는 HTML의 br태그를 사용하는 것이다.
출력되는 환경에 따라서 띄어쓰기 두번은 인식되지 않는경우가 있다.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Neque, voluptas officia,reiciendis fuga nostrum maxime ipsum iure alias, cum in eveniet id tempora pariatur fugit magni molestias non? Corrupti, obcaecati.
Lorem ipsum dolor sit amet, consectetur<br>
adipisicing elit. Neque, voluptas officia,reiciendis fuga nostrum maxime ipsum iure alias, cum in eveniet id tempora pariatur fugit magni molestias non? Corrupti, obcaecati.
강조
이텔릭
언더바 두개를 적고 그 사이에 단어를 적으면 이텔릭체가 적용된다.
_이텔릭_
두껍게
별표 두개 + 단어 + 다시 별표 두개를 사용하면 두껍게 처리된다.
**두껍게**
취소선
물결 두개 + 단어 + 다시 물결 두개를 사용하면 취소선이 그어진다.
~~취소선~~
밑줄
HTML을 사용하는 것처럼 u태그를 만들고 그 안에 텍스트를 넣으면 된다.
<u>밑줄</u>
목록
숫자. 숫자가 필요한 목록 처럼 작성하면 리스트가 생긴다. 신기한점은 숫자를 그냥 ‘1’ 만 가지고도 자동으로 숫자가 늘어나며 작성된다는 것이다.
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
그리고 리스트 안에 리스트를 넣는 경우도 많은데 사용하는 방법은 리스트의 안에 4칸 띄어쓰기를 하고 다시 리스트를 작성하면 된다.(들여쓰기)
그리고 순서가 필요하지 않은 목록을 작성하는 방법은 다음과 같다. 하이픈(키보드에서 마이너스 기호) + 띄어쓰기 한칸을 사용하면 된다. 리스트와 마찬가지로 목록 안에 목록을 넣을 수도 있다. 그리고 하이픈대신 * 기호를 사용할 수도 있다.
- 순서가 필요하지 않은 목록 ```
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록 ```
링크
두가지 방법이 존재한다. HTML의 a태그를 사용하면 된다.
<a href="">텍스트</a>
다른 방법은 대괄호 사이에 텍스트를 적고 괄호를 적고 그 안에 링크를 적으면 된다.
[텍스트](링크)
그리고 링크를 클릭했을 때 현재 창에서 이동할 수도 있고 아래의 속성을 추가해서 새 탭에서 열리게 할 수도 있다.
<a href="" target="_blank">텍스트</a>
이미지
기본적인 생김새는 링크와 같지만 맨앞에 느낌표를 추가해주면 이미지가 나온다.
![]()
하나의 팁으로는 만약 깃허브에 올릴 마크다운 파일을 작성할 때 이미지를 넣고싶다면 프로젝트에 이미지파일을 추가하는 것보다 깃허브의 이슈 탭에 들어가서 새로운 이슈를 만들고 이미지 파일을 드래그 앤 드롭한다.
이렇게 하면 이미지 태그가 하나 생성되는데 이 것을 복사해서 붙여넣기하면 이미지를 쉽게 업로드할 수 있다.
이미지에 링크를 거는 것도 가능한데
일단 링크를 만들고 대체 택스트에 이미지를 넣어준다.
이런식으로
[](링크)
인용문
대충 이렇게 적으면 명언처럼 보인다.
대충 이렇게 적으면 명언처럼 보인다.
인용문을 중첩해서 사용할 수도 있다.
대충 이렇게 적으면 명언처럼 보인다.
아마도
이렇게
> 대충 이렇게 적으면 명언처럼 보인다.
>> 아마도
>>> 이렇게
인라인 코드 강조
background
백틱(Esc 아래)을 앞뒤에 붙이면 된다.
`background`
vs코드에서 간단하게 사용하려면 드래그하고 백틱 한 번만 눌러주면 된다.
블록 코드 강조
백틱기호를 3번 넣어주고 입력할 프로그래밍 언어를 입력할 수 있다.
그리고 엔터한번 눌러서 줄바꿈 해준다음 코드를 작성하면 된다.
-java
코드
-
이런 구조
//이러면 알아서 내가 적은 언어에 맞게 적절히 강조표시를 해준다.
Class Hello() {
public String sayHi() {
return "Hello World!!"
}
}
테이블
| 값 | 의미 | 기본값 |
|---|---|---|
| static | 기준 없음 | 0 |
| relative | 요소 자신 | X |
| absolute | 위치상 부모 요소 | X |
| fixed | 뷰포트 | X |
값 | 의미 | 기본값
--|--|--
static | 기준 없음 | 0
relative | 요소 자신 | X
absolute | 위치상 부모 요소 | X
fixed | 뷰포트 | X
이렇게 작성하면 된다. 그냥 특수기호로 테이블을 만들어주는 느낌이다.
텍스트 정렬도 가능하다.
| 값 | 의미 | 기본값 |
|---|---|---|
| static | 기준 없음 | 0 |
| relative | 요소 자신 | X |
| absolute | 위치상 부모 요소 | X |
| fixed | 뷰포트 | X |
값 | 의미 | 기본값
:--|:--:|--:
static | 기준 없음 | 0
relative | 요소 자신 | X
absolute | 위치상 부모 요소 | X
fixed | 뷰포트 | X
기본은 왼쪽 정렬이고 상단에 콜론을 이용해서 정렬 방향을 정할 수 있다.
이렇게 직접 테이블을 작성할 수도 있지만 사이트를 이용해도 된다.
수평선
하이픈 기호를 세번 입력하거나 * 그리고 _ 을 사용해도된다.
---
***
___
목차
목차는 일반 링크를 사용하듯이 []()을 사용하며 괄호 안에는 #(제목) 형식으로 작성해주면 된다. 주의해야할 점은 괄호안에 제목을 소문자로 적어야하며 제목에 띄어쓰기가 있다면 하이픈 기호를 사용해야한다.
1.많이들
2.읽어주세요
3.Please
[1.많이들](#클릭하면-어디로-갈까)<br>
[2.읽어주세요](#나도-모르겠다)<br>
[3.Please](#please)
원시 HTML
일반적인 HTML코드를 사용하면 된다.
스타일을 입력해서 이미지의 크기를 지정하는 것도 가능하다.