마크다운 작성법
1. 제목(Header)
h1 ~ h6까지 표현가능, # 개수로 표현
마크다운 작성
# h1
## h2
### h3
#### h4
##### h5
###### h6결과
h1
h2
h3
h4
h5
6
2. 줄바꿈(Line Breaks)
문장 끝에 띄어쓰기 2번 or <br/> 사용
마크다운 작성
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산<br/>
대한 사람 대한으로 길이 보전하세결과
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
3. 강조(Emphasis)
기울기, bold, 취소선, 밑줄 등 text-decoration기능
마크다운 작성
_이텔릭_
**두껍게**
**_이텔릭 + 두껍게_**
~~취소선~~
<u>밑줄</u>결과
이텔릭
두껍게
이텔릭 + 두껍게
취소선
밑줄
4. 목록(List)
순서를 표기하는 목록 / 순서가 없는 목록 두 가지를 작성할 수 있음
4-1. 순서가 필요한 목록
숫자와 .을 사용하여 작성, 숫자를 지정하지 않아도 결과값에서는 숫자가 출력됨
마크다운 작성
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록결과
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
4-2. 순서가 필요하지 않은 목록
-, *, + 을 사용 하여 작성합니다. (셋 다 동일하게 작성됨)
마크다운 작성
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
* 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
* 순서가 필요하지 않은 목록
+ 순서가 필요하지 않은 목록
+ 순서가 필요하지 않은 목록
+ 순서가 필요하지 않은 목록결과
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
5. 링크(Links)
마크다운 작성
<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>결과
6. 이미지(Images)
마크다운 작성
### 이미지에 링크넣기
[
](https://velog.io/@seven2649)결과
이미지에 링크넣기
7. 인용문(BlockQuote)
마크다운 작성
> 남의 말이나 글에서 직접 또는 간접으로 따온 문장
> (네이버 국어 사전)
> 인용문을 작성하세요!
>
> > 중첩된 인용문
> >
> > > 중중첩된 인용문
> > > 중중첩된 인용문
> > > 중중첩된 인용문결과
남의 말이나 글에서 직접 또는 간접으로 따온 문장
(네이버 국어 사전)
인용문을 작성하세요!
중첩된 인용문
중중첩된 인용문
중중첩된 인용문
중중첩된 인용문
8. 인라인(inline) 코드 강조
마크다운 작성
CSS에서 `background` 혹은
`background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있음.결과
CSS에서 background 혹은 background-image 속성으로 요소에 배경 이미지를 삽입할 수 있음.
9. 블록(block) 코드 강조
백틱(｀)을 세 개 사용하여 작성할 수 있음.
마크다운 작성
```css
#to-top {
width: 42px;
height: 42px;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
}
```
```javascript
// 클릭하면 최상단으로 자연스럽게 올라가는 기능 구현
toTopEl.addEventListener("click", function () {
gsap.to(window, 0.7, {
scrollTo: 0,
});
});
```
결과
// 클릭하면 최상단으로 자연스럽게 올라가는 기능 구현
toTopEl.addEventListener("click", function () {
gsap.to(window, 0.7, {
scrollTo: 0,
});
});#to-top {
width: 42px;
height: 42px;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
}10. 표(Table)
테이블은 아래와 같이 작성
| 로 구분하며, -(하이픈)으로 구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 :(세미콜론)을 붙일 경우 순서대로 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 가능.
마크다운 작성
값 | 의미 | 기본값
:--|:--:|--:|
static | 기준 없음 | O
relative | 요소 자신 | X
absolute | 위치 상 부모 요소 | X
flxed | 뷰포트 | X결과
| 값 | 의미 | 기본값 |
|---|---|---|
| static | 기준 없음 | O |
| relative | 요소 자신 | X |
| absolute | 위치 상 부모 요소 | X |
| flxed | 뷰포트 | X |
11. 원시 HTML (Raw HTML)
html과 똑같은 방법으로 작성
마크다운 작성
동해물과 <span style="text-decoration: underline">백두산이</span> 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세
---
<a href="http://naver.com" title="NAVER로 이동" target="_blank">NAVER 새창열기</a>
---
<img width="70" src="https://velog.velcdn.com/images/seven2649/post/8417a1d3-11aa-4e9f-9fe7-8fab5586cad7/image.png" alt="GitHub">결과
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
