본문 바로가기

markdown

마크다운 - 고급

코드(Code)

코드는 텍스트 내에 소스 코드나 코드 조각을 표시하는 데 사용됩니다. 특정 프로그래밍 언어의 구문이나 명령어를 강조하고, 일반 텍스트와 구분하여 보여주기 위해 사용됩니다. 인라인 코드와 코드 블록이 있습니다.

인라인 코드

작은 코드 조각이나 단어를 강조할 때 사용합니다.

백틱(`)으로 텍스트를 감싸서 인라인 코드를 만듭니다.

작성 예
`인라인 코드`

결과

인라인 코드

코드 블록

긴 코드 조각이나 전체 프로그램을 표시할 때 사용합니다.

세 개의 백틱(```) 또는 들여쓰기로 여러 줄의 코드를 작성합니다.

작성 예
```
코드 블록 라인 1
코드 블록 라인 2
코드 블록 라인 3
```

결과

코드 블록 라인 1
코드 블록 라인 2
코드 블록 라인 3  

세 개의 백틱(```)옆예 코드 블록에 사용할 언어를 지정할 수 있습니다. 언어에 따라 코드의 구문이 강조됩니다.

python 코드 블록

```python
import os

current_path = os.getcwd()
print(current_path)
```

import os

current_path = os.getcwd()
print(current_path)

json 코드 블록

```json
{
"name": "홍길동",
"age": 25,
"address": "서울시 강남구"
}
```

{
  "name": "홍길동",
  "age": 25,
  "address": "서울시 강남구"
}

체크박스가 있는 목록

사용자가 특정 항목을 완료했는지 여부를 나타내기 위해 체크박스를 사용할 수 있습니다. 체크박스를 목록에서 사용할 수 있습니다. 이 기능은 할 일 목록, 작업 추적, 체크리스트 등을 만들 때 유용합니다.

체크박스가 있는 목록은 대시(-)와 대괄호([ ])를 사용하여 만듭니다. 대괄호 안에 x를 입력하면 체크박스가 선택된 상태로 표시됩니다. 대괄호 안에 공백을 입력하면 체크박스가 선택되지 않은 상태로 표시됩니다.

작성 예

- [x] 목록 1
- [ ] 목록 2
- [ ] 목록 3

결과

  • 목록 1
  • 목록 2
  • 목록 3

문서 내에서 직접 체크하거나 해제할 수는 없습니다. 체크 상태를 변경하려면 마크다운 파일을 편집해야 합니다. 일부 마크다운 렌더러에서는 체크박스를 인터랙티브하게 만들어, 사용자가 직접 클릭하여 체크 상태를 변경할 수 있습니다.

마크다운에서 표(Table)는 데이터를 구조화하여 보여주는 데 유용합니다. 행과 열을 사용하여 데이터를 정렬하여 간단히 표를 만들 수 있습니다.

표 만들기 기본 구조

1. 헤더 만들기
 - 헤더는 각 열의 제목을 나타냅니다.
 - 헤더는 파이프(|) 기호로 구분된 텍스트로 만들며, 각 열 제목을 입력합니다.
 - 예시: | 헤더 1 | 헤더 2 | 헤더 3 |
2. 헤더와 본문 구분
 - 헤더와 본문을 구분하는 줄을 만듭니다.
 - 이 줄은 하이픈(-)과 파이프(|) 기호를 사용하여 만들며, 각 열의 헤더 아래에 위치합니다.
 - 예시: | ------ | ------ | ------ |
3. 본문 만들기
 - 본문의 각 행은 파이프 기호로 구분된 텍스트로 만들며, 각 열에 해당하는 데이터를 입력합니다.
 - 예시: | 데이터 1 | 데이터 2 | 데이터 3 |

작성 예

| 헤더 1 | 헤더 2 | 헤더 3 |
| ------ | ------ | ------ |
| 데이터 1 | 데이터 2 | 데이터 3 |
| 데이터 4 | 데이터 5 | 데이터 6 |

결과

헤더 1 헤더 2 헤더 3
데이터 1 데이터 2 데이터 3
데이터 4 데이터 5 데이터 6

표 정렬

표의 열을 정렬하려면 헤더 아래에 위치한 줄에서 콜론(:)을 사용하여 열의 정렬을 지정합니다.

  • 왼쪽 정렬: 콜론(:)을 열 제목 왼쪽에 입력합니다.
  • 오른쪽 정렬: 콜론(:)을 열 제목 오른쪽에 입력합니다.
  • 가운데 정렬: 콜론(:)을 열 제목 양쪽에 입력합니다.
  • 정렬을 지정하지 않으면 기본적으로 왼쪽 정렬됩니다.
  • 헤더 아래에 위치한 줄에 콜론(:)을 입력하지 않으면 표의 열이 정렬되지 않습니다.

작성 예

| 헤더 1 | 헤더 2 | 헤더 3 |
| :------ | :------: | ------: |
| 길이가 긴 데이터 1 | 길이가 긴 데이터 2 | 길이가 긴 데이터 3 |
| 데이터 4 | 데이터 5 | 데이터 6 |

결과

헤더 1 헤더 2 헤더 3
길이가 긴 데이터 1 길이가 긴 데이터 2 길이가 긴 데이터 3
데이터 4 데이터 5 데이터 6

각주 추가하기

각주는 문서 내 특정 단어나 구문에 대한 추가적인 설명을 제공하는 데 사용됩니다. 문서의 본문에는 간단한 참조 마크로 표시되고, 보다 상세한 설명은 문서 하단에 배치됩니다. 문서의 흐름을 방해하지 않으면서 필요한 상세 정보를 제공 할 수 있습니다.

1. 각주 참조 만들기
  - 본문에서 각주를 참조하려면, 대괄호 안에 캐럿(^)과 각주 식별자(예: 1, note1, 각주 등)를 입력합니다.
  - 예시: 이것은 각주입니다[^1].

2. 각주 정의
  - 문서의 하단(또는 각주를 추가하고자 하는 위치)에 각주의 내용을 정의합니다.
  - 각주 정의는 대괄호 안에 캐럿과 각주 식별자로 시작하며, 콜론(:), 공백, 그리고 각주의 내용이 이어집니다.
  - 예시: [^1]: 이것은 각주의 상세 설명입니다.

작성 예

이것은 본문의 일부이며, 여기에 각주를 추가합니다[^1].

[^1]: 이것은 각주의 상세한 설명입니다. 이 내용은 문서의 하단에 표시됩니다.

결과

각주 참조 마크 표시 - 1
각주 상세 설명 - 문서 하단에 배치

HTML 태그 사용하기

마크다운은 경량 마크업 언어로 최대한 간결하고 읽기 쉬운 문서 작성을 목표로 합니다. HTML 태그를 사용하면 마크다운으로 표현하기 어려운 부분을 표현할 수 있습니다. 하지만 HTML 태그를 사용 하면 마크다운의 본래 목적에 어긋납니다. HTML 태그의 사용 여부는 문서 작성자의 판단 하면서 사용해야 합니다.

이래는 HTML 태그 사용 시 주의 할 점입니다.

  • 렌더링 호환성: 모든 마크다운 렌더러나 플랫폼이 HTML 태그를 지원하는 것은 아닙니다. 일부 환경에서는 HTML 태그가 올바르게 렌더링되지 않을 수 있습니다.
  • 가독성 저하: HTML을 사용하면 마크다운의 간결함과 가독성이 저하될 수 있습니다. 마크다운의 주요 장점 중 하나는 간결성 입니다.

작성 예: 마크다운에서 불가능한 텍스트 색상 변경입니다.

<span style="color: blue;">이 텍스트는 파란색입니다.</span>
<span style="color: red;">이 텍스트는 빨간색입니다.</span>

결과

이 텍스트는 파란색입니다.
이 텍스트는 빨간색입니다.

'markdown' 카테고리의 다른 글

마크다운 - 기본  (0) 2023.12.15