Markdown 마크다운
마크다운
~~~.md 로 된 문서들이 있는데 마크다운 문법으로 작성된 파일이다
| 장점 | 단점 |
| 문법이 쉽고 간결하다. 관리가 쉽다 지원 가능한 플랫폼과 프로그램이 다양하다. |
표준이 없다 모든 HTML 마크업을 대신하지 못한다. |
제목
# 제목(header)
# 제목 1
## 제목 2
### 제목 3
#의 갯수만큼 h1~h6 으로 생각하면 된다.
그리고 # 다음에 띄어쓰기 해야하는것 잊지 말자
문장
# 문장(paragraph)
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
문장을 작성할때 위처럼 작성하면 하나의 문단으로 보고 <p>태그를 쓴 것처럼 표현이 된다.
줄바꿈
# 줄바꿈(line breaks)
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세<br/>
무궁화 삼천리 화려 강산
그냥 쓰게 되면 줄바꿈은 되지 않는다
띄어쓰기 두번을 해주면 줄바꿈이 되는데 경우에 따라 실행이 되지 않는경우도 있어서
그런경우 HTML처럼 <br /> 을 작성하여도 줄바꿈이 가능하다.
강조
# 강조(Emphasis)
_이텔릭_
**두껍게**
**_이텔릭 + 두껍게_**
~~취소선~~
<u>밑줄</u>
목록
# 목록(list)
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록(들여쓰기 2개(띄어쓰기4번))
1. 순서가 필요한 목록
1. 순서가 필요한 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
<ol> 태그처럼 순서가 있는 목록을 작성할때는 <ol>태그로도 작성이 가능하지만
그냥 앞에 1. 이렇게만 작성해줘도 순서대로 작성이 된다.
중간에 한줄이 지워져도 알아서 순서는 맞춰져 나오기때문에 편한점이 있다.
순서가 필요하지 않은 목록은 - (하이푼)기호만 넣어주면 쉽게 작성이 가능하다
들여쓰기 2번(띄어쓰기 4번) 후 목록을 작성해주면
목록내역 하나중 목록으로 넣을 수 있다.
링크
# 링크(link)
<a href="http://google.com">google</a>
[google](http://google.com)
<a href="http://naver.com" title="naver로 이동!">naver</a>
[naver](http://naver.com "naver로 이동!")
<a href="http://naver.com" title="naver로 이동!" target="_blank">naver</a>
링크를 넣어주는건 <a>태그를 이용하여 작성이 가능하다
하지만 좀 더 편하게 대괄호와 소괄호를 넣어 표현이 가능하다
[태그이름](태그의 주소 "title내용")
하지만
target="_blank" 이렇게 새로운 창에 창을 띄우고 싶을땐 원시태그를 이용하여 작성하여야 한다.
이미지
# 이미지(image)
![]()
[](https://heropy.blog/)
위 링크를 작성하는것과 비슷한데 이미지는 앞에 !가 들어간다는 점 잊지말자!
이미지를 클릭했을때 그 이미지 주소로 이동하고 싶다면
[](이동할주소)
이렇게 작성하면 표현이 가능하다
인용문
# 인용문(blockQuote)
>남의 말이나 글에서 직접 또는 간접으로 따온 문장.
>(네이버 국어 사전)
>인용문을 작성하세요!
>>중첩된 인용문
>>>중중첩된 인용문 1
>>>중중첩된 인용문 2
>>>중중첩된 인용문 3
인용문은 > 를 이용한다.
인라인 코드 강조
# 인라인(inline) 코드 강조
CSS에서 `background` 혹은
`background-image` 속성으로 요소에 배경 이미지를 삽입할수 있습니다.
강조할 부분을 ` ` (백틱기호)로 묶어준다.
블록 코드 강조
# 블록(block) 코드 강조
```html
<a href="http://naver.com" title="naver로 이동!" target="_blank">naver</a>
```
```css
.list{
position :absolute;
}
```
```javascript
funtion func(){
var a = 'AAA';
return a;
}
```
```bash
$ git commit -m 'study Markdown'
```
```plaintext
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
```
블록으로 코드를 강조할때 ``` ``` 백틱기호 3개를 이용하는데
위 예시처럼 첫째줄 ```뒤에 html, css, javascript, bash, plaintext등 작성을 하면
그에 맞춰 코드에 하이라이팅이 들어가는것을 볼수 있다.
표
# 표(table)
position 속성
값 | 의미 | 기본값
--|:--:|--:
static | 기준없음 | 0
relative | 요소 자신 | X
글자의 정렬은 기본적으로 왼쪽정렬로 진행이 된다.
만약 가운데 정렬, 오른쪽 정렬로 진행 원한다면
가운데 -- 기호의 양옆으로 :를 넣어주면 가운데 정렬
오른쪽에만 : 를 넣어준다면 오른쪽 정렬이다.
원시 HTML
# 원시 HTML(Raw HTML)
동해물과 <span style="text-decoration: underline;">백두산</span>이 마르고 닳도록(띄어쓰기2번)
하느님이 보우하사 우리나라 만세
<a href="http://naver.com" title="naver로 이동!" target="_blank">naver</a>
<img width="70" src="https://avatars.githubusercontent.com/u/16679082?v=4" alt="heropy">
편하게 쓰려고 마크다운을 사용하지만 어쩔수 없이 원시 HTML을 써야 하는 경우가 있다.
참고하자
수평선
# 수평선(horizontal rule)
---
***
___
---(하이푼 3개) , ***(별 3개) , ___(언더바 3번)
이렇게 3가지 방법으로 수평선을 넣어줄 수 있다.