• 자주 보고 편집하던 README.md 는 Markdown 문법으로 작성된 파일
• 그러나 사용법을 따로 정리한 적이 없기 때문에 Velog 를 시작하며 정리해두려함

1. 제목(Header)

• h1 부터 h6 까지 표현 가능하며, #의 개수에 따라서 크기 표현이 가능함
• #을 붙힌 후 spacebar 를 눌러 띄어쓰기를 해주어야 적용이 가능함

⌨ 입력

# h1
## h2
### h3
#### h4
##### h5
###### h6

💻 결과

h1

h2

h3

h4

h5

h6

2. 줄바꿈(Line Breaks)

• 띄어쓰기 2번 또는 <br/>로 표현 가능함

⌨ 입력

띄어쓰기 두번  
또는 <br/>

💻 결과

띄어쓰기 두번
또는

3. 수평선(Horizontal Rule) <hr/>

• 가시적으로 페이지를 나누는 용도로 사용
• HTML 의 <hr> 태그와 같은 역할

⌨ 입력

---
***
___
******

💻 결과

---

---

---

---

4. 글자 강조(Emphasis)

• 글씨체를 변경하거나, 취소선을 긋거나, 밑줄을 긋는데에 사용

⌨ 입력

**굵은 글씨**  
*이텔릭*  
_이탤릭_  
~~취소선~~  
<u>밑줄</u>  
ex)  
This is the **bold** text and this is the *italic* text and <u>let's</u> do ~~strikethrough~~

💻 결과

굵은 글씨
이텔릭
이탤릭
취소선
밑줄
ex)
This is the bold text and this is the italic text and let's do strikethrough

5. 인용문(BlockQuote)

• > 블록 인용 문자를 사용하면 인용문 표현이 가능

⌨ 입력

> 인용문장
>> 중첩된 인용문
>>> 중첩된 인용문의 중첩된 인용문

💻 결과

인용문장

중첩된 인용문

중첩된 인용문의 중첩된 인용문

6. 목록(List)

1) 순서가 없는 목록 (*, +, - 지원)

⌨ 입력

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

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

💻 결과

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

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

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

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

2) 순서가 있는 목록

⌨ 입력

1. 순서가 필요한 목록
    1. 순서가 필요한 목록
    1. 순서가 필요한 목록
1. 순서가 필요한 목록


1. 순서가 필요한 목록
    9. 순서가 필요한 목록
    3. 순서가 필요한 목록
8. 순서가 필요한 목록

💻 결과

1. 순서가 필요한 목록
   1. 순서가 필요한 목록
   2. 순서가 필요한 목록
2. 순서가 필요한 목록

1. 순서가 필요한 목록
   9. 순서가 필요한 목록
   10. 순서가 필요한 목록
2. 순서가 필요한 목록

3) 혼합 사용

⌨ 입력

- 순서가 필요하지 않은 목록
    1. 순서가 필요한 목록
    1. 순서가 필요한 목록
- 순서가 필요하지 않은 목록2
    1. 순서가 필요한 목록
    3. 순서가 필요한 목록
    8. 순서가 필요한 목록

💻 결과

• 순서가 필요하지 않은 목록
  1. 순서가 필요한 목록
  2. 순서가 필요한 목록
• 순서가 필요하지 않은 목록2
  1. 순서가 필요한 목록
  2. 순서가 필요한 목록
  3. 순서가 필요한 목록

7. 링크(Links)

1) 기본방법

• [Title](link) 형식으로 작성

⌨ 입력

Click [Here](https://velog.io/@longbright_choi)
[길게 빛나는 velog](https://velog.io/@longbright_choi)

💻 결과

Click Here
길게 빛나는 velog

2) 참조 링크 사용 방법

• [link keyword][id]
• [id]:URL "Optional Title"

⌨ 입력

- ex 1) title 옵션 없이 사용
[길게 빛나는 velog][yh]
[yh]:https://velog.io/@longbright_choi

- ex 2) title 옵션 사용 시 커서를 링크로 위치하면 title 이 노출됨
[길게 빛나는 velog][yh]
[yh]:https://velog.io/@longbright_choi "Click Here"

💻 결과

• ex 1) title 옵션 없이 사용
  길게 빛나는 velog

• ex 2) title 옵션 사용 시 커서를 링크로 위치하면 title 이 노출됨
  길게 빛나는 velog

3) 자동 링크 사용 방법

• 인터넷 URL 혹은 이메일 주소를 적합한 형식으로 링크를 생성해줌

⌨ 입력

https://velog.io/@longbright_choi
longbright0804@gmail.com

위와 같이 입력 시 메일 주소 링크 생성이 제대로 안 되었다.
아래와 같이 입력 해주면 제대로 생성이 되었다.

<https://velog.io/@longbright_choi>
<longbright0804@gmail.com>

💻 결과

https://velog.io/@longbright_choi
longbright0804@gmail.com

위와 같이 입력 시 메일 주소 링크 생성이 제대로 안 되었다.

https://velog.io/@longbright_choi
longbright0804@gmail.com

8. 이미지(Images)

• Link 와 문법이 유사함. 앞에 ! 만 추가하면 됨

1) 기본문법

• ![대체 텍스트](이미지 주소)

⌨ 입력

![Image Description](https://velog.velcdn.com/images/longbright_choi/post/47ae0367-ceab-4348-8c20-b330257b78cf/image.png)

💻 결과

2) 참조 링크 사용 방법

• :[대체 텍스트][id]
• `[id]:이미지주소 "Optional Title"

⌨ 입력

![Image Description][karina]
[karina]:(https://velog.velcdn.com/images/longbright_choi/post/47ae0367-ceab-4348-8c20-b330257b78cf/image.png) "Click Here"

💻 결과

3) 이미지 노출과 동시에 링크처리

• [![대체텍스트](이미지 주소)](링크 주소)

⌨ 입력

![[Image Description](https://velog.velcdn.com/images/longbright_choi/post/47ae0367-ceab-4348-8c20-b330257b78cf/image.png)](https://velog.velcdn.com/images/longbright_choi/post/47ae0367-ceab-4348-8c20-b330257b78cf/image.png)

💻 결과

9. 표(Table)

• | (Vertical bar) 기호를 통해 테이블 표현 가능(가장 좌측, 우측 생략 가능
• 헤더와 셀을 구분할 때 3개 이상의 - 가 필요
• : 기호를 통해 정렬 가능

⌨ 입력

| Header | value | Description |
| --: | :-- | :--: |
| 정렬 | --: | 우측정렬 |
| 정렬 | :-- | 좌측정렬 |
| 정렬 | :--: | 가운데정렬 |

💻 결과

Header	value	Description
정렬	--:	우측정렬
정렬	:--	좌측정렬
정렬	:--:	가운데정렬

10. 코드(Code)

1) 인라인 코드(Inline Code)

• 백틱(`) 으로 감싸서 표현 가능

⌨ 입력

`인라인코드(Inline Code)`

💻 결과

인라인코드(Inline Code)

2) 블록 코드(Block Code)

• 백틱(```) 으로 감싸서 표현 가능
• 일반적으로 백틱(```) 옆에 코드의 종류를 명시하여 사용함

⌨ 입력

• Java

```java
public class Main {
	public static void main(String [] args) throws Exception {
    System.out.println("Hello World");
    }
}

• python

```python
def helloWorld():
	print(f'Hello World')

• javascript

``` javascript
const name = "최영환";
console.log("Hello World");
console.log(name);

• bash

``` bash
$ ls -al

💻 결과

• Java

public class Main {
	public static void main(String [] args) throws Exception {
    System.out.println("Hello World");
    }
}

• python

def helloWorld():
	print(f'Hello World')

• javascript

const name = "최영환";
console.log("Hello World");
console.log(name);

• bash

$ ls -al

11. 원시 HTML (Raw HTML)

• Makrdown 환경에서는 결국 표현의 한계가 있으며, 이런 경우 HTML 문법 사용이 가능함

⌨ 입력

ex) image를 표현할 때 MarkDown으로는 width 지정이 불가능 함
<img width="70" src="https://velog.velcdn.com/images/longbright_choi/post/47ae0367-ceab-4348-8c20-b330257b78cf/image.png" alt="karina" />

ex) 링크를 표현할 때 target="_blank" 지정이 불가능 함
링크 클릭 시 현재 창에서 링크를 띄워준다.

ex) 밑줄을 표현할 수 없어 <u></u>를 사용하거나 다음과 같이 style을 직접 지정 해줘야 한다.
<span style="text-decoration: underline;">카리나</span> 사진이다.
<u>카리나</u> 사진이다.

💻 결과

ex) image를 표현할 때 MarkDown으로는 width 지정이 불가능 함

ex) 링크를 표현할 때 target="_blank" 지정이 불가능 함
링크 클릭 시 현재 창에서 링크를 띄워준다.

ex) 밑줄을 표현할 수 없어 를 사용하거나 다음과 같이 style을 직접 지정 해줘야 한다.
카리나 사진이다.
카리나 사진이다.