마크다운

마크다운 파일 형식: *.md

 

github에서 확인

 

장점

• 문법이 쉽고 간결하다.
• 관리가 쉽다.
• 지원 가능한 플랫폼과 프로그램이 다양하다

단점

• 표준이 없다
• 모든 HTML 마크업을 대신하지 못한다

github에서는 README.md라고 지정해야 한다

VSCode에서 확인 (우측상단에 미리보기 클릭)

 

#의 갯수에 따라서 글자 크기가 달라진다(띄어쓰기 중요!)

문장입력(줄바꿈 방법)

띄어쓰기 두번(space 2번), <br/>태그 입력

 

문장 강조 방법

# 강조
_이텔릭_  
**두껍게**  
**_이텔릭 + 두껍게_**  
~~취소선~~  
<u>밑줄</u>

 

목록 표시하는 방법

# 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
    1. 순서가 필요한 목록 (들여쓰기)
    1. 순서가 필요한 목록
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록

 

링크 문장

# 링크
<a href="https://google.com">GOOGLE</a>

[GOOGLE](http://google.com)

<a href="https://naver.com" title="NAVER로 이동!">NAVER</a>

[NAVER](https://naver.com "NAVER로 이동!")

<a href="https://naver.com" title="NAVER로 이동!" target = "_blank">
NAVER 새 탭에서 열기</a>

 

이미지 가져오기(3번째줄 링크 연결)

![]()
![NAVER](https://littledeep.com/wp-content/uploads/2020/09/naver-icon-style.png)
[![NAVER](https://littledeep.com/wp-content/uploads/2020/09/naver-icon-style.png)](https://naver.com)

 

인용문 쓰기

# 인용문
> 남의말이나 글에서 직접 또는 간접으로 따온 문장.
> (네이버 국어 사전)

> 인용문을 작성하세요!
>> 중접된 인용문
>>> 중중첩된 인용문 1
>>> 중중첩된 인용문 2
>>> 중중첩된 인용문 3

 

인라인 코드 강조 효과

# 인라인 코드 강조(백틱 기호 사용)

CSS에서 `background` 혹은 `backgroud-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

블록 코드 강조

# 블록 코드 강조
```html
<a href="https://www.google.com">GOOGLE</a>
```

```css
.list > li {
    position: absolute;
}
```

```javascript
function func(){
    var a = 'AAA';
}
```

```bash
$ git commit -m 'Study Markdown'
```

```plaintext
동해물과 백두산이 마르고 닳도록  
하느님이 보우하사 우리나라 만세
```

 

표 생성

# 표(Table)

position 속성

값 | 의미 | 기본값
-- | :--: | --:
왼쪽정렬 | 가운데 정렬 | 오른쪽 정렬
static | 기준 없음 | O
relative | 요소 자신 | X
absolute | 위치 상 부모 요소 | X
fixed | 뷰포트 | X

 

원시 HTML 사용(Raw HTML)

-> 마크다운 지원 기능으로만으로 처리가 불가능할 때 사용

# 원시 HTML
동해물과 <span style="text-decoration: underline;">백두산</span>이 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세

<a href = "https://naver.com" title = "Naver로 이동" target="_blank">naver</a>

<img width="70" src = "https://littledeep.com/wp-content/uploads/2020/09/naver-icon-style.png" alt = "naver">

수평선 사용

# 수평선

---
ㅁㅁ
***
ㄱㄱ
___