최근 Janitor AI가 클래스 이름과 관련 CSS 스타일을 업데이트하여 봇 소개와 설명에 영향을 미쳤습니다.

이 게시물에서 공유한 업데이트된 클래스 이름과 CSS 선택자는 브라우저 개발자 도구를 통해 Janitor AI의 프론트엔드 소스 코드를 검사하여 확인한 것입니다. 이는 오로지 커뮤니티의 디자인 테마 및 창작 커스터마이징을 위해 제공됩니다.

이 클래스 이름들은 Janitor AI에서 공식적으로 문서화되거나 지원되지 않으며, 사이트 업데이트에 따라 예고 없이 변경되거나 작동하지 않을 수 있습니다.

이 정보는 교육 및 창작 목적으로만 공유됩니다.
독점 데이터, 사용자 데이터 또는 계정 자격 증명에는 접근하거나 추출하지 않았습니다.

이것은 JanitorAI 및 그 직원들과 어떤 방식으로도 제휴, 승인 또는 보증된 것이 아닙니다.

i 코드를 캐릭터 카드에 통합하는 데 문제가 있다면 Rocket의 가이드를 확인하시길 추천합니다. 이 봇 하단에 있는 가이드보다 훨씬 자세한 시각적 가이드입니다.

문제가 계속되면 J.AI 디스코드에서 문의해 보세요. 제 입장에서 도움을 드릴 수 있는 방법이 많지 않습니다.

자주 사용되는 항목:

div _characterInfoMarkdownContent_123vi_223

_input_jv6cc_126

현재 더 많은 항목을 찾고 있습니다.
이 목록은 새로운 클래스 이름이 발견될 때마다 계속 업데이트됩니다. 추가 사항이 있는지 나중에 다시 확인해 주세요.

• ~101개 클래스 항목
  

• 2026-28-04
  - 영구 님 덕분에 클래스 4개 이상 업데이트
  - 목록을 A-Z 순으로 정리
  

• 2026-29-04
  - 추가됨 <p class="class_name"></p> 성격 섹션에
  - 정의 펼침
  

• 2026-30-04
  - _card_13n8k_2 업데이트
  - _cardTitle_13n8k_402 추가
  

• 2026-01-05
  - 사용 중단된 클래스 제거
  ( _viewAllStandalone_mi467_68, _segmentActive_kwwol_63, _segmented_kwwol_51, _content_1chl9_11, _characterMenu_128g5_496, _count_kwwol_25, _count_mi467_31)
  

• 16/05/2026
  - 변경된 클래스 업데이트
  ^영구(puppy) 님 다시 한번 감사합니다^
  

• 2026-19-10
  - 사용 중단된 클래스 제거
  - 대체 클래스 업데이트

A

_appModalBadge_xxqvx_134

_appModalContent_xxqvx_85

_appModalCta_xxqvx_195

_archiveButton_di476_217

_autoResizeTextarea_mrqt8_1

B

_banner_2x3bf_17

_baseOverlay_gj1jh_20

_betaBadge_mbh48_65

_btnDanger_1fl1d_98

_btnGhost_1fl1d_59

_btnOutline_1fl1d_48

_btnPrimary_1fl1d_80

_btnSolid_1fl1d_70

_btn_1fl1d_2

C

_cancelButton_10ud6_165

_cancelScheduleButton_1s17f_1202

_cancel_16pja_84

_cancel_1pa8q_211

_cardActions_1tlzn_324

_cardDescription_1mhuy_352_cardHeader_1tlzn_315

_cardMeta_1mhuy_375

_cardTitle_1mhuy_333

_card_1mhuy_2

_card_1tlzn_308

_characterInfoMarkdownContent_123vi_223

_characterInfoMarkdownContent_1yi4w_5

_characterInfoMarkdownContent_9gldz_223

_characterInfoShinyBox_1yi4w_265

_characterInfoShinyBoxInner_1yi4w_286

_checkboxCard_exkyv_105

_checkboxCardError_exkyv_112

_content_xxqvx_12

_count_138g0_7

_createButton_1jb5k_14 pp-top-bar-create-char profile-top-bar-create-char glow-on-hover

css-197qci7

css-1d22cyw

css-1jdnh42

css-1vh5zal

css-2lj9yr

css-7kiadw

css-z5908y

_content_67d1x_11

D

_detailName_4cue2_1923

_detailPane_4cue2_1839

E

_editScheduleButton_1s17f_1180

_expanded_2x3bf_208

_expandedInner_2x3bf_220

F

_filterButtonOpen_1vsdv_27

_footerHint_exkyv_148

_footer_w3wuk_1

H

_hintBox_2ljd6_74

_historyItem_10txd_1

_historyItemFocused_10txd_34

_holidays2025Pattern1_d0q9a_115

_holidays2025Pattern2_d0q9a_124

I

_iconError_1jwi8_310

_iconGlobe_2x3bf_84

_iconInfo_1jwi8_295

_iconSuccess_1jwi8_300

_iconWarning_1jwi8_305

_iconWarning_1s17f_102

_inner_2x3bf_31

_inputContainer_d8bkw_27

_inputError_exkyv_86

_input_10ud6_126

_input_1tlzn_260

_input_exkyv_52

_input_owmrz_7

_iosAlert_1s17f_263

_iosModalWarning_1s17f_544

_iosSelect_1s17f_805

_iosSettingItem_1s17f_46

_iosSettingsSection_1s17f_35

_iosStatusSection_1s17f_208

L

_loadMoreButton_1jwi8_474

_loadMore_1nqdj_38

M

_messageNavigation_1yi4w_348

_modal_pru5r_15

_modalContent_1jhaa_166

_modalWarning_1jwi8_779

_moderationBlock_1s17f_320

_moderationHeader_1s17f_360

_moderationNotes_di476_369

_moderationNotification_di476_333

_moderationReason_1s17f_405

_moderationSubject_di476_360

_motionHeader_1s17f_1361

_motionModal_1s17f_1339

_motionWarning_1s17f_1459

N

_navButton_1yi4w_359

_notificationsButton_1jwi8_7

_notificationItem_di476_2

O

_option_pru5r_82

_otherInput_pru5r_156

P

pp-top-bar-logo profile-top-bar-logo glow-logo css-1bmggo3

_primaryButton_2ljd6_91

_priorityHigh_1jwi8_372

_priorityLow_1jwi8_380

_priorityMedium_1jwi8_376

_privacyNote_2x3bf_301

profile-badge-flex-outer Btn2-purple pp-pg-total css-72h1ey

S

_scheduleInfoNote_1s17f_1106

_scheduleTypeOption_1s17f_1231

_scheduledInput_1s17f_887

_scheduledPreview_1s17f_972

_scheduledReleaseInfo_1s17f_1136

_scheduledReleaseSection_1s17f_863

_scheduledReleaseWarning_1s17f_876

_showLess_1bk4j_26

_signupTextarea_45b6m_172

_submitBtn_1gzug_172

T

_toolbar_1oo8z_6

빠른 팁:
별도로 나누는 대신 여러 클래스 이름을 하나의 paragraph 태그에 겹쳐 넣을 수 있습니다. 이렇게 하면 서로 다른 클래스의 효과를 한꺼번에 적용할 수 있습니다.

간단한 예시:

div _characterInfoMarkdownContent_123vi_223 _trigger_6hekb_453 _autoResizeTextarea_mrqt8_1 image-input-dropzone

<p class="div _characterInfoMarkdownContent_123vi_223 _trigger_6hekb_453 _autoResizeTextarea_mrqt8_1 image-input-dropzone">your text</p>

Utkarsh 디스코드 님 제작:

<p class="div iosStatusSection1s17f_208 iosStatusLine1s17f_223">Text <strong>Text</strong></p>

'Text'Text

<p class="div _iosStatusSection_1s17f_208 _iosStatusLine_1s17f_223">'Text' <a target="_blank" rel="noopener noreferrer" class="div Btn2-purple pp-pg-total" href="your-link-here"><strong>link</strong></a></p>

'Text' link

<p class="css-1jdnh42 _iosStatusLine_1s17f_223"><strong>Text Here</strong>your text here</p>

Text Hereyour text here

. <p class="_notificationItem_di476_2" style="text-align: center;"><a target="_blank" rel="noopener noreferrer nofollow" class="_unreadIndicator_di476_23" href="blank">.</a>your text here</p>

Test! <p class="_characterInfoMarkdownContent_9gldz_223 _iosStatusLine_1s17f_223" style="text-align: center;"><a target="_blank" rel="noopener noreferrer nofollow" class="_characterAvatar_di476_67" href="blank">Test !</a>Your Text here</p>

<p class="_card_13n8k_2 _list_13n8k_67 _clickable_13n8k_28

_card_13n8k_2 _list_13n8k_67 _selected_13n8k_67 _clickable_13n8k_28

클래스 이름은 공백으로 구분하기만 하면 됩니다. 많이 겹쳐 쓸수록 무언가 문제가 생겼을 때 어떤 클래스가 원인인지 찾기 어려워진다는 점을 기억하세요.

사용 방법:
사용 방법을 더 자세히 시각적으로 보려면 Rocket의 가이드

를 확인하세요.캐릭터 소개 입력란을 열고 편집기 오른쪽 상단의 </> 버튼을 클릭하세요. 그러면 기본 코드를 직접 보고 편집할 수 있는 원시 HTML 보기로 전환됩니다.

클래스를 적용하려면 다음과 같이 내용을 paragraph 태그로 감싸세요:
<p class="YOUR_CLASS_NAME_HERE">Your Text Here</p>

예시:

<p class="div _characterInfoMarkdownContent_123vi_223">Your Text Here</p>

YOUR_CLASS_NAME_HERE를 원하는 클래스 이름으로 바꾸기만 하면 됩니다.
편집을 마친 후 HTML 패널 하단의 Apply를 클릭해 변경 사항을 저장하세요.