기타

MarkDown

Markdown

일반 텍스트 문서의 양식을 편집하는 문법으로 텍스트에 태그를 이용하여 글자에 속성을 주거나, 이미지를 삽입하고 조작하는 일이 가능하다.

Markdown 장점

  1. 문법이 간단해 읽고 쓰는게 쉽다.
  2. 1번의 이유로 글을 빠르게 작성할 수 있다.

간단한 문법만으로도 글을 짜임새있게 작성할 수 있다.
마크다운으로 작성한 글은 그냥 읽어도 이해가 가능하고 HTML로 변환해도 문제가 없다.
키보드만으로 모든 글 작성이 가능하므로 빠르게 작성할 수 있다는 것도 큰 장점이다.

 

문단 제목

문단 제목을 작성하려면 다음과 같은 방법을 사용하면 된다.

큰제목
===========

부제목
-----------

더 간단한 방법은 # 을 쓰면 된다. (추천)

# 제목
## 제목

# 개수가 많아질수록 글씨 크기가 작아진다.

# H1

## H2

### H3

#### H4

##### H5

###### H6

 

줄바꿈

마크다운에서 Enter 하나를 입력하면 줄바꿈이 되지 않는다. 줄을 바꾸기 위해서는 <br/>를 쓸 수도 있으나,

라인의 마지막에 공백 두 칸을 입력하면 줄바꿈을 할 수 있다.

줄 바꾸는 방법은 라인의 마지막에 공백 두 칸 을 추가  
그럼 줄바꿈이 된다.

문단을 구분하려면 Enter를 두번 입력하면 된다.

글을 입력 후 Enter 두 번 입력하여 공백 라인을 추가한다.

문단을 구분할 수 있습니다.

 

강조

*single asterisks*    //이텔릭체
_single underscores_  
**double asterisks**  //볼드체
__double underscores__
~~cancelline~~

single asteriskssingle underscoresdouble asterisksdouble underscorescancelline

문장 중간에 사용할 경우에는 띄어쓰기를 사용하는것이 좋다.

 

인용문(Blockquote)

인용문은 >을 앞에 붙여주면 된다.

> If you can imagine it, you can achieve it; if you can dream it, you can become it.
당신이 상상을 할 수 있다면 그것을 이룰 수 있고, 당신이 꿈꿀 수 있다면 그 꿈대로 될 수 있다.

If you can imagine it, you can achieve it; if you can dream it, you can become it.
당신이 상상을 할 수 있다면 그것을 이룰 수 있고, 당신이 꿈꿀 수 있다면 그 꿈대로 될 수 있다.

 

순서 있는 목록

순서 있는 목록을 표시할 때는 숫자+마침표(.)를 사용한다.
마침표 뒤에 공백 한 칸을 추가해야 정상적인 문법이다. 만약 공백이 없다면 순서 있는 목록으로 사용되지 않는다.

1. 1번
2. 2번
3. 3번
  1. 1번
  2. 2번
  3. 3번

숫자의 순서와는 상관없이 첫 번째를 기준으로 자동으로 번호가 부여된다.

 

순서 없는 목록

순서 없는 목록은 , `+`, 세 가지 방법을 사용할 수 있다. 들여쓰기를 하면 하위의 목록으로 만들 수 있다.

* 순서가 없는 목록1
  + 순서 없는 목록1-1
  + 순서 없는 목록1-2
    - 순서 없는 목록1-2-1
* 순서가 없는 목록2
  * 순서가 없는 목록2-1
* 순서가 없는 목록3
  • 순서가 없는 목록1
    • 순서 없는 목록1-1
    • 순서 없는 목록1-2
      • 순서 없는 목록1-2-1
  • 순서가 없는 목록2
    • 순서가 없는 목록2-1
  • 순서가 없는 목록3

 

들여쓰기

4개의 공백 또는 하나의 탭으로 들여쓰기를 만나면 변환되기 시작하여 들여쓰지 않은 행을 만날때까지 변환이 계속된다.

This is a normal paragraph:

    This is a code block.

end code block.

실제로 적용해보면,

ex)

This is a normal paragraph:

This is a code block.

end code block.

 

주의!

한줄 띄어쓰지 않으면 인식이 제대로 안되는 문제가 발생한다.

This is a normal paragraph:
    This is a code block.
end code block.

적용 예)

This is a normal paragraph:
This is a code block.
end code block.

 

수평선

수평선 을 만들 때는 다음과 같은 방법이 있다. 최소 개수(보통 3개)만 존재하며, 그 이상은 몇개를 써도 상관없다.

***
---
<hr/>



코드블럭

코드블럭은 다음과 같이 2가지 방식을 사용할 수 있다.

  • 코드블럭코드 ```
  • <pre><code>{code}</code></pre> 이용방식
```
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }

}

```

<pre>
<code>
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }

}
</code>
</pre>

 

링크

링크를 거는 방법은 [링크명](URL)로 사용하면 된다.그러면 해당 링크명에 입력한 URL로 링크가 걸린다.

[link keyword](url)

ex)

[네이버](naver.com)

네이버

 

문서내 링크걸기

[보여지는 텍스트](#이동할위치의텍스트)
~생략~
#이동할위치의텍스트

와 같이 작성한 뒤 업로드하면,보여지는 텍스트 클릭 시 "#이동할위치의텍스트"로 이동하는 것을 확인할 수 있다.
(기본 링크 작성 방법-텍스트 과 동일하다)

물론 #으로 시작하니까 헤더처리된다.

여기서 이동할위치의텍스트부분을 작성할 때 영어는 반드시 "소문자"만 가능하며 띄어쓰기는 - 로 구분해야한다.

ex)

[Stack](#stack-program)
~생략~
#Stack Program

 

이미지

![image keyword](/path/img.이미지확장자)

![이미지이름](이미지파일경로)

다른 방법

  • 사이즈 조절 기능 시작하기위해선 <img width="" height=""></img> 를 사용한다.

ex)

<img src="/path/to/img.jpg" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="RubberDuck"></img><br/>
<img src="/path/to/img.jpg" width="40%" height="30%" title="px(픽셀) 크기 설정" alt="RubberDuck"></img>

 

표만들기

| 문자와 - 문자로 표를 만든다

|제목|내용|설명|
|---|---|---|
|테스트1|테스트2|테스트3|
|테스트4|테스트5|테스트6|
|테스트7|테스트8|테스트9|

정렬 사용

: 문자를 사용하여 정렬을 정의할 수 있다.

|제목|내용|설명|
|:---|---:|:---:|
|왼쪽정렬|오른쪽정렬|중앙정렬|
|왼쪽정렬|오른쪽정렬|중앙정렬|
|왼쪽정렬|오른쪽정렬|중앙정렬|

셀 확장

|사이가 비어있으면 자동 확장된다.

|제목|내용|설명|
|:---|:---:|---:|
||중앙에서확장||
|||오른쪽에서 확장|
|왼쪽에서확장||

셀 강조

일반적인 text와 마찬가지로 * 와 ** 를 통해 이탤릭/강조를 표시할 수 있다.
span tag를 사용하면 컬러도 표시할 수 있다.

|제목|내용|설명|
|---|---|---|
|테스트1|*강조1*|테스트3|
|테스트1|**강조2**|테스트3|
|테스트1|<span style="color:red">강조3</span>|테스트3|

 

토글 리스트 (접기/펼치기)

나는 Notion을 사용했었기 때문에 토글 리스트란 이름이 더 익숙하다. 마크다운에선 지원하지 않고 HTML의 details 태그로 사용 가능하다. div markdown=”1” 은 jekyll에서 html사이에 markdown을 인식 하기 위한 코드이다.

<details>
<summary>여기를 눌러주세요</summary>
<div markdown="1">       

😎숨겨진 내용😎

</div>
</details>
  • 여기를 눌러주세요

 

 

reference

 

'기타' 카테고리의 다른 글

이것저것 유용한 사이트  (0) 2021.02.05