안녕하세요 인터럽트입니다.
오늘은 git에서 Readme 작성할 때 많이 사용하는 마크다운에 대해서 정리해 볼 예정입니다.
그럼 우선 마크다운이 뭔지 개념부터 알아볼까요?
1. 마크다운(markdown)이란?
Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌습니다.
쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능합니다.
특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서 빠르게 컨텐츠를 작성할 수 있습니다.
마크다운이 최근 각광받기 시작한 이유는 깃헙(GitHub)에서 저장소에 관한 정보를 기록하는 README.md를 마크다운으로 작성하고부터입니다.
2. 마크다운의 장-단점
2.1 장점
- 심플함 : 복잡한 HTML 태그 없이 간단한 기호로 문서 구조화가 가능하다.
- 가독성 : 코드가 깔끔하고 읽기 쉬워 초보자도 쉽게 접근 가능하다.
- 다양한 지원 : GitHub, Notion, Typora, 블로그 플랫폼 등 다양한 도구에서 지원
- 확장성 : 플러그인을 사용해 기능을 확장할 수 있음.
- 저용량 : 텍스트로 저장되기 때문에 용량이 적어 보관이 용이하다.
2.2 단점
- 비표준 : 표준이 없기 때문에 도구에 따라서 변환방식이나 생성물이 다르다.
- 모든 HTML 마크업을 대신하지 못한다.
3. 마크다운(Markdown) 문법
3.1 헤딩(Heading)
HTML 의<h1>, <h2>, <h3>, <h4>, <h5> 태그로 변환되는 제목을 표현한다.
헤딩은 문서의 제목과 섹션을 나눌 때 사용하며 # 기호의 개수로 레벨을 구분한다.
# 제목1
## 제목2
### 제목3
#### 제목43.2 강조
HTML의 <em>(기울임), <strong>(두꺼움), <del>(취소선) 태그로 변환되는 강조를 표현한다.
단 밑줄은 마크다운에서 지원하기 않기에 HTML 태그에서 직접 를 사용해야 한다.
텍스트를 굵게, 기울임꼴, 취소선 등으로 강조할 수 있다.
*기울임* 또는 _기울임_
**굵게** 또는 __굵게__
~~취소선~~출력 결과: 기울임
굵게
취소선
3.3 리스트
순서 없는 리스트
<ol>, <ul>, <li> 태그로 변환되는 리스트를 표현한다.-, *, + 중 하나를 사용하여 항목을 표시한다.
* 빨강
* 녹색
* 파랑
+ 빨강
+ 녹색
+ 파랑
- 빨강
- 녹색
- 파랑출력 결과:
- 빨강
- 녹색
- 파랑
- 녹색
- 빨강
- 녹색
- 파랑
- 녹색
- 빨강
- 녹색
- 파랑
- 녹색
순서있는 리스트
숫자 뒤에 . 기호 을 붙여서 표시한다.
1. 첫 번째 항목
2. 두 번째 항목
1. 하위 항목
3. 세 번째 항목출력 결과:
- 첫 번째 항목
- 두 번째 항목
- 하위 항목
- 세 번째 항목
3.4 링크
<a> 태그로 변환되는 링크를 표현한다.
구조는 [이름](링크주소 "설명") 구조를 따르며 문서 안에서 참조링크를 그대로 사용할 수 있습니다.
참조는 화면에 표시되지 않으며 링크를 연결해 주는 용도로 사용한다.
//문법구조
[이름](링크)
[이름](링크 "설명")
[이름][참조]
[참조]: 링크
[참조]: 링크 "설명"//예제
[GOOGLE](https://google.com)
[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")
[상대적 참조](../users/login)
[Dribbble][Dribbble Link]
[GitHub][1]
문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>
[Dribbble Link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"출력 결과:
GOOGLE
문서 안에서 참조 링크를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: https://naver.com
3.5 이미지
<img> 태그로 변환되는 이미지를 표현한다.
이미지를 삽입하려면  형식을 사용한다.
앞에 느낌표 말고는 링크 문법과 비슷해 보인다.
![대체텍스트][참조]
[참조]: 이미지주소
[참조]: 이미지주소 "설명"
![이미지입니다!][Image]
[Image]: https://picsum.photos/500/300 "이미지입니다!"3.5.1 (응용편)이미지에 링크 추가
마크다운 이미지 문법코드를 링크 문법 코드로 감싸준다.
[](https://interruptdev-privateblog.tistory.com/)3.6 코드강조
<pre>, <code> 태그로 변환되는 코드를 표현한다.` 백틱 기호를 사용해서 코드를 감싸준다.
`background` 혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.출력 결과:background 혹은 background-image 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.
3.7 블록
` 를 3번 이상 입력하고 언어(코드) 이름을 명시해 코드 블록을 표현한다.
```html
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
```
```css
.list > li {
position: absolute;
top: 40px;
}
```
```javascript
function add(a, b = 1) {
console.log(a, b)
return a + b
}
```
```bash
$ npm run dev
```
```python
s = "Python syntax highlighting"
print s
```
```plaintext
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
```3.7.1 (응용)백틱기호 사용
마크다운에서 백틱(') 기호는 코드 강조를 표현할 때 사용하는 문법이므로 백틱 기호 자체를 출력하려면 기호에 이스케이프 처리가 필요하다.
\ 기호와 함께 작성하면 백틱 기호를 출력할 수 있다.
\`출력결과: `
3.8 표
<table> 태그로 변환되는 표를 표현한다.
테이블 헤더를 구분하기 위해 3개 이상의 -(hyphen/dash) 기호를 사용하며:(colons) 기호를 추가해 셀 한에 내용을 정렬할 수 있다.
---, :---: 좌측 정렬:---:: 가운데 정렬---:: 우측정렬
//문법
| 헤더 | 헤더 | 헤더 |
|---|---|---|
| 셀 | 셀 | 셀 |
| 셀 | 셀 | 셀 |
헤더 | 헤더 | 헤더
---|---|---
셀 | 셀 | 셀
셀 | 셀 | 셀//예제
| 값 | 의미 | 기본값 |
|---|:---:|---:|
| `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
| `relative` | 요소 자신을 기준으로 배치 | |
| `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 | |
| `fixed` | 브라우저 창을 기준으로 배치 | |
| `sticky` | 스크롤 영역 기준으로 배치 | |
값 | 의미 | 기본값
---|:---:|---:
`static` | 유형(기준) 없음 / 배치 불가능 | `static`
`relative` | 요소 자신을 기준으로 배치 |
`absolute` | 위치 상 부모_(조상)요소를 기준으로 배치 |
`fixed` | 브라우저 창을 기준으로 배치 |
`sticky` | 스크롤 영역 기준으로 배치 || 값 | 의미 | 기본값 |
|---|---|---|
static |
유형(기준) 없음 / 배치 불가능 | static |
relative |
요소 자신을 기준으로 배치 | |
absolute |
위치 상 부모(조상)요소를 기준으로 배치 | |
fixed |
브라우저 창을 기준으로 배치 | |
sticky |
스크롤 영역 기준으로 배치 |
| 값 | 의미 | 기본값 |
|---|---|---|
static |
유형(기준) 없음 / 배치 불가능 | static |
relative |
요소 자신을 기준으로 배치 | |
absolute |
위치 상 부모_(조상)요소를 기준으로 배치 | |
fixed |
브라우저 창을 기준으로 배치 | |
sticky |
스크롤 영역 기준으로 배치 |
3.9 인용문
<blockquote> 태그로 변환되는 인용문을 표현한다.> 기호를 사용해 인용문을 작성한다.
> 이 문장은 인용문입니다.
>
> 여러 줄도 가능합니다.이 문장은 인용문입니다.
여러 줄도 가능합니다.
3.10 수평선
---, ___, *** 각 기호를 3개 이상 입력해, <hr> 태그로 변환되는 수평선을 표현한다.
---
***
___3.11 줄바꿈
줄바꿈(Line Breaks)을 위해서는 문장 마지막에 <br> 태그를 직접 입력하거나, 문장 마지막에서 띄어쓰기를 2번 이상 입력한다.
단 도구에 따라 자동줄바꿈을 지원하지 않을 수도 있다.
3.12 주석
<!-- -->, [//]: # 기호를 사용해 주석을 표현한다.
-- 시작 --
<!-- 안녕하세요. -->
[//]: # (안녕하세요.)
[//]: # "안녕하세요."
[//]: # '안녕하세요.'
-- 종료 --출력 결과 :
-- 시작 --
-- 종료 --
4. 정리
마크다운은 기본문법만 알고 있다면 일반 텍스트편집기에서도 손쉽게 작성이 가능한 마크업 언어입니다.
현재 다양한 도구와 플랫폼에서 지원하고 있기 때문에 손쉽게 문서를 작성할 수 있습니다.
high Level 언어는 아니지만 알아두면 정말 유용한 언어입니다.
오늘도 긴 글 읽어주셔서 감사합니다.
안녕하세요 인터럽트입니다.
오늘은 git에서 Readme 작성할 때 많이 사용하는 마크다운에 대해서 정리해 볼 예정입니다.
그럼 우선 마크다운이 뭔지 개념부터 알아볼까요?
1. 마크다운(markdown)이란?
Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌습니다.
쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능합니다.
특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서 빠르게 컨텐츠를 작성할 수 있습니다.
마크다운이 최근 각광받기 시작한 이유는 깃헙(GitHub)에서 저장소에 관한 정보를 기록하는 README.md를 마크다운으로 작성하고부터입니다.
2. 마크다운의 장-단점
2.1 장점
- 심플함 : 복잡한 HTML 태그 없이 간단한 기호로 문서 구조화가 가능하다.
- 가독성 : 코드가 깔끔하고 읽기 쉬워 초보자도 쉽게 접근 가능하다.
- 다양한 지원 : GitHub, Notion, Typora, 블로그 플랫폼 등 다양한 도구에서 지원
- 확장성 : 플러그인을 사용해 기능을 확장할 수 있음.
- 저용량 : 텍스트로 저장되기 때문에 용량이 적어 보관이 용이하다.
2.2 단점
- 비표준 : 표준이 없기 때문에 도구에 따라서 변환방식이나 생성물이 다르다.
- 모든 HTML 마크업을 대신하지 못한다.
3. 마크다운(Markdown) 문법
3.1 헤딩(Heading)
HTML 의<h1>, <h2>, <h3>, <h4>, <h5> 태그로 변환되는 제목을 표현한다.
헤딩은 문서의 제목과 섹션을 나눌 때 사용하며 # 기호의 개수로 레벨을 구분한다.
# 제목1
## 제목2
### 제목3
#### 제목43.2 강조
HTML의 <em>(기울임), <strong>(두꺼움), <del>(취소선) 태그로 변환되는 강조를 표현한다.
단 밑줄은 마크다운에서 지원하기 않기에 HTML 태그에서 직접 를 사용해야 한다.
텍스트를 굵게, 기울임꼴, 취소선 등으로 강조할 수 있다.
*기울임* 또는 _기울임_
**굵게** 또는 __굵게__
~~취소선~~출력 결과: 기울임
굵게
취소선
3.3 리스트
순서 없는 리스트
<ol>, <ul>, <li> 태그로 변환되는 리스트를 표현한다.-, *, + 중 하나를 사용하여 항목을 표시한다.
* 빨강
* 녹색
* 파랑
+ 빨강
+ 녹색
+ 파랑
- 빨강
- 녹색
- 파랑출력 결과:
- 빨강
- 녹색
- 파랑
- 녹색
- 빨강
- 녹색
- 파랑
- 녹색
- 빨강
- 녹색
- 파랑
- 녹색
순서있는 리스트
숫자 뒤에 . 기호 을 붙여서 표시한다.
1. 첫 번째 항목
2. 두 번째 항목
1. 하위 항목
3. 세 번째 항목출력 결과:
- 첫 번째 항목
- 두 번째 항목
- 하위 항목
- 세 번째 항목
3.4 링크
<a> 태그로 변환되는 링크를 표현한다.
구조는 [이름](링크주소 "설명") 구조를 따르며 문서 안에서 참조링크를 그대로 사용할 수 있습니다.
참조는 화면에 표시되지 않으며 링크를 연결해 주는 용도로 사용한다.
//문법구조
[이름](링크)
[이름](링크 "설명")
[이름][참조]
[참조]: 링크
[참조]: 링크 "설명"//예제
[GOOGLE](https://google.com)
[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")
[상대적 참조](../users/login)
[Dribbble][Dribbble Link]
[GitHub][1]
문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>
[Dribbble Link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"출력 결과:
GOOGLE
문서 안에서 참조 링크를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: https://naver.com
3.5 이미지
<img> 태그로 변환되는 이미지를 표현한다.
이미지를 삽입하려면  형식을 사용한다.
앞에 느낌표 말고는 링크 문법과 비슷해 보인다.
![대체텍스트][참조]
[참조]: 이미지주소
[참조]: 이미지주소 "설명"
![이미지입니다!][Image]
[Image]: https://picsum.photos/500/300 "이미지입니다!"3.5.1 (응용편)이미지에 링크 추가
마크다운 이미지 문법코드를 링크 문법 코드로 감싸준다.
[](https://interruptdev-privateblog.tistory.com/)3.6 코드강조
<pre>, <code> 태그로 변환되는 코드를 표현한다.` 백틱 기호를 사용해서 코드를 감싸준다.
`background` 혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.출력 결과:background 혹은 background-image 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.
3.7 블록
` 를 3번 이상 입력하고 언어(코드) 이름을 명시해 코드 블록을 표현한다.
```html
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
```
```css
.list > li {
position: absolute;
top: 40px;
}
```
```javascript
function add(a, b = 1) {
console.log(a, b)
return a + b
}
```
```bash
$ npm run dev
```
```python
s = "Python syntax highlighting"
print s
```
```plaintext
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
```3.7.1 (응용)백틱기호 사용
마크다운에서 백틱(') 기호는 코드 강조를 표현할 때 사용하는 문법이므로 백틱 기호 자체를 출력하려면 기호에 이스케이프 처리가 필요하다.
\ 기호와 함께 작성하면 백틱 기호를 출력할 수 있다.
\`출력결과: `
3.8 표
<table> 태그로 변환되는 표를 표현한다.
테이블 헤더를 구분하기 위해 3개 이상의 -(hyphen/dash) 기호를 사용하며:(colons) 기호를 추가해 셀 한에 내용을 정렬할 수 있다.
---, :---: 좌측 정렬:---:: 가운데 정렬---:: 우측정렬
//문법
| 헤더 | 헤더 | 헤더 |
|---|---|---|
| 셀 | 셀 | 셀 |
| 셀 | 셀 | 셀 |
헤더 | 헤더 | 헤더
---|---|---
셀 | 셀 | 셀
셀 | 셀 | 셀//예제
| 값 | 의미 | 기본값 |
|---|:---:|---:|
| `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
| `relative` | 요소 자신을 기준으로 배치 | |
| `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 | |
| `fixed` | 브라우저 창을 기준으로 배치 | |
| `sticky` | 스크롤 영역 기준으로 배치 | |
값 | 의미 | 기본값
---|:---:|---:
`static` | 유형(기준) 없음 / 배치 불가능 | `static`
`relative` | 요소 자신을 기준으로 배치 |
`absolute` | 위치 상 부모_(조상)요소를 기준으로 배치 |
`fixed` | 브라우저 창을 기준으로 배치 |
`sticky` | 스크롤 영역 기준으로 배치 || 값 | 의미 | 기본값 |
|---|---|---|
static |
유형(기준) 없음 / 배치 불가능 | static |
relative |
요소 자신을 기준으로 배치 | |
absolute |
위치 상 부모(조상)요소를 기준으로 배치 | |
fixed |
브라우저 창을 기준으로 배치 | |
sticky |
스크롤 영역 기준으로 배치 |
| 값 | 의미 | 기본값 |
|---|---|---|
static |
유형(기준) 없음 / 배치 불가능 | static |
relative |
요소 자신을 기준으로 배치 | |
absolute |
위치 상 부모_(조상)요소를 기준으로 배치 | |
fixed |
브라우저 창을 기준으로 배치 | |
sticky |
스크롤 영역 기준으로 배치 |
3.9 인용문
<blockquote> 태그로 변환되는 인용문을 표현한다.> 기호를 사용해 인용문을 작성한다.
> 이 문장은 인용문입니다.
>
> 여러 줄도 가능합니다.이 문장은 인용문입니다.
여러 줄도 가능합니다.
3.10 수평선
---, ___, *** 각 기호를 3개 이상 입력해, <hr> 태그로 변환되는 수평선을 표현한다.
---
***
___3.11 줄바꿈
줄바꿈(Line Breaks)을 위해서는 문장 마지막에 <br> 태그를 직접 입력하거나, 문장 마지막에서 띄어쓰기를 2번 이상 입력한다.
단 도구에 따라 자동줄바꿈을 지원하지 않을 수도 있다.
3.12 주석
<!-- -->, [//]: # 기호를 사용해 주석을 표현한다.
-- 시작 --
<!-- 안녕하세요. -->
[//]: # (안녕하세요.)
[//]: # "안녕하세요."
[//]: # '안녕하세요.'
-- 종료 --출력 결과 :
-- 시작 --
-- 종료 --
4. 정리
마크다운은 기본문법만 알고 있다면 일반 텍스트편집기에서도 손쉽게 작성이 가능한 마크업 언어입니다.
현재 다양한 도구와 플랫폼에서 지원하고 있기 때문에 손쉽게 문서를 작성할 수 있습니다.
high Level 언어는 아니지만 알아두면 정말 유용한 언어입니다.
오늘도 긴 글 읽어주셔서 감사합니다.
