마크다운 학습 총정리

 

총정리 파일

my-first-markdown.md

0.00MB

 

# 제목 (h1~h6)  ↓
# 제목1
## 제목2
### 제목3
#### 제목4
##### 제목5
###### 제목6

특수한 경우 ↓ (가급적 쓰지말자, 알고만 있으면 됨)
제목 1
=======
제목 2
-------



# 강조 (u,b,s태그 등) ↓
<u>강조하기</u><br>
이텔릭체 : *강조하기*, _강조하기_ <br>
두껍게 : **강조하기**
취소선 : ~~취소하기~~



# 목록 (ol, ul) ↓
1. 순서 필요한 목록 ol
1. 순서 필요한 목록 ol
1. 순서 필요한 목록 ol
 - 순서 필요없는 목록 ul
 - 순서 필요없는 목록 ul
 - 순서 필요없는 목록 ul



# 링크(a) ↓
[네이버](https://www.naver.com)
[네이버](https://www.naver.com "링크 설명(title)을 작성하세요.")
[네이버](../상대경로도 사용가능)

<https://www.naver.com>
https://www.naver.com

[네이버참조링크][naverUrl] 이거 맞는데 왜 안되지?ㅋㅋ패스
[naverUrl]: https://www.naver.com

<a href="https://www.naver.com" target="_blank">새창열기는 마크다운문법에 지원이 안되므로 어쩔수없이 a태그를 써줘야한다</a>



# 이미지(img) ↓
![대체텍스트(alternative text)를 입력하세요!](person_sample.png "링크 설명(title)을 작성하세요")

## 이미지에 링크달기 [여기에 이미지넣기](링크주소)
[![대체텍스트(alternative text)를 입력하세요!](person_sample.png "링크 설명(title)을 작성하세요")](https://www.naver.com)

![페이스참조이미지][face] 이거 맞는데 왜 또 안되지?ㅋㅋ패스2
[face]: person_sample.png



# 코드강조 ↓
`<p>인라인강조 !</p>`

``` html
<p id="title">블럭강조 !!!</p>
<a href="javascript:void(0)"></a>
```
``` css
 p#title {color:#fff}
 a {display:inline-block}
```
``` javascript
 document.getElementById('title')
```



# 표(table) ↓
- 헤더 셀을 구분할 때 3개 이상의 -(하이픈)기호가 필요함
- 헤더 셀을 구분하면서 :(colons)기호로 셀(열/칸) 안에 내용을 정렬할 수 있음
- 가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능함

| 값 | 의미 | 기본값 |
|---|:---:|---:|
| 'static' | 유형(기준) 없음 / 배치 불가능 | 'static'|
| 'relative' | 요소 자신을 기준으로 배치 | |
| 'absolute' | 위치 상 부모(조상)요소를 기준으로 배치 | |
| 'fixed' | 브라우저 창을 기준으로 배치  | |

| 값 | 의미 | 기본값 |
---|:---:|---:
 'static' | 유형(기준) 없음 / 배치 불가능 | 'static'
 'relative' | 요소 자신을 기준으로 배치 | 
 'absolute' | 위치 상 부모(조상)요소를 기준으로 배치 | 
 'fixed' | 브라우저 창을 기준으로 배치  | 



# 인용문(BlockQuote) ↓
> 여기에 인용문을 쓰자 !
>> 인용안에 인용
>>> 인용안에 인용안에 인용



# 원시 HTML ↓
<blockquote>원시 html 인용문 !</blockquote>
<img src="person_sample.png" alt="페이스" width="50">



# 수평선과 줄바꿈 (hr태그) ↓
---
***
---



# 마크다운 학습하기 (위의 내용 학습 시작)  ↓
[마크다운](https://namu.wiki/w/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4)이란?

## 장점 
1. **배우기 쉽다**
1. 관리가 쉽다
1. HTML태그를 써도 된다
1. ~~그냥 쉽다~~

## 단점
1. 표준이 없다
1. 사용하는 환경마다 스타일이 다르게 보인다 (블로그..브라우저 등등)

## 사용시 참고사항
- 마크다운 문법이 html로 변환돼서 화면에 뿌려지는 것임
- 확장자명 md 파일이 마크다운 사용한 것 !
- <u style="color:skyblue">HTML태그를 쓸수있지만 인라인으로 쓰는 것은 추천하지 않는다.</u>
- 코드강조에 타이틀언어를 올바르게 적지 않으면 코드하이라이팅 스타일이 올바르게 적용되지 않는다.

> 마크다운 공부 1시간이면 마스터되는 것임 !! 굳
>> 물론 익숙해지는건 별개문제