문법 목록/심화

	💬 설정 및 세계관
	💬 캐릭터 목록 (통합) \| 💬 기본 템플릿
	💬 어장 목록(뉴참치/구참치) \| 💬 독백 정리(뉴참치/구참치) \| 💬 AU
	💬 문법 목록 (심화) \| 💬 폰트 목록 \| 💬 연습장

1. 텍스트 꾸밈 ¶

[edit]

1.1. 타이핑 효과 ¶

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

타이핑 속도는 초 단위의 숫자, 소수점 포함입니다. ex)1초는 1.0

[edit]

1.2. 흐르는 텍스트 ¶

흐르는 텍스트입니다.

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

흐르는 속도는 초 단위의 숫자, 뒤에 s를 붙여야 합니다

[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
소개=이것은 수평 탭입니다.
---
사용법=제목=내용 형식으로 각 탭의 내용을 작성합니다.
---
장점=여러 줄에 걸쳐 내용을 작성할 수 있어 가독성이 좋습니다.
}}}

+ 탭 제목에 fa-solid fa-cat 형식의 폰트어썸 아이콘 클래스명을 입력하면 해당되는 아이콘이 출력됩니다 (텍스트랑 동시 적용 불가)
폰트어썸에 대해서는 문법 목록/심화#s-4.1 참고

고급 설정용

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

공지사항

{{{#!tab
공지사항=공지사항
---
FAQ=FAQ
---
자료실=자료실
---
<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; }

/* [탭 버튼 스타일] */
/* 첫 번째 탭 버튼 (공지) */
{ID} .tablink-0 {
  background-color: #0078d7;
  color: white;
  font-weight: bold;
}

/* 두 번째 탭 버튼 (FAQ) */
{ID} .tablink-1 {
  background-color: #ffcc00;
  color: #333;
}

/* 세 번째 탭 버튼 (자료실) */
{ID} .tablink-2 {
  background-color: #4caf50;
  color: white;
}

/* [탭 콘텐츠 스타일] */

/* 첫 번째 탭 내용 (공지) */
{ID} .tabcontent-0 {
  background: #f0f8ff;   /* 연한 하늘색 */
  border-left: 4px solid #0078d7;
}

/* 두 번째 탭 내용 (FAQ) */
{ID} .tabcontent-1 {
  background: #fff8e1;   /* 연한 노랑 */
  border-left: 4px solid #ffcc00;
}

/* 세 번째 탭 내용 (자료실) */
{ID} .tabcontent-2 {
  background: #e8f5e9;   /* 연한 초록 */
  border-left: 4px solid #4caf50;
}
</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: 내용 영역의 배경색입니다.

+ 이제 개별 탭마다 스타일을 따로 적용 가능합니다

1. 탭 버튼용 클래스 (.tablink-{index})
각 탭 버튼(<button>)마다 붙는 클래스
{index}는 0부터 시작하는 숫자 (첫 번째 탭은 0, 두 번째는 1, …)

2. 탭 콘텐츠용 클래스 (.tabcontent-{index})
각 탭 내용(<div>)에 붙는 클래스
{index} 역시 0부터 시작하는 숫자

[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;
}

/* 첫 번째 탭 버튼 */
{ID} .v-tablink-0 {
  background-color: #0078d7;
  color: #fff;
  font-weight: bold;
}

/* 두 번째 탭 버튼 */
{ID} .v-tablink-1 {
  background-color: #ffcc00;
  color: #333;
}

/* 첫 번째 탭 내용 */
{ID} .v-tabcontent-0 .v-tabcontent-inner {
  background: #f0f8ff;
  border-left: 4px solid #0078d7;
}

/* 두 번째 탭 내용 */
{ID} .v-tabcontent-1 .v-tabcontent-inner {
  background: #fff8e1;
  border-left: 4px solid #ffcc00;
}
</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)을 제어합니다.

+ 이제 개별 탭마다 스타일을 따로 적용 가능합니다

1. 탭 버튼용 클래스 (.v-tablink-{index})
각 탭 버튼(<button>)마다 붙는 클래스
{index}는 0부터 시작하는 숫자 (첫 번째 탭은 0, 두 번째는 1, …)

2. 탭 콘텐츠용 클래스 (.v-tabcontent-{index})
각 탭 내용(<div>)에 붙는 클래스
{index} 역시 0부터 시작하는 숫자

[edit]

3.5. 아코디언 메뉴 ¶

첫 번째 내용입니다.

여기도 내용이 들어갑니다.

마지막 내용입니다.

{{{#!accordion
첫 번째 제목 = 첫 번째 내용입니다.
---
두 번째 제목 = 여기도 내용이 들어갑니다.
---
세 번째 제목 = 마지막 내용입니다.
}}}

고급 설정용

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

최신 공지를 확인하세요.

아래에 패치 로그가 표시됩니다.

사용자 계정 및 UI 설정을 관리할 수 있습니다.

{{{#!accordion
공지사항 = 최신 공지를 확인하세요.
---
업데이트 기록 = 아래에 패치 로그가 표시됩니다.
---
설정 메뉴 = 사용자 계정 및 UI 설정을 관리할 수 있습니다.
---
<style>

/* 공통 스타일 전체 변경 */
{ID} .accordion-title {
    border-radius: 6px;
    font-weight: bold;
}

/* 1번 항목 스타일 (item-0) */
{ID} .accordion-title-0 {
    background: #ffe2e2;
    color: #b30000;
}
{ID} .accordion-content-0 {
    background: #fff6f6;
    border-color:#ff7373;
}

/* 2번 항목 스타일 (item-1) */
{ID} .accordion-title-1 {
    background:#e2ffe9;
    color:#0b7d42;
}
{ID} .accordion-content-1 {
    background:#f4fff7;
    border-color:#44bb77;
}

/* 3번 항목 스타일 (item-2) — 아이콘 강조 */
{ID} .accordion-title-2 {
    background:#e2eeff;
    color:#00337f;
}
{ID} .accordion-title-2 .icon {
    color:#006aff;
    font-size:18px;
}

/* 펼쳐졌을 때 효과(모든 항목 공통) */
{ID} .accordion-title.open {
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
}

/* hover 효과 개별 지정 가능 */
{ID} .accordion-title-1:hover {
    background:#cfffdc;
}

/* 특정 항목 전체에 외곽선주기 */
{ID} .item-2 {
    border:2px solid #6294ff;
    border-radius:8px;
    padding-bottom:3px;
}

</style>
}}}

.accordion-container 아코디언 전체 영역을 감싸는 루트 컨테이너
.accordion-item 각 개별 아코디언 블록 (버튼 + 내용) 묶음
.item-0, .item-1, … 각 항목 고유 클래스. 0부터 순서대로 증가
.accordion-title 클릭해서 펼치거나 닫는 버튼
.accordion-title.open 열려 있는 상태에서 자동 추가되는 클래스
.accordion-title-0, .accordion-title-1, … 각 항목 제목 버튼 고유 클래스
.accordion-title .icon FontAwesome 아이콘 공통 스타일
.accordion-title.open .icon 열려 있을 때 아이콘 회전 또는 색상 변경
.accordion-content 실제 내용 영역. 슬라이드 애니메이션 적용 대상
.accordion-content-0, .accordion-content-1, … 각 항목 내용 영역 고유 클래스
.accordion-inner Formatter가 렌더링한 HTML 내용 감싸는 내부 wrapper
.accordion-inner-0, .accordion-inner-1, … 각 항목 내부 내용 고유 클래스

[edit]

4. 기타 ¶

[edit]

4.1. FontAwesome 아이콘 사용 ¶

{{{#!html
<i class="fa-solid fa-cat" style="font-size: 30px;"></i>
}}}

사용법: https://fontawesome.com/search?ic=free-collection
위 사이트에 들어가서 사용하고 싶은 아이콘 찾기
-> 아이콘 눌러서 나오는 <i class=... 형식의 주소 복사하기
-> html 문법에 붙여넣기

크기 조절은 style="font-size: ;"로 가능합니다

[edit]

4.2. 실시간 시계 ¶

[[LiveClock]]

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

[edit]

4.3. 막대 그래프 ¶

밈미

멈머

라벨과 칸 색은 선택사항으로, 지정하지 않으면 기본값으로 설정됩니다
라벨 없이 색상만 지정하고 싶을때는 값|총 길이|||채워진칸 색|빈칸 색 방식으로 작성하면 됩니다

[edit]

4.4. 옷입히기 ¶

{{{#!dressup
base=베이스 이미지
width=캔버스 너비
height=캔버스 높이
---

=== 카테고리명 | 옵션(required: 카테고리를 아이템 필수 선택 상태로 만듦 | default=아이템 이름: 아이템 필수 선택 상태일 때 디폴트 아이템 지정) ===
[아이템 이름] 썸네일 이미지 | 아이템 이미지(쉼표로 여러개 지정 가능) | 아이템 이미지 우선순위 지정(아이템 이미지를 여러개 지정했을시 쉼표로 이미지마다 우선순위 지정 가능)
}}}

유사 픽크루입니다
참고로 베이스 이미지의 우선순위는 5로, 아이템 이미지가 베이스 이미지보다 뒤로 가게 하고싶은 경우 우선순위를 4 이하로 주면 됩니다

고급 설정용

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

{{{#!dressup
base=https://i.postimg.cc/442kdsJh/image-asset.jpg
width=350
height=500
---

=== 밈미 | required | default=톡기 ===
[톡기] https://i.postimg.cc/C110P1hF/image.gif | https://i.postimg.cc/C110P1hF/image.gif, https://i.postimg.cc/V607SJJ5/i14346854032.jpg | 20, -1
[밈미] https://i.postimg.cc/y6tHrRmp/1537622901.jpg | https://i.postimg.cc/y6tHrRmp/1537622901.jpg | 10
---

=== 밈멈머2 ===
[밈멈머] https://i.postimg.cc/V607SJJ5/i14346854032.jpg | https://i.postimg.cc/V607SJJ5/i14346854032.jpg, https://i.postimg.cc/yd6QV7Rr/i15413495313.jpg | 20, -5
[밈미] https://i.postimg.cc/y6tHrRmp/1537622901.jpg | https://i.postimg.cc/y6tHrRmp/1537622901.jpg | 10
---

<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) 등을 제어합니다.

	💬 설정 및 세계관
	💬 캐릭터 목록 (통합) \| 💬 기본 템플릿
	💬 어장 목록(뉴참치/구참치) \| 💬 독백 정리(뉴참치/구참치) \| 💬 AU
	💬 문법 목록 (심화) \| 💬 폰트 목록 \| 💬 연습장

문법 목록/심화

목차

1. 텍스트 꾸밈 ¶

1.1. 타이핑 효과 ¶

1.2. 흐르는 텍스트 ¶

2. 이미지 관련 ¶

2.1. 슬라이드쇼 ¶

2.2. 갤러리 ¶

3. 레이아웃 ¶

3.1. 카톡 대화 ¶

3.2. 뒤집히는 카드 ¶

3.3. 탭 ¶

3.4. 세로 탭 ¶

3.5. 아코디언 메뉴 ¶

4. 기타 ¶

4.1. FontAwesome 아이콘 사용 ¶

4.2. 실시간 시계 ¶

4.3. 막대 그래프 ¶

4.4. 옷입히기 ¶