추가 문법 목록

Difference between r1.19 and the current

@@ -501,10 +501,10 @@

width=이미지 가로 길이
height=이미지 세로 길이
---

=== 아이템 부위 | z=해당 ~~파츠의~~ 우선순위 숫자(숫자가 클수록 더 윗레이어에 표시됨) ===

=== 아이템 부위 | z=해당 카테고리의 우선순위 숫자(숫자가 클수록 더 윗레이어에 표시됨) ===

* 아이템 썸네일 | 아이템 이미지 | 아이템 이름

=== 아이템 부위 | z=해당 ~~파츠의~~ 우선순위 숫자 ===

=== 아이템 부위 | z=해당 카테고리의 우선순위 숫자 ===

* 아이템 썸네일 | 아이템 이미지 | 아이템 이름
}}}
}}}

@@ -645,5 +645,4 @@

설명: 썸네일 이미지 아래에 표시되는 아이템 이름 텍스트(<span>)입니다.
주요 역할: 아이템 이름의 글꼴 크기, 색상, 위쪽 여백(margin-top) 등을 제어합니다.
}}}

이런 기능 있었으면 좋겠다 하시면 잡담방에서 에주를 찾아주세요(실제로 가능할진 모름)

1. 텍스트 꾸밈 ¶

[edit]

1.1. 타이핑 효과 ¶

[[TypingEffect(텍스트(개행은 \n)|타이핑 속도(초 단위)]]

[edit]

1.2. 흐르는 텍스트 ¶

흐르는 텍스트입니다.

 [[MarqueeText(흐르는 텍스트입니다.|speed=흐르는 속도(초 단위)|color=글자색|fontsize=글자 크기|direction=흐르는 방향|bgcolor=배경색)]]

[edit]

2. 이미지 관련 ¶

[edit]

2.1. 슬라이드쇼 ¶

❮

❯

 [[ImageSlideshow(이미지 주소(여러장은 콤마로 구분)|width=가로 길이|height=세로 길이|interval=슬라이드 자동 전환 시간(초 단위)]]

[edit]

2.2. 갤러리 ¶

클릭하면 확대돼요

개조심

꽉낀밈미

[[ImageGallery(이미지 주소|캡션(생략 가능),여러개는 쉼표로 구분)]]

[edit]

3. 레이아웃 ¶

[edit]

3.1. 카톡 대화 ¶

2025년 6월 27일 금요일

라이언

안녕하세요, 여러분!
그룹 채팅방 기능이 추가되었습니다.

오후 6:45

와, 정말요? 이제 여러 명이서 대화할 수 있겠네요!

오후 6:46

어피치

안녕! 나도 이제 나올 수 있네? 반가워~ 😍

오후 6:46

라이언

네, 어피치. 이제 avatar_이름으로 여러 명을 등록할 수 있어요.

오후 6:47

정말 유용하겠어요. 회의록을 정리하거나, 가상 대담을 만들 때 최고겠네요.

오후 6:47

무지

나는 프로필 등록 안 했는데도 나올 수 있나?

어피치

응, 프로필 사진 없이 이름만으로도 참여할 수 있대!

오후 6:48

{{{#!kakaotalk
avatar_대화상대1=프로필 이미지 주소
avatar_대화상대2=프로필 이미지 주소
---
=== 날짜(예: 2025년 6월 27일 금요일) ===
---
대화상대1: 대화상대 1의 말풍선에 나올 대화 내용 [시간(예: 오후 6:46)]
---
대화상대2: 대화상대 2의 말풍선에 나올 대화 내용 [시간]
---
나: 내 말풍선에 나올 대화 내용 [시간]
}}}

[edit]

3.2. 뒤집히는 카드 ¶

이것은 앞면입니다.
여러 줄 입력이 아주 잘 됩니다.

가독성이 훨씬 좋아졌습니다.

여기는 뒷면입니다.

{{{#!flipcard
앞면 텍스트
---
뒷면 텍스트
---
width=가로 길이
height=세로 길이
fontSize=글자 크기
frontBg=앞면 배경색
backBg=뒷면 배경색
frontColor=앞면 글자색
backColor=뒷면 글자색
}}}

fontBg, backBg에 url(이미지 주소) 형식으로 입력하면 이미지 삽입도 가능합니다

고급 설정용

내용 텍스트 뒤에 <style>...</style> 태그로 CSS 스타일을 지정할 수 있습니다.
참고로 <style>에 포함되는 {ID}는 빼거나 수정하면 안됩니다

SYSTEM ONLINE

ACCESS GRANTED

{{{#!FlipCard
SYSTEM ONLINE
---
ACCESS GRANTED
---
<style>
/* 전체 카드 컨테이너: 날카로운 모서리와 금속 테두리 */
{ID} {
  border-radius: 0;
  border: 3px solid #555;
  box-shadow: 0 0 15px rgba(180, 180, 180, 0.3);
}

/* 앞/뒷면 공통: 어두운 배경, 테두리 제거, 미래적인 폰트 */
{ID} .flip-front, {ID} .flip-back {
  background: radial-gradient(ellipse at center, #444 0%, #111 100%);
  border: none;
  font-family: "D2Coding", "Courier New", monospace;
  font-weight: bold;
}

/* 앞면: 시안(Cyan) 색상의 네온 텍스트 효과 */
{ID} .flip-front {
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #00aaff, 0 0 70px #00aaff;
}

/* 뒷면: 마젠타(Magenta) 색상의 네온 텍스트 효과 */
{ID} .flip-back {
  color: #f0f;
  text-shadow: 0 0 5px #f0f, 0 0 10px #f0f, 0 0 20px #f0f, 0 0 40px #d0d, 0 0 70px #d0d;
}
</style>
}}}

FlipCard 매크로의 주요 CSS 클래스

1. {ID}
설명: 카드 전체를 감싸는 최상위 컨테이너입니다. 카드의 전체적인 크기, 위치, 3D 효과의 깊이 등을 제어합니다.
주요 기본 속성 및 역할:
width, height: 카드의 너비와 높이를 결정합니다.
perspective: 3D 뒤집기 효과의 원근감(깊이)을 설정합니다. 값이 클수록 효과가 밋밋해지고, 작을수록 왜곡이 심해집니다.
cursor: pointer: 마우스를 올렸을 때 클릭할 수 있다는 것을 알려주는 손가락 모양 커서입니다.
margin: 카드 주변의 바깥 여백입니다.

2. {ID} .flip-inner
설명: 카드 앞면과 뒷면을 실제로 감싸고, 회전 애니메이션이 일어나는 핵심 요소입니다.
주요 기본 속성 및 역할:
transition: 뒤집히는 애니메이션의 속도를 제어합니다. (예: transition: transform 0.6s;는 0.6초 동안 뒤집힌다는 의미)
transform-style: preserve-3d: 자식 요소들(앞면, 뒷면)이 3D 공간에 함께 있도록 만듭니다. 이 속성이 없으면 카드가 평면적으로 뒤집힙니다.

3. {ID} .flip-front, {ID} .flip-back
설명: 앞면과 뒷면 모두에게 공통으로 적용되는 스타일을 정의하는 부분입니다. 여기서 글자의 정렬, 테두리, 그림자, 안쪽 여백 등을 한 번에 제어할 수 있습니다.
주요 기본 속성 및 역할:
border: 카드의 테두리 스타일입니다.
border-radius: 카드의 모서리를 둥글게 만듭니다.
box-shadow: 카드에 그림자 효과를 줍니다.
display: flex, align-items: center, justify-content: center: 카드 안의 텍스트를 수직/수평 중앙에 정렬시킵니다.
padding: 카드 테두리와 내부 텍스트 사이의 안쪽 여백입니다.
font-size: 기본 글자 크기입니다.

4. {ID} .flip-front
설명: 앞면에만 적용되는 스타일을 정의합니다. 주로 배경색이나 글자색을 개별적으로 지정할 때 사용합니다.
주요 기본 속성 및 역할:
background, color 등

5. {ID} .flip-back
설명: 뒷면에만 적용되는 스타일을 정의합니다.
주요 기본 속성 및 역할:
background, color 등
transform: rotateY(180deg): 뒷면을 미리 180도 뒤집어 놓아, 전체가 회전할 때 올바른 면이 보이도록 준비시킵니다.

6. {ID}.flipped .flip-inner (상태 클래스)
설명: 사용자가 카드를 클릭했을 때 적용되는 스타일입니다. .flipped 클래스는 클릭 시 {ID} 컨테이너에 동적으로 추가됩니다.
주요 기본 속성 및 역할:
transform: rotateY(180deg): .flip-inner 요소를 Y축(세로축) 기준으로 180도 회전시켜 뒷면이 보이게 합니다.
(응용): 이 부분을 transform: rotateX(180deg);로 바꾸면 카드가 세로가 아닌 가로로 뒤집히는 효과를 만들 수 있습니다.

[edit]

3.3. 탭 ¶

이것은 수평 탭입니다.

{{{#!tab
소개=이것은 수평 탭입니다.
---
사용법=제목=내용 형식으로 각 탭의 내용을 작성합니다.
---
장점=여러 줄에 걸쳐 내용을 작성할 수 있어 가독성이 좋습니다.
}}}

고급 설정용

내용 텍스트 뒤에 <style>...</style> 태그로 CSS 스타일을 지정할 수 있습니다.
참고로 <style>에 포함되는 {ID}는 빼거나 수정하면 안됩니다

사용자 프로필 정보가 여기에 표시됩니다.

{{{#!tab
Profile=사용자 프로필 정보가 여기에 표시됩니다.
---
Repositories=사용자의 코드 저장소 목록입니다.
---
<style>
{ID} .tabheaders { border-bottom: 2px solid #e1e4e8; margin-bottom: 16px; }
{ID} .tablinks { background: transparent; border: none; border-bottom: 3px solid transparent; margin: 0 8px -2px 8px; font-size: 16px; color: #586069; }
{ID} .tablinks:hover { color: #24292e; }
{ID} .tablinks.active { font-weight: 600; color: #24292e; border-bottom-color: #f9826c; }
{ID} .tabcontent { border: 1px solid #e1e4e8; border-radius: 6px; }
</style>
}}}

Tabs 매크로의 주요 CSS 클래스

1. {ID}
설명: 탭 기능 전체(버튼 영역 + 내용 영역)를 감싸는 최상위 컨테이너입니다. 전체적인 폰트나 아래쪽 여백 등을 설정할 수 있습니다.
주요 기본 속성 및 역할:
font-family: 탭 전체의 기본 글꼴을 지정합니다.
margin-bottom: 탭 컴포넌트 아래에 생성되는 바깥 여백입니다.

2. {ID} .tabheaders
설명: 모든 탭 버튼(tablinks)들을 담고 있는 컨테이너입니다. 이 클래스를 이용해 버튼들이 나열된 전체 바의 스타일을 제어할 수 있습니다.
주요 기본 속성 및 역할:
기본 스타일은 없지만, 버튼들을 정렬하거나(예: text-align: center;) 버튼 영역 전체에 밑줄을 긋는 등의 디자인을 적용할 때 유용합니다.

3. {ID} .tablinks
설명: 각 탭의 제목이 되는 개별 버튼입니다. 탭 디자인의 핵심이 되는 부분입니다.
주요 기본 속성 및 역할:
background-color: 버튼의 배경색입니다.
border, border-radius: 버튼의 테두리와 모서리 둥글기입니다.
padding: 버튼 내부의 여백입니다.
cursor: pointer: 클릭 가능하다는 것을 알려주는 손가락 모양 커서입니다.
color: 버튼의 글자색입니다.

4. {ID} .tablinks:hover
설명: 사용자가 탭 버튼에 마우스를 올렸을 때 적용되는 스타일입니다.
주요 기본 속성 및 역할:
background-color: 마우스를 올렸을 때 버튼의 배경색이 살짝 어두워지도록 설정되어 있습니다.

5. {ID} .tablinks.active
설명: 현재 선택되어 활성화된 탭 버튼에만 적용되는 스타일입니다. 사용자가 어떤 탭을 보고 있는지 시각적으로 알려주는 중요한 부분입니다.
주요 기본 속성 및 역할:
background-color: 활성화된 탭의 배경색을 다르게 설정합니다. (기본값: 흰색)
font-weight: bold: 글자를 굵게 만들어 강조합니다.
color: 활성화된 탭의 글자색을 다르게 설정합니다.
border-bottom: 아래쪽 테두리 스타일을 다르게 주어 연결된 내용처럼 보이게 합니다.

6. {ID} .tabcontent
설명: 탭 내용이 표시되는 영역입니다.
주요 기본 속성 및 역할:
border: 내용 영역의 테두리입니다.
padding: 테두리와 실제 내용 사이의 안쪽 여백입니다.
background-color: 내용 영역의 배경색입니다.

[edit]

3.4. 세로 탭 ¶

일반 설정에 대한 내용입니다.

{{{#!vtab
탭1 제목=탭1 내용
---
탭2제목=탭2 내용
}}}

고급 설정용

내용 텍스트 뒤에 <style>...</style> 태그로 CSS 스타일을 지정할 수 있습니다.
참고로 <style>에 포함되는 {ID}는 빼거나 수정하면 안됩니다

설레는 마음으로 첫 발을 내디뎠다.
오래된 기차역의 풍경은 마치 시간 여행을 하는 듯한 기분을 느끼게 했다.

{{{#!vtab
여행의 시작=설레는 마음으로 첫 발을 내디뎠다.
오래된 기차역의 풍경은 마치 시간 여행을 하는 듯한 기분을 느끼게 했다.
---
골목길에서=낯선 골목길에서 우연히 만난 작은 고양이.
따스한 햇살 아래에서 낮잠을 자는 모습이 평화로웠다.
---
바닷가의 밤=밤바다의 파도 소리는 어떤 음악보다도 아름다웠다.
수많은 별들이 쏟아질 듯한 밤하늘을 잊을 수 없을 것이다.
---
<style>
/* 전체 컨테이너: 종이 질감 적용 */
{ID} {
  border: 1px solid #d3c8b4; /* 옅은 갈색 테두리 */
  background-color: #fdfaf4; /* 크림색 종이 배경 */
  box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
}
/* 왼쪽 메뉴 영역: 공책의 링 부분처럼 점선으로 구분 */
{ID} .v-tab-menu {
  border-right: 2px dotted #d3c8b4;
  background-color: #f7f1e5; /* 살짝 다른 종이 색 */
  min-width: 180px;
}
/* 개별 메뉴 버튼: 공책의 인덱스 탭 모양 */
{ID} .v-tablinks {
  border: 1px solid #d3c8b4;
  border-right: none;
  background-color: #f0e9dc;
  border-radius: 8px 0 0 8px; /* 왼쪽 모서리만 둥글게 */
  margin: 0 0 5px 0;
  font-size: 1.5em;
  color: #6d5f4b; /* 옅은 갈색 텍스트 */
}
{ID} .v-tablinks:hover {
  background-color: #e9e2d6;
}
/* 활성화된 메뉴: 선택된 페이지처럼 보이게 처리 */
{ID} .v-tablinks.active {
  background-color: #fdfaf4; /* 콘텐츠 영역과 같은 배경색 */
  margin-right: -1px; /* 오른쪽으로 당겨 경계선을 덮음 */
  color: #3d2f1b; /* 더 진한 텍스트 색 */
  font-weight: bold;
}
/* 콘텐츠 내부 */
{ID} .v-tabcontent-inner {
  font-size: 1.6em;
  line-height: 1.8;
  color: #4d3f2b;
}
</style>
}}}

VerticalTabs 매크로의 주요 CSS 클래스

{ID}: 탭 전체를 감싸는 최상위 컨테이너입니다. display: flex 속성으로 왼쪽 메뉴와 오른쪽 콘텐츠 영역을 나눕니다.

{ID} .v-tab-menu: 왼쪽의 세로 메뉴 버튼들을 담고 있는 컨테이너입니다. 메뉴 영역의 너비나 배경색을 지정할 수 있습니다.

{ID} .v-tablinks: 메뉴 영역에 있는 개별 버튼 하나하나입니다. 폰트 크기, 색상, 배경, 안쪽 여백 등을 제어합니다.

{ID} .v-tablinks.active: 현재 선택되어 활성화된 메뉴 버튼입니다. 다른 버튼과 구별되도록 배경색이나 글자색, 테두리 등을 다르게 스타일링합니다.

{ID} .v-tabcontent-container: 오른쪽의 콘텐츠 영역 전체를 감싸는 컨테이너입니다.

{ID} .v-tabcontent-inner: 실제 내용이 들어가는 영역으로, 안쪽 여백(padding)을 제어합니다.

[edit]

4. 기타 ¶

[edit]

4.1. 실시간 시계 ¶

[[LiveClock]]

현재 시간을 실시간으로 보여줍니다.

[edit]

4.2. mermaid ¶

graph TD; A[멈머] B(댕댕) C((밈미)) D>왕밈미] A -- 우호 --> B B -- 불신 ---x C C -. 애증 .-> A D -- 명령 --> C

{{{#!mermaid
이 안에 머메이드 문법 작성
}}}

다양한 다이어그램을 만들 수 있습니다. (위처럼 인물 관계도도 가능)
사용법은 구글링 해보시길...(후레)

[edit]

4.3. 옷입히기 ¶

{{{#!dressup
base=베이스 이미지
width=이미지 가로 길이
height=이미지 세로 길이
---
=== 아이템 부위 | z=해당 카테고리의 우선순위 숫자(숫자가 클수록 더 윗레이어에 표시됨) ===
* 아이템 썸네일 | 아이템 이미지 | 아이템 이름

=== 아이템 부위 | z=해당 카테고리의 우선순위 숫자 ===
* 아이템 썸네일 | 아이템 이미지 | 아이템 이름
}}}

유사 픽크루입니다(?)

고급 설정용

내용 텍스트 뒤에 <style>...</style> 태그로 아이템 칸의 CSS 스타일을 지정할 수 있습니다.
참고로 <style>에 포함되는 {ID}는 빼거나 수정하면 안됩니다

{{{#!dressup
base=https://i.postimg.cc/6QtwfNr9/6f0.png
width=350
height=500
---
=== 밈미 | z=20 ===
* https://i.postimg.cc/y6tHrRmp/1537622901.jpg | https://i.postimg.cc/y6tHrRmp/1537622901.jpg | 헉밈미
* https://i.postimg.cc/V607SJJ5/i14346854032.jpg | https://i.postimg.cc/V607SJJ5/i14346854032.jpg | 젤리밈미

=== 멈머 | z=10 ===
* https://i.postimg.cc/mrDpsXRY/i14067703501.jpg | https://i.postimg.cc/mrDpsXRY/i14067703501.jpg | 빠져든당
* https://i.postimg.cc/yd6QV7Rr/i15413495313.jpg | https://i.postimg.cc/yd6QV7Rr/i15413495313.jpg | 조랭이떡
---
<style>
/* 아이템 메뉴 배경을 어둡게 변경 */
{ID} .du-item-menu {
  background-color: #333;
  border-color: #555;
}
/* 탭 버튼 스타일 변경 */
{ID} .du-tab-header {
  background-color: #222;
  border-bottom-color: #555;
}
{ID} .du-tab-link {
  color: #ccc;
  border-right-color: #555;
}
{ID} .du-tab-link:hover {
  background-color: #444;
}
{ID} .du-tab-link.active {
  background-color: #555;
  color: #fff;
  border-bottom-color: #00aaff;
}
/* 아이템 이름 텍스트 색상 변경 */
{ID} .du-item-name {
  color: #ddd;
}
</style>
}}}

dressup 프로세서의 주요 CSS 클래스 설명

.du-item-menu
설명: 오른쪽의 아이템 선택 영역 전체입니다. 탭 버튼들과 아이템 목록을 모두 포함합니다.
주요 역할: 이 영역의 테두리, 배경색, 전체적인 레이아웃(display: flex, flex-direction: column)을 제어합니다.

.du-tab-header
설명: '헤어', '상의', '하의' 등 카테고리 탭 버튼들을 감싸고 있는 영역입니다.
주요 역할: 탭 바의 배경색이나 아래쪽 테두리 등을 지정할 수 있습니다.

.du-tab-link
설명: 각각의 카테고리 탭 버튼 하나하나입니다.
주요 역할: 버튼의 배경색, 글자색, 테두리, 여백(padding) 등을 수정할 수 있습니다.

.du-tab-link.active
설명: 현재 선택되어 활성화된 탭 버튼입니다.
주요 역할: 활성화된 탭을 시각적으로 구분하기 위해 다른 배경색이나 글자색, 강조 테두리 등을 지정합니다.

.du-item-list-container
설명: 실제 아이템 아이콘들이 나열되는 목록 영역을 감싸는 부분입니다.
주요 역할: 아이템 목록의 안쪽 여백(padding)을 조절하거나, 스크롤바의 스타일을 꾸밀 때 사용됩니다.

.du-item-list
설명: 아이템들을 격자 형태로 배치하는 실제 목록 영역입니다.
주요 역할: display: grid로 설정되어 있으며, grid-template-columns 속성을 통해 한 줄에 몇 개의 아이템을 표시할지, 아이템의 최소 크기는 얼마로 할지 등을 제어할 수 있습니다.

.du-item-wrapper
설명: 아이템 썸네일 이미지와 아이템 이름을 함께 감싸는 컨테이너입니다. 클릭 이벤트는 이 요소에 적용됩니다.
주요 역할: 각 아이템 칸의 배경색이나 여백, 마우스 오버 효과 등을 제어합니다.

.du-item-wrapper.active
설명: 현재 캐릭터가 착용하고 있는 아이템에 적용되는 스타일입니다.
주요 역할: 선택된 아이템을 시각적으로 표시하기 위해 배경색이나 테두리 색을 바꿀 수 있습니다.

.du-item-thumb
설명: 아이템 목록에 보이는 작은 썸네일 이미지(<img>)입니다.
주요 역할: 썸네일 이미지의 크기, 테두리, 모서리 둥글기 등을 지정합니다.

.du-item-name
설명: 썸네일 이미지 아래에 표시되는 아이템 이름 텍스트(<span>)입니다.
주요 역할: 아이템 이름의 글꼴 크기, 색상, 위쪽 여백(margin-top) 등을 제어합니다.

Difference between r1.19 and the current

목차

1. 텍스트 꾸밈 ¶

1.1. 타이핑 효과 ¶

1.2. 흐르는 텍스트 ¶

2. 이미지 관련 ¶

2.1. 슬라이드쇼 ¶

2.2. 갤러리 ¶

3. 레이아웃 ¶

3.1. 카톡 대화 ¶

3.2. 뒤집히는 카드 ¶

3.3. 탭 ¶

3.4. 세로 탭 ¶

4. 기타 ¶

4.1. 실시간 시계 ¶

4.2. mermaid ¶

4.3. 옷입히기 ¶