poi/syntax의 블로그

Notedown 문법 가이드

Notedown은 마크다운을 기반으로 확장된 마크업 언어입니다. 이 문서는 Notedown의 전체 문법을 설명합니다.

메타데이터 (@meta)

메타데이터는 문서의 최상단에 위치하며, @meta key=value 형태로 정의합니다. 정의된 값은 문서 내에서 @{key} 로 참조할 수 있습니다.

기본 정의

@meta title=마이 블로그
@meta author=홍길동
@meta date=2026-02-12

문서의 나머지 내용

값 참조

@{key} 형태로 정의된 meta 값을 본문에서 불러올 수 있습니다.

@meta title=내 첫 번째 글
@meta author=김철수

# @{title}

작성자: @{author}

이스케이프

문서 최상단에서 @meta처럼 보이는 일반 텍스트를 쓰려면 \@meta로 이스케이프합니다. 본문 중간의 @meta는 자동으로 일반 텍스트로 처리됩니다.

\@meta 이것은 일반 텍스트입니다.

헤딩 (제목)

# 기호의 개수로 제목 수준을 결정합니다. H1부터 H6까지 지원합니다.

# H1 제목
## H2 제목
### H3 제목
#### H4 제목
##### H5 제목
###### H6 제목

문단

빈 줄(하나 이상의 연속된 개행)로 문단을 구분합니다. 각 문단은 <p> 태그로 감싸지며, 문단 내의 각 줄은 자동으로 <br>로 구분됩니다.

안녕하세요.
반갑습니다.
잘 지내시죠?

오늘 날씨가 참 좋네요.
내일은 비가 온다고 하니 우산 챙기세요.

텍스트 꾸미기

기본 서식

**굵은 텍스트**
*기울임꼴 텍스트*
__밑줄 텍스트__
~~취소선 텍스트~~
***굵고 기울임꼴 텍스트***

텍스트 색상

|색상,텍스트| 형태로 텍스트 색상을 지정합니다. f#은 전경색, b#은 배경색을 지정합니다.

|red,빨간색 텍스트|
|f#00FF00,녹색 텍스트|
|b#0000FF,파란색 배경 텍스트|
|f#yellow,b#green,노란색 텍스트와 녹색 배경|

다크모드 색상

F#은 다크모드 전경색, B#은 다크모드 배경색을 지정합니다. 라이트/다크 모드별로 다른 색상을 설정할 수 있습니다.

|f#000000,F#FFFFFF,라이트에서 검정, 다크에서 흰색|
|b#FFFFFF,B#000000,라이트에서 흰 배경, 다크에서 검정 배경|
|f#000,F#FFF,b#EEE,B#111,완전한 테마 대응 텍스트|

색상 이스케이프

색상 구문을 무시하려면 \| 또는 태그 앞에 \를 붙입니다.

\|red,색상이 적용되지 않습니다.\|
|\f#00FF00,색상이 적용되지 않습니다.|

인라인 코드

백틱(`)으로 인라인 코드를 감쌉니다. 코드 내부에서는 다른 서식이 적용되지 않습니다.

`인라인 코드 블록`

LaTeX 수식

$로 감싸서 인라인 LaTeX 수식을 작성합니다.

$E=mc^2$
수학 공식: $a^2 + b^2 = c^2$

이미지

기본 이미지

! 뒤에 대괄호(대체 텍스트)와 소괄호(URL)를 사용합니다.

![로고 이미지](https://example.com/logo.png)

크기 및 정렬

대체 텍스트에 w#(너비), h#(높이), a#(정렬)을 지정할 수 있습니다. 속성은 쉼표로 구분합니다.

![w#200px,작은 이미지](./image.jpg)
![h#150px,높은 이미지](./image.jpg)
![w#50%,a#center,가운데 정렬 이미지](./image.jpg)
![w#100px,h#100px,a#right,오른쪽 정렬](./image.jpg)

종횡비

p#으로 이미지의 종횡비를 지정합니다. 값은 CSS aspect-ratio 형식(너비/높이)으로 작성합니다.

![p#16/9,와이드 이미지](./wide-image.jpg)
![p#1/1,정사각형 이미지](./square-image.jpg)
![p#4/3,w#100%,반응형 이미지](./responsive-image.jpg)

링크가 있는 이미지

이미지를 링크로 감싸서 클릭 시 이동하도록 설정할 수 있습니다.

[![로고](./logo.png)](https://example.com)

비디오

기본 비디오

@ 뒤에 대괄호(대체 텍스트)와 소괄호(URL)를 사용합니다.

@[내 동영상](https://example.com/video.mp4)

크기 및 정렬

이미지와 동일하게 w#, h#, a#을 사용합니다.

@[w#640px,h#360px,HD 비디오](./video.mp4)
@[w#100%,a#center,가운데 정렬 비디오](./video.mp4)

종횡비

p#으로 비디오의 종횡비를 지정합니다. 값은 CSS aspect-ratio 형식(너비/높이)으로 작성합니다.

@[p#16/9,w#100%,와이드 영상](./wide-video.mp4)
@[p#9/16,w#300px,세로 영상](./vertical-video.mp4)
@[p#4/3,클래식 비율 영상](./classic-video.mp4)

YouTube 임베드

y#true를 사용하면 YouTube iframe으로 렌더링합니다. URL은 YouTube embed URL을 사용해야 합니다.

@[y#true](https://www.youtube.com/embed/dQw4w9WgXcQ?si=4hkhMqAw2hg9s6K2)
@[y#true,w#560px,h#315px](https://www.youtube.com/embed/dQw4w9WgXcQ?si=4hkhMqAw2hg9s6K2)
@[y#true,w#800px,h#450px,a#center,영상 제목](https://www.youtube.com/embed/dQw4w9WgXcQ?si=4hkhMqAw2hg9s6K2)

코드 블록

기본 코드 블록

세 개의 백틱(```)으로 감쌉니다. 첫 줄에 언어를 지정하면 구문 강조가 적용됩니다.

```python
def hello_world():
    print("Hello, World!")
```

iframe 코드 블록

언어를 iframe으로 지정하면 HTML이 iframe으로 렌더링됩니다. 크기(w#, h#), 종횡비(p#), 리사이즈(r#) 속성을 지정할 수 있습니다.

리사이즈 옵션: r#w(너비만), r#h(높이만), r#b(양방향), r#n(불가)

```iframe,w#500px,h#200px,r#b
<h1>크기 조절 가능한 iframe</h1>
<p>양방향으로 크기 조절이 가능합니다.</p>
```
```iframe,w#100%,p#16/9
<div>16:9 종횡비의 전체 너비 iframe</div>
```

테이블

기본 구조

파이프(|)와 하이픈(-)으로 테이블을 구성합니다. 헤더 행, 구분선 행, 데이터 행으로 이루어집니다.

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

정렬

구분선에 콜론(:)을 사용하여 정렬을 지정합니다.

| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|:---------|:----------:|----------:|
| 왼쪽 | 가운데 | 오른쪽 |
| 텍스트 | 텍스트 | 텍스트 |

셀 내 서식 & 이스케이프

셀 안에서 텍스트 서식을 사용할 수 있습니다. 파이프 문자를 포함하려면 \|로 이스케이프합니다.

| 기능 | 예시 |
|------|------|
| 굵게 | **굵은 텍스트** |
| 기울임 | *기울임 텍스트* |
| 이스케이프 | 파이프는 \| 로 표시 |

인용 (Blockquote)

기본 인용

꺾쇠 기호(>)를 사용합니다. 중첩하려면 >를 추가합니다.

> 이것은 인용된 텍스트입니다.

> 첫 번째 수준의 인용입니다.
>> 두 번째 수준의 인용입니다.
>>> 세 번째 수준의 인용입니다.

아이콘 추가

> 다음에 아이콘 이름과 >를 사용합니다. Google Material 아이콘을 지원합니다.

>info> 정보 아이콘이 있는 인용입니다.
>warning> 경고 아이콘이 있는 인용입니다.
>error> 오류 아이콘이 있는 인용입니다.
>question> 질문 아이콘이 있는 인용입니다.

제목 추가

t#제목을 사용하여 인용에 제목을 추가합니다.

>warning,t#경고> 경고 아이콘과 제목이 있는 인용입니다.
>info,t#정보> 정보 아이콘과 제목이 있는 인용입니다.

색상 지정

c#색상으로 라이트 모드 색상, C#색상으로 다크모드 색상을 지정합니다.

>info,c#blue> 파란색 인용입니다.
>error,c#red,C#pink> 라이트에서 빨강, 다크에서 핑크
>info,t#정보,c#green> 녹색 정보 아이콘과 제목이 있는 인용

여러 줄 인용

각 줄 앞에 동일한 수의 꺾쇠 기호를 붙입니다.

> 첫 번째 줄의 인용입니다.
> 두 번째 줄의 인용입니다.
> 세 번째 줄의 인용입니다.
>> 중첩된 인용입니다.
>> 중첩된 인용의 두 번째 줄입니다.
> 다시 첫 번째 수준입니다.

접는 문단 (Collapse)

|>로 시작하고 />로 끝내는 토글 형태의 콘텐츠입니다. 제목을 추가하려면 |> 뒤에 텍스트를 입력합니다.

기본 사용

|>
이것은 접혀있는 콘텐츠입니다.
클릭하면 펼쳐집니다.
/>

|> 자세히 보기
추가 정보가 여기에 있습니다.
/>

중첩

접는 문단 내부에 다른 접는 문단을 포함할 수 있습니다.

|> 메인 섹션
메인 섹션의 콘텐츠입니다.

|> 서브섹션
서브섹션의 콘텐츠입니다.
/>

추가 메인 콘텐츠입니다.
/>

내부 서식

접는 문단 내부에서 텍스트 서식, 링크, 이미지 등을 사용할 수 있습니다.

|> 자세한 설명
**굵은 텍스트**로 강조된 설명입니다.
[링크](https://example.com)도 포함할 수 있습니다.
/>

특수 구문

줄 바꿈 (\\n)

같은 문단 내에서 강제 줄 바꿈을 합니다. 여러 개를 연속하면 여러 줄을 비울 수 있습니다.

이것은 첫 번째 줄입니다.
\n
\n
\n
이것은 두 번째 줄입니다.

새 문단 (\\np)

빈 줄 없이도 새 문단을 시작할 수 있습니다.

이것은 첫 번째 문단입니다.
\np
이것은 두 번째 문단입니다.

Notedown은 지속적으로 발전하고 있습니다.