Cloudwiki/위키 문법 가이드/컴포넌트

# 컴포넌트 문법

더욱 풍부한 페이지 꾸미기에 사용할 수 있는 문법입니다.

## 컴포넌트

모든 컴포넌트 요소는  형식으로 작성합니다.
색상은 입력하지 않아도 무방한 선택사항입니다.

컴포넌트의 색상 문법은 팔레트`{palette:팔레트}` 또는 커스텀 색상`{bg:컬러코드}{color:컬러코드}` 모두 지원합니다. 컴포넌트 문법 앞에 컬러 문법을 공백 없이 붙이면 적용됩니다. 팔레트 뒤에 커스텀 색상을 붙이는 경우, 해당 색상이 덮어씌워집니다.
`{bi:`, `{mdi: ` 아이콘을 앞에 붙이면 아이콘을 컴포넌트 내부에 포함시킵니다.


### 배지
기본 사이즈의 칩입니다.

[배지]
[배지]
[배지]
```
{badge:배지}
{palette:primary}{badge:배지}
{bi:bootstrap-fill}{palette:primary}{badge:배지}
```

### 태그
배지보다 작은 칩입니다.

[태그]
[태그]
[태그]
```
{tag:태그}
{palette:primary}{tag:태그}
{bi:bootstrap-fill}{palette:primary}{tag:태그}
```

### 스탯
제목과 내용으로 나눠진 칩입니다.

$1 (가격)
$1 (가격)
$1 (가격)
```
{palette:primary}{stat:$1|가격}
{palette:primary}{stat:$1|가격}
{bi:bootstrap-fill}{palette:primary}{stat:$1|가격}
```
### 버튼
링크 버튼입니다.

[버튼](https://youtu.be/dQw4w9WgXcQ?si=2jdHDmAX8gMPt3kI)
[버튼](https://youtu.be/dQw4w9WgXcQ?si=2jdHDmAX8gMPt3kI)
```
{palette:primary}{button:버튼|https://youtu.be/dQw4w9WgXcQ?si=2jdHDmAX8gMPt3kI}
{palette:primary}{bi:bootstrap-fill}{button:버튼|https://youtu.be/dQw4w9WgXcQ?si=2jdHDmAX8gMPt3kI}
```

### 키보드 키
단축키를 키캡 모양으로 표시합니다. `+` 기호로 여러 키를 묶으면 조합 키로 렌더됩니다.
키보드 키 문법은 아이콘 삽입이 불가능합니다.

Ctrl+C 로 복사, Ctrl+Shift+K 로 취소선.
Enter
```
{kbd:Ctrl+C} 로 복사, {kbd:Ctrl+Shift+K} 로 취소선.
{palette:primary}{kbd:Enter}
```

### 진행도 바
퍼센트(0~100) 또는 `a/b` 분수 형태로 진행도를 표시합니다. 뒤에 `|라벨`을 붙이면 라벨이 함께 표시됩니다.
배경 컬러 문법은 진행바, 글씨색 문법은 진행도 텍스트의 색을 변경합니다.

70%
로딩 중: 70%
완료된 작업: 7/10 (70%)
완료율: 85%
연료: 3/10 (30%)
```
{progress:70}
{progress:70|로딩 중}
{progress:7/10|퀘스트 진행도}
{palette:success}{progress:85|완료율}
{palette:danger}{mdi:fire}{progress:3/10|체력}
```

### 가로선
`{hr}` 토큰은 블록 가로선을 삽입합니다.
표준 마크다운 `---` 과 달리 `{hr}` 은 다른 컴포넌트와 같은 문단/단락 안에 자연스럽게 섞어 쓸 수 있고, `:::card` · `:::callout` · `:::tab` · `:::item` 등 블록 문법 본문 내부에서도 안전하게 동작합니다.
색상·아이콘을 앞에 붙이는 문법은 지원하지 않습니다.

상단 내용

하단 내용

```
상단 내용
{hr}
하단 내용
```

### 줄바꿈
`{br}` 토큰은 줄바꿈을 삽입합니다.
표 셀, 틀 인자, `:::card`, `:::info` 같은 콜아웃, 펼치기/접기 제목, `{badge:...}` 같은 인라인 컴포넌트 내부처럼 평소 줄바꿈을 직접 입력할 수 없는 위치에서도 자유롭게 사용할 수 있습니다.
코드 블록과 인라인 코드 안에서는 토큰이 그대로 출력되어, 문서화 예제 안에 안전하게 노출할 수 있습니다.

>  위키 에디터의 표 셀 안에서 Shift+Enter 단축키를 누르면 `{br}` 토큰이 자동으로 삽입됩니다. 자세한 내용은 [[Cloudwiki/에디터/표]] 의 *셀 안 줄바꿈* 절을 참고하세요.

상단 내용
하단 내용

| 셀 1 | 줄바꿈
이 들어간 셀 |
| --- | --- |
| 내용 A | 내용 B |

```
상단 내용{br}하단 내용

| 셀 1 | 줄바꿈{br}이 들어간 셀 |
| --- | --- |
| 내용 A | 내용 B |
```

## 블록
블록 문법 내부에 다른 블록 문법을 삽입하는것이 가능합니다.

`grid`, `row`, `canvas` 문법을 중첩해 사용하는것은 권장하지 않습니다.

### 카드

제목과 내용 부분에 각각 다른 색상을 적용할 수 있습니다.
컬러 팔레트와 커스텀 색상을 모두 지원합니다.

카드 제목
내용


```
:::card {palette:typescript} 카드 제목
{palette:success}내용
:::
```

### 콜아웃
내용을 주제별 색상·아이콘과 함께 강조해 보여주는 박스입니다. 6가지 타입을 지원합니다.

| 타입 | 용도 | 기본 제목 |
| :---: | --- | --- |
| info | 정보 안내 | 정보 |
| tip | 유용한 팁 | 팁 |
| success | 성공/완료 메시지 | 성공 |
| warning | 주의 사항 | 주의 |
| danger | 위험·경고 | 위험 |
| note | 일반 메모 | 노트 |

타입 뒤에 공백으로 제목을 적으면 기본 제목을 덮어씁니다. 제목을 생략하면 기본 제목이 표시됩니다. 헤더 색은 타입 뒤에 `{bg:}`/`{color:}`/`{palette:}` 토큰으로, 본문 색은 카드와 동일하게 본문 맨 앞에 같은 토큰을 붙여 지정합니다.

정보:
가벼운 안내 문구를 담습니다.


팁: 단축키
`{kbd:Ctrl+S}` 로 저장할 수 있습니다.


주의: 백업 필수
배포 전 반드시 데이터베이스 백업을 확인하세요.


위험: 파괴적 작업
`DROP TABLE` 은 되돌릴 수 없습니다.


```
:::info
가벼운 안내 문구를 담습니다.
:::

:::tip 단축키
`{kbd:Ctrl+S}` 로 저장할 수 있습니다.
:::

:::warning 백업 필수
배포 전 반드시 데이터베이스 백업을 확인하세요.
:::

:::danger 파괴적 작업
`DROP TABLE` 은 되돌릴 수 없습니다.
:::
```

### 임베드
임베드 카드입니다. 
왼쪽에 강조선을 두고 본문을 감싸는 형태로 표시되며, 본문 안에 유튜브 등 임베딩이 지원되는 링크를 넣으면 `{embed:URL}` 형식으로 쓰지 않아도 플레이어가 표시됩니다.


```
:::embed <제목> {color:강조색} (제목·색 모두 선택사항)
내용
:::
```
- 제목은 `:::embed` 뒤에 공백으로 이어 붙입니다. 생략 가능.
- `{color:...}` 또는 `{bg:...}` 토큰 한 개를 헤더에 붙이면 왼쪽 강조선 색으로 적용됩니다.
- 본문 컬러는 지원하지 않습니다.
- 색을 생략하면 기본 강조선(링크 색)이 사용됩니다.

Bad Apple!!
https://youtu.be/FtutLA63Cp8?si=DMEsZCTd7NJWW_LP

본문에 자유롭게 설명을 쓸 수 있습니다. YouTube · Spotify · Google Maps · 니코니코 등 임베딩을 지원하는 링크 삽입을 권장합니다.



제목과 색을 생략하면 기본 색 강조선의 단순한 박스로 렌더됩니다.


```
:::embed Bad Apple!! {palette:reverse}
https://youtu.be/FtutLA63Cp8?si=DMEsZCTd7NJWW_LP

본문에 자유롭게 설명을 쓸 수 있습니다. YouTube · Spotify · Google Maps · 니코니코 등 임베딩을 지원하는 링크 삽입을 권장합니다.
:::

:::embed
제목과 색을 생략하면 기본 색 강조선의 단순한 박스로 렌더됩니다.
:::
```


### 그리드

컴포넌트 요소들을 동적으로 화면 레이아웃에 따라 반응형으로 배치합니다.


제목 (내용)
제목 (내용)
제목 (내용)
제목 (내용)
제목 (내용)
제목 (내용)

| 제목1 | 제목2 | 제목3 |
| --- | --- | --- |
| 내용1 | 내용2 | 내용3 |

| 제목1 | 제목2 | 제목3 |
| --- | --- | --- |
| 내용1 | 내용2 | 내용3 |


```
:::grid
{palette:primary}{stat:제목|내용}
{palette:secondary}{stat:제목|내용}
{palette:success}{stat:제목|내용}
{palette:info}{stat:제목|내용}
{palette:warning}{stat:제목|내용}
{palette:danger}{stat:제목|내용}

| 제목1 | 제목2 | 제목3 |
| --- | --- | --- |
| 내용1 | 내용2 | 내용3 |

| 제목1 | 제목2 | 제목3 |
| --- | --- | --- |
| 내용1 | 내용2 | 내용3 |
:::
```


#### 그리드 옵션

`:::grid` 뒤에 옵션 토큰을 붙이면 열 수·비율·간격·정렬을 제어할 수 있습니다. 옵션을 생략하면 위처럼 화면 폭에 맞춰 자동으로 줄바꿈되는 반응형 배치가 그대로 유지됩니다. 좁은 화면(모바일)에서는 옵션과 무관하게 한 열로 접혀 세로로 쌓입니다.

| 토큰 | 값 | 설명 |
| --- | --- | --- |
| `{cols:N}` | `2` ~ `6` | 항상 N개의 균등한 열로 배치 |
| `{template:비율}` | `1-1` · `1-2` · `2-1` · `1-3` 등 프리셋, 또는 `8-4` · `3-3-6` 같은 임의 정수 비율 | 열별 너비 비율을 직접 지정 (비대칭 배치) |
| `{gap:크기}` | `sm` · `md` · `lg` | 칸 사이 간격 |
| `{align:정렬}` | `start` · `center` · `stretch` | 세로 정렬 |

`{cols:}` 와 `{template:}` 를 함께 쓰면 더 구체적인 `{template:}` 가 우선합니다.


1 (첫째)
2 (둘째)
3 (셋째)


```
:::grid {cols:3} {gap:md}
{palette:primary}{stat:1|첫째}
{palette:success}{stat:2|둘째}
{palette:info}{stat:3|셋째}
:::
```

`{template:}` 로 비대칭 2열(예: 사이드바 + 본문)을 만들 수 있습니다.


좁음 (1fr)
넓음 (3fr)


```
:::grid {template:1-3}
{palette:secondary}{stat:좁음|1fr}
{palette:primary}{stat:넓음|3fr}
:::
```

위 프리셋 외에 `8-4`, `3-3-6`, `5-7` 처럼 **임의의 정수 비율**도 직접 적을 수 있습니다 (열 2~6개, 각 값 1~12). 예를 들어 `{template:8-4}` 는 8:4 비율의 두 열을 만듭니다. 좁은 화면에서는 프리셋과 동일하게 한 열로 접힙니다.


8 (주 콘텐츠)
4 (사이드)


```
:::grid {template:8-4} {gap:md}
{palette:primary}{stat:8|주 콘텐츠}
{palette:secondary}{stat:4|사이드}
:::
```

### row

컴포넌트 요소들을 가로로 배치합니다.
내용이 길어지면 가로로 스크롤해 볼 수 있습니다.


제목 (내용)
제목 (내용)
제목 (내용)
제목 (내용)
제목 (내용)
제목 (내용)

| 제목1 | 제목2 | 제목3 |
| --- | --- | --- |
| 내용1 | 내용2 | 내용3 |

| 제목1 | 제목2 | 제목3 |
| --- | --- | --- |
| 내용1 | 내용2 | 내용3 |


```
:::row
{palette:primary}{stat:제목|내용}
{palette:secondary}{stat:제목|내용}
{palette:success}{stat:제목|내용}
{palette:info}{stat:제목|내용}
{palette:warning}{stat:제목|내용}
{palette:danger}{stat:제목|내용}

| 제목1 | 제목2 | 제목3 |
| --- | --- | --- |
| 내용1 | 내용2 | 내용3 |

| 제목1 | 제목2 | 제목3 |
| --- | --- | --- |
| 내용1 | 내용2 | 내용3 |
:::
```


### 캔버스

12개의 가상 열을 기준으로 각 영역이 차지할 너비를 직접 지정하는 자유 배치 블록입니다. 그리드/row 가 칸을 균등하게(또는 가로 스크롤로) 배치하는 것과 달리, 캔버스는 영역마다 다른 너비를 줄 수 있어 본문 + 사이드바처럼 비대칭 레이아웃에 적합합니다.

부모 `:::canvas` 안에 자식 `:::area` 를 나열하고, 각 `:::area {span:N}` 으로 12칸 중 차지할 칸 수(`N` = 1~12)를 지정합니다. `{span:}` 을 생략하면 전체 너비를 차지하며, 한 줄의 `span` 합이 12가 되도록 배분하는 것을 권장합니다. 좁은 화면(모바일)에서는 모든 영역이 한 열로 접혀 세로로 쌓입니다.

- 부모 `:::canvas {gap:sm|md|lg}` 로 영역 사이 간격을 조절할 수 있습니다.
- 각 `:::area` 는 제목 줄에 `{bg:}`/`{color:}`/`{palette:}` 를 붙여 영역 배경·글자색을 줄 수 있습니다 (카드와 달리 본문 첫 줄이 아닌 `:::area` 줄에 작성).
- 각 `:::area` 줄에 `{panel}` 토큰을 붙이면 카드와 동일한 여백·테두리가 적용되어, 색 배경을 준 영역이 모서리에 붙은 밋밋한 블록이 아닌 깔끔한 패널로 보입니다.
- 에디터 자동완성에서 `:::canvas` 를 선택하면 8/4 `{panel}` `:::area` 골격이 자동으로 삽입되어, 12칸 합·`span` 을 직접 외우지 않아도 됩니다.
- 영역 안에는 카드·콜아웃·표 등 다른 블록과 일반 마크다운을 자유롭게 넣을 수 있습니다.
- (반응형) `:::area` 줄에 `{span-md:N}`(N=1~12) 을 붙이면 중간 폭(태블릿)에서 차지할 칸 수를 따로 지정할 수 있습니다 — 예: 데스크톱 `{span:8}`/`{span:4}` 에 `{span-md:12}` 를 더하면 태블릿에서 12/12 로 단계적으로 접힙니다.
- (반응형) `{order:1~9}` 는 모바일 1열 접힘 시 표시 순서를 지정합니다(토큰이 없는 영역이 먼저 표시). "사이드바를 모바일에서는 본문 아래로" 같은 배치에 사용합니다.
- (반응형) `{sticky}` 를 붙인 영역은 스크롤해도 화면 상단에 고정됩니다(긴 본문 + 짧은 사이드바 조합에 유용, 모바일 1열에서는 해제).



**주 콘텐츠 (8/12)**

본문을 자유롭게 작성합니다.


**사이드 (4/12)**

보조 정보를 담습니다.



```
:::canvas {gap:md}
:::area {span:8} {panel} {palette:primary}
**주 콘텐츠 (8/12)**

본문을 자유롭게 작성합니다.
:::
:::area {span:4} {panel} {palette:secondary}
**사이드 (4/12)**

보조 정보를 담습니다.
:::
:::
```

세 영역을 4:4:4 로 나누는 등 `span` 합이 12가 되도록 배분합니다. (`{panel}` 을 생략하면 테두리·여백 없이 영역만 배치됩니다.)



A (4)


B (4)


C (4)



```
:::canvas
:::area {span:4} {palette:info}
A (4)
:::
:::area {span:4} {palette:success}
B (4)
:::
:::area {span:4} {palette:warning}
C (4)
:::
:::
```

### 탭

여러 패널을 하나의 영역에서 전환해 보여주는 컴포넌트입니다.
부모 `:::tabs` 안에 자식 `:::tab 제목` 을 나열합니다. 첫 번째 탭이 기본 활성 탭이며, 탭 스트립은 항상 좌측 정렬됩니다.
자식 제목 뒤에 `{icon:bi-...}` 또는 `{icon:mdi-...}` 토큰으로 아이콘을 붙일 수 있습니다.


개요
이 문서의 개요를 적습니다.

사용법
사용 방법을 단계별로 안내합니다.

자주 묻는 질문
- Q1: ...
- Q2: ...



```
:::tabs
:::tab 개요 {icon:bi-info-circle}
이 문서의 개요를 적습니다.
:::
:::tab 사용법 {icon:bi-book}
사용 방법을 단계별로 안내합니다.
:::
:::tab 자주 묻는 질문
- Q1: ...
- Q2: ...
:::
:::
```


### 아코디언

세로로 배치된 항목들을 펼쳤다 접을 수 있는 컴포넌트입니다.
부모 `:::accordion` 안에 자식 `:::item 제목` 을 나열합니다. 기본은 단일 열림 모드로, 한 항목을 펼치면 나머지는 자동으로 접힙니다.

자식 제목 뒤에 `{open}` 토큰을 붙이면 해당 항목이 초기에 펼쳐진 상태로 시작합니다. 단일 열림 모드에서 `{open}` 이 여러 개 있으면 첫 번째만 인정됩니다.
부모 헤더에 `{multiple}` 토큰을 붙이면 다중 열림 모드로 전환되어 여러 항목을 동시에 열어둘 수 있습니다.
탭과 동일하게 자식 제목에 `{icon:bi-...}` / `{icon:mdi-...}` 아이콘을 붙일 수 있습니다.

아코디언 항목 헤더는 본문 헤딩이 아니므로 목차(TOC)·자동 번호·섹션 편집 버튼 대상에서 제외됩니다. 항목 본문 안에 직접 작성한 `## 제목` 등 일반 헤딩은 평소대로 TOC 에 표시됩니다.


자주 묻는 질문 1
초기 진입 시 펼쳐진 상태로 표시됩니다.

자주 묻는 질문 2
다른 항목을 펼치면 자동으로 접힙니다.

자주 묻는 질문 3
일반 항목입니다.



```
:::accordion
:::item 자주 묻는 질문 1 {open}
초기 진입 시 펼쳐진 상태로 표시됩니다.
:::
:::item 자주 묻는 질문 2 {icon:bi-question-circle}
다른 항목을 펼치면 자동으로 접힙니다.
:::
:::item 자주 묻는 질문 3
일반 항목입니다.
:::
:::
```


항목 A
다중 열림 모드입니다.

항목 B
여러 항목을 동시에 펼쳐둘 수 있습니다.



```
:::accordion {multiple}
:::item 항목 A {open}
다중 열림 모드입니다.
:::
:::item 항목 B {open}
여러 항목을 동시에 펼쳐둘 수 있습니다.
:::
:::
```

### 스탭

번호가 매겨진 단계를 순서대로 보여주는 컴포넌트입니다.
부모 `:::steps` 안에 자식 `:::step 제목` 을 나열합니다. 각 단계에는 자동으로 1번부터 순번이 매겨집니다.

자식 제목 뒤에 `{status:done}` · `{status:current}` · `{status:todo}` 토큰으로 단계의 상태를 표시할 수 있습니다.

| 상태 | 마커 아이콘 | 의미 |
| :---: | :---: | --- |
| `done` | 채워진 체크 | 완료된 단계 |
| `current` | 채워진 원 | 현재 진행 중인 단계 |
| `todo` | 빈 원 | 아직 진행하지 않은 단계 (기본값) |

스탭 항목 헤더는 본문 헤딩이 아니므로 목차(TOC)·자동 번호·섹션 편집 버튼 대상에서 제외됩니다. 항목 본문 안에 작성한 일반 헤딩은 평소대로 TOC 에 표시됩니다.


1. 저장소 클론
`git clone` 으로 저장소를 받아옵니다.

2. 의존성 설치
`npm install` 을 실행합니다.

3. 개발 서버 실행
`npm run dev` 로 로컬에서 확인합니다.



```
:::steps
:::step 저장소 클론 {status:done}
`git clone` 으로 저장소를 받아옵니다.
:::
:::step 의존성 설치 {status:current}
`npm install` 을 실행합니다.
:::
:::step 개발 서버 실행
`npm run dev` 로 로컬에서 확인합니다.
:::
:::
```

### 플로팅 패널

본문 문단이 옆을 자연스럽게 감싸며 흐르는 좌/우 고정 패널입니다. 나무위키의 우측 정보 상자처럼 "본문 옆에 붙는 보조 콘텐츠"를 만들 때 사용합니다.

- `{left}` / `{right}` — 패널을 붙일 방향 (기본 `right`)
- `{span:3~6}` — 12칸 기준 패널 폭 (기본 `4`, 캔버스와 동일한 어휘)
- 모바일(좁은 화면)에서는 옆으로 감싸는 배치가 풀리고 작성 위치에 전체 폭으로 쌓입니다.
- 패널 안에는 이미지·표·컴포넌트 등 일반 마크다운을 자유롭게 넣을 수 있습니다.


![Cloudwiki-로고.jpg](https://wiki.vialinks.xyz/media/images/Cloudwiki-로고.jpg)

| 항목 | 값 |
| --- | --- |
| 예시 | 플로팅 패널 |

플로팅 패널 오른쪽에 작성한 본문 문단은 패널 왼쪽을 자연스럽게 감싸며 흐릅니다. 문단이 패널보다 길어지면 패널 아래부터는 전체 폭을 사용합니다.

```
:::float {right} {span:4}
![대표 이미지](이미지주소)

| 항목 | 값 |
| --- | --- |
| 출시 | 2007-08-31 |
:::
본문 문단은 패널 왼쪽을 자연스럽게 감싸며 흐릅니다…
```

### 인포박스

플로팅 패널 위에 제목 헤더와 카드 테두리를 얹은 프리셋으로, 나무위키식 프로필 상자를 한 번에 만듭니다.

- `:::infobox 제목` 형식으로 제목을 쓰고, 제목 줄에 `{palette:}`/`{bg:}`/`{color:}` 로 헤더 색을 지정할 수 있습니다.
- `{left|right}`·`{span:3~6}` 토큰도 플로팅 패널과 동일하게 사용 가능합니다(기본 우측/4칸).
- 인포박스 안에서는 구분 행(`| --- |`) 없이 `| 항목 | 값 |` 행만 나열해도 자동으로 표로 표시됩니다.
- 이미지는 카드 폭에 맞게 자동 배치됩니다. `{age:}`·`{dday:}` 같은 타임스탬프 토큰과 조합하면 좋습니다.
- 틀과 시너지가 큽니다: `틀:인물정보` 같은 틀 본문에 인포박스를 넣고 `{{{파라미터}}}` 로 채우면, 문서에서는 `{{틀:인물정보|이름=…|생일=…}}` 한 줄로 표준 인포박스를 얻습니다.

하츠네 미쿠
![Cloudwiki-로고.jpg](https://wiki.vialinks.xyz/media/images/Cloudwiki-로고.jpg)
| 발매일 | 2007-08-31 |
| 개발사 | 크립톤 퓨처 미디어 |
| 나이 |  |

인포박스 옆의 본문은 플로팅 패널과 동일하게 카드 왼쪽을 감싸며 흐릅니다. 프로필 이미지, 항목-값 표, 타임스탬프 토큰을 조합해 표준적인 인물/작품 소개 상자를 만들 수 있습니다.

```
:::infobox 하츠네 미쿠 {palette:primary}
![프로필](이미지주소)
| 발매일 | 2007-08-31 |
| 개발사 | 크립톤 퓨처 미디어 |
| 나이 | {age:2007-08-31} |
:::
```

### 갤러리

이미지 여러 장을 균등한 정사각 썸네일 그리드로 배치합니다. 캡션은 이미지의 대체 텍스트(alt)가 사용되며, 썸네일을 클릭하면 원본 이미지가 새 탭으로 열립니다.

- `{cols:2~6}` — 열 수 (기본 `3`, 모바일에서는 항상 2열)
- 블록 안의 이미지(`![캡션](주소)`)만 수집되며 이미지가 아닌 내용은 무시됩니다.


![로고 A](https://wiki.vialinks.xyz/media/images/Cloudwiki-로고.jpg)
![로고 B](https://wiki.vialinks.xyz/media/images/Cloudwiki-로고.jpg)
![로고 C](https://wiki.vialinks.xyz/media/images/Cloudwiki-로고.jpg)


```
:::gallery {cols:3}
![캡션 A](이미지주소)
![캡션 B](이미지주소)
![캡션 C](이미지주소)
:::
```