Cloudwiki/에디터/자동완성
정보:
에디터에서 특정 문자를 입력하면 자동완성 메뉴가 떠 위키 문법을 빠르게 삽입할 수 있습니다. 트리거 문자별 동작을 정리합니다. 상위 문서: [[Cloudwiki/에디터]].
# 트리거 문자 한눈에 보기
| 트리거 | 표시되는 자동완성 |
| --- | --- |
| `[[` | 위키 문서 검색 → 위키 링크 |
| `{{` | 틀(템플릿) 문서 검색 |
| `{` | 코드 템플릿 메뉴 (`bi`, `mdi`, `bg`, `color`, `palette`, `dday`, `time`, `timer`, `age`, `calendar`, `kbd`, `progress`, `size`, …) |
| `{bi:` | Bootstrap Icons 검색 |
| `{mdi:` | Material Design Icons 검색 |
| `{icon:` | 위키에 미리 등록된 아이콘 검색 |
| `{bg:` | 배경색 피커 (자주 쓴 색상 + HSV 캔버스) |
| `{color:` | 글자색 피커 |
| `{palette:` | 등록된 팔레트 목록 |
| `{dday:` `{age:` `{calendar:` | 날짜 선택 캘린더 |
| `{time:` `{timer:` | 시각/타이머 입력 캘린더 |
| 줄 시작 `:::` | 블록 컴포넌트 메뉴 (카드/그리드/탭/콜아웃 등) |
| `` 직후 | 이미지 사이즈 옵션 (`icon` / `small` / `medium` / `full`) |
> 색상이 적용된 토큰( `{color:...}` `{bg:...}` `{palette:...}` ) 옆에 표시되는 색상 배지를 클릭하면, 해당 토큰을 다시 편집하는 자동완성이 즉시 열립니다.
---
# 위키 링크
`[[` 를 입력하면 위키 문서 제목을 검색하는 자동완성이 표시됩니다.
선택하면 `[[문서제목]]` 형식으로 삽입됩니다. 표시 텍스트는 `|` 로 직접 추가할 수 있습니다 — 예: `[[Cloudwiki/에디터|에디터 안내]]`.
# 틀 — `{{`
`{{` 를 입력하면 틀(다른 문서 본문을 그대로 가져오는 트랜스클루전) 검색이 열립니다. 사용 방법은 [[Cloudwiki/위키 문법 가이드]] 의 *틀* 절을 참고하세요.
# 코드 템플릿 — `{`
`{` 한 글자만 입력해도 사용 가능한 모든 코드 템플릿이 메뉴로 표시됩니다. 입력을 이어가면 필터링됩니다.
| 항목 | 삽입 형식 | 용도 |
| --- | --- | --- |
| 아이콘 | `{icon:...}` | 사이트에 미리 등록된 아이콘 |
| Bootstrap Icons | `{bi:...}` | Bootstrap Icons 라이브러리 |
| Material Design | `{mdi:...}` | Material Design Icons |
| 배경색 | `{bg:...}` | 인라인/표 셀 등 배경색 지정 |
| 글자색 | `{color:...}` | 글자색 지정 |
| 팔레트 | `{palette:...}` | 등록된 팔레트 적용 |
| D-Day | `{dday:...}` | 지정 날짜까지 남은 일수 |
| 표시 시간 | `{time:...}` | 특정 시각을 고정 표시 |
| 타이머 | `{timer:...}` | 지정 시각으로부터 카운트다운 |
| 만 나이 | `{age:...}` | 생년월일 → 만 나이 |
| 캘린더 | `{calendar:...}` | 날짜를 캘린더 형태로 표시 |
| 키보드 키 | `{kbd:...}` | <kbd>Ctrl</kbd> 같은 키보드 키 |
| 진행도 바 | `{progress:...}` | 진행률 바 |
| 이미지 크기 | `{size:...}` | 이미지 크기 옵션 |
> 사이트 설정에서 "선택 아이콘만 사용" 모드가 켜져 있으면 코드 템플릿 메뉴와 아이콘 자동완성이 등록된 아이콘 위주로 표시됩니다.
# 아이콘 자동완성 — `{bi:` `{mdi:` `{icon:`
해당 접두를 입력하면 아이콘 그리드가 떠 검색·키보드 방향키·엔터로 선택할 수 있습니다.
- `{bi:home` → Bootstrap Icons 의 `home` 관련 아이콘
- `{mdi:cloud` → Material Design Icons 의 `cloud-...` 시리즈
- `{icon:` → 위키 관리자가 등록한 사이트 전용 아이콘
# 색상 자동완성 — `{bg:` `{color:`
`{bg:` 또는 `{color:` 입력 시 색상 피커가 열립니다.
- 자주 사용한 색상 (스와치)
- HSV 캔버스에서 직접 클릭으로 선택
- HEX 코드 직접 입력 (예: `#ff5733`)
- CSS 색상 이름 (예: `red`, `royalblue`)
문서에 이미 적용된 `{bg:...}` / `{color:...}` 토큰 옆의 ▢ 배지를 클릭하면, 그 토큰을 편집하는 자동완성이 다시 열립니다.
# 팔레트 자동완성 — `{palette:`
[[Cloudwiki/설정/컬러 팔레트]] 에 등록된 팔레트 목록이 검색 가능한 형태로 표시됩니다. 기본 프리셋(`primary`, `success`, `warning`, …)도 포함됩니다.
# 타임스탬프 자동완성 — `{dday:` `{age:` `{calendar:` `{time:` `{timer:`
각 타임스탬프 종류에 맞는 입력 UI가 표시됩니다.
- `{dday:` `{age:` `{calendar:` → **달력**: 연/월 네비게이션, 일자 클릭으로 선택. `{calendar:` 는 *연도 없이* 선택도 가능 (`MM-DD` 형식).
- `{time:` `{timer:` → **시각 입력**: 지금 / +1시간 / +1일 / +1주 / +1달 / +1년 빠른 버튼 + 직접 시각 입력.
선택 후 **적용** 버튼을 누르면 본문에 삽입됩니다. 타임스탬프 문법 자체에 대한 안내는 [[Cloudwiki/위키 문법 가이드]] 의 *타임스탬프* 절을 참고하세요.
# 블록 컴포넌트 — 줄 시작 `:::`
새 줄의 맨 앞에서 `:::` 를 입력하면 블록 컴포넌트 메뉴가 표시됩니다.
| 메뉴 항목 | 삽입 | 설명 |
| --- | --- | --- |
| 카드 | `:::card` | 제목 + 본문 박스 |
| 그리드 | `:::grid` | 카드 그리드 레이아웃 |
| 가로 정렬 | `:::row` | 자식을 가로로 배치 |
| 임베드 | `:::embed` | 왼쪽 강조선 인용 |
| 탭 | `:::tabs` | 탭 컨테이너 (자식: `:::tab`) |
| 아코디언 | `:::accordion` | 아코디언 (자식: `:::item`) |
| 스텝퍼 | `:::steps` | 진행 단계 (자식: `:::step`) |
| 정보 / 팁 / 성공 / 주의 / 위험 / 노트 | `:::info` 등 | 색상별 콜아웃 |
선택 시 해당 라인이 `:::항목 ` 으로 채워집니다. 끝낼 때는 빈 줄에 `:::` 한 줄을 입력합니다.
[+ 카드 컴포넌트 사용 예]
```
:::card
### 카드 제목
카드 본문에는 **마크다운** 이 자유롭게 들어갈 수 있습니다.
:::
```
[-]
# 이미지 사이즈 자동완성
마크다운 이미지 `` 입력 직후, 이어서 입력할 수 있는 사이즈 옵션이 자동으로 표시됩니다.
| 항목 | 효과 |
| --- | --- |
| 아이콘 | `{size:icon}` — 글줄 안에 들어가는 아주 작은 크기 |
| 작게 | `{size:small}` |
| 중간 | `{size:medium}` |
| 크게 (기본) | 옵션 없음 — 기본값이라 별도 토큰을 삽입하지 않음 |
# 카테고리 입력 자동완성
문서 상단 **분류** 입력란에 텍스트를 입력하면, 기존에 사용된 카테고리 목록을 기반으로 한 자동완성이 표시됩니다. `Enter` 또는 `,` 로 태그를 확정합니다.
자세한 내용은 [[Cloudwiki/에디터/편집 요약]] 를 참고하세요.