Janitor
홈
Ctrl K
로그인회원가입

EPHEMERIS | CSS 템플릿 [요청]

영어에서 번역됨·

EPHEMERIS | CSS TEMPLATE [REQUEST]

16

16

by:@Ru1nous

밤하늘의 비행기를 마치 별똥별처럼 여겨도 될까

──────── ✦ ────────

EPHEMERIS
밤하늘 테마의 JanitorAI 프로필 템플릿 | 바이오 코드 제작 @MONIE_

✦ 이 가이드 사용법 ✦

01 / 시작하기 전에

빠른 시작

1 · 복사하세요 전부 | 골드 | (구글 문서)

2 · 찾기(Ctrl/Cmd + F)로 편집하세요. 이 가이드의 클래스 이름을 검색하세요. 예: nx-title.

3 · 전체 선택 후 복사해서 JanitorAI의 About Me 칸에 붙여넣으세요. 저장하고, 새로고침하고, 휴대폰에서 확인하세요.

──────── ✦ ────────

02 / 아무것도 깨지지 않게

5가지 규칙

✦ 빈 줄 금지. 새 줄을 만들려면 <br>을 입력하세요.

✦ 직접 이미지 링크만. .png / .jpg / .gif로 끝나야 합니다. 사용하지 않는 이미지는 src=""로 두면 스스로 숨겨집니다.

✦ "따옴표" 안이나 >와 < 사이의 단어만 바꾸세요. 따옴표, < >, { }, class=는 절대 지우지 마세요.

✦ <style> 부분에 주석이나 * ~ 문자 금지. JanitorAI는 그 지점에서 스타일시트를 잘라버립니다.

✦ JanitorAI는 url(), @import, data: 이미지, CSS 변수, <input>, <label>, 그리고 CSS 속성 scale: 과 rotate: 를 삭제합니다.

· ─────── ✦ ─────── ·

03 / 검색 → 변경

바꾸고 싶은 것...

내 이름 → nx-title

환영 문구 → nx-kicker

내 캐릭터 사진 → nx-sona

내 달 사진 → nx-moon-pic

티커 텍스트 (두 복사본 모두 편집) → nx-ticker-set

About Me 박스 → nx-acc

About Me 사진 (3장) → nx-portrait

규칙 / FAQ → nx-rf · nx-rule

내 링크 → nx-fl

친구 → nx-friend

갤러리 (두 그룹 모두 편집) → nx-gi

시리즈 → nx-cover

배너 → nx-banner

음악 플레이어 → nx-mp-trk

페어리 라이트 → nx-fairy · nx-fairyb

페이지 펫 → nx-pet

크레딧 → nx-credit

──────── ✦ ────────

04 / 모든 패널

섹션들

ABOUT ME

아치형 프레임에 사진 세 장, 박스마다 하나씩. 각 박스는 <details>입니다: 제목은 <summary>, 텍스트는 <p>. 세 박스를 모두 유지하세요. 추가하려면 블록 전체를 복사하세요.

✦ 규칙 & FAQ — 사진 카드 두 개; 호버하면 슬라이드, 탭하면 목록이 열립니다. 규칙은 nx-rule(제목은 <b>, 이유는 <span>)입니다. FAQ 질문은 <details>입니다.

✦ FIND ME — 링크마다 nx-fl 행 하나: 기호는 <i>, 이름은 <b>, 설명은 <small>, 링크는 href.

✦ FRIENDS — 각각 nx-friend 행 하나(이름, 설명, 사진, 링크). 네 개까지 들어가고 그 이상은 스크롤됩니다.

✦ GALLERY — 가로 스크롤 스트립. 동일한 그룹이 두 개(nx-gset) 있습니다: 두 그룹 모두의 사진을 전부 바꾸세요.

✦ SERIES — 각 시리즈는 하나의 <details class="nx-cover"> ... </details> 블록입니다. 추가하려면 블록 전체를 복사하세요; 블록 안에 붙여넣지 마세요.

✦ ABOUT · RULES · LINKS · FRIENDS · GALLERY · SERIES ✦

· · · ✦ · · ·

05 / 작은 추가 요소

음악 플레이어

히어로 하단을 따라가는 반투명 유리 바. 되감기와 앞으로 가기는 3개 트랙 사이를 전환합니다(디스크 사진, 제목, 아티스트, 링크 모두 바뀜). 재생을 누르면 해당 트랙의 링크가 열립니다.

nx-mp-trk 검색 → 세 개의 블록. nx-mp-song, nx-mp-artist, <img src=""> 그리고 nx-mp-btn href를 바꾸세요.

YouTube 자동재생 링크: https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID&autoplay=1
Spotify는 재생목록을 열지만 자동재생을 강제할 수는 없습니다.

05B / 별 가랜드

페어리 라이트

반짝이는 별들로 된 두 겹의 가랜드가 사이트 상단 바 아래에 걸려 있고, 늘어진 별들이 흔들립니다. 스크롤해도 제자리에 있으며 클릭을 막지 않습니다. 첫 번째는 nx-fairy(고른 7개의 스왜그), 위쪽의 더 복잡한 것은 nx-fairyb(불규칙한 11개의 스왜그)입니다.

위아래로 옮기려면 두 규칙 모두에서 top:56px을 바꾸세요(같은 숫자). 휴대폰은 CSS 끝 부분 근처의 @media(max-width:720px) 줄에서 top:44px을 씁니다.

하나 제거하려면 코드 맨 위의 <div class="nx-fairy..."> 블록을 삭제하세요. 코드를 정리하고 싶을 때만 해당 CSS도 삭제하세요.

06 / 달

달

nx-moon-pic에 투명 PNG를 넣으세요. 60초 동안 순환합니다: 그림자가 미끄러져 사라지고, 사진이 뒤집히고, 그림자가 다시 미끄러져 돌아옵니다. 네 개의 달 규칙에서 60s를 바꾸세요(같게 유지); -12s가 시작 지점입니다. 중심에서 벗어나 있다면 .nx-moon-pic의 inset:-19%를 바꾸세요.

07 / 팔레트

색상 & 글꼴

색상은 모든 규칙에 명시되어 있으므로 찾기 & 바꾸기로 전체 색을 바꿀 수 있습니다.

#d9dce6 실버 #b9a6d6 보라색 포인트 #5b5b66 회색 테두리 #ececf0 본문 텍스트

골드 버전: 골드 템플릿을 쓰거나 #d9dce6 → #efddba 그리고 #b9a6d6 → #dfc277로 바꾸세요

글꼴: 사이트 내장 글꼴만 작동합니다(@import 불가). 찾기 & 바꾸기로 이름을 바꾸세요. 허용되는 글꼴 목록은 여기에서 볼 수 있습니다.

──────── ✦ ────────

08 / 뭔가 잘못돼 보일 때

문제 해결

♡ 페이지가 스타일 없이 보임 — <style>에 * ~ 또는 /* */가 들어갔거나, }가 삭제됨

♡ 사진 누락 — 링크가 직접 링크가 아니거나, src=""가 비어 있음

♡ 티커 / 갤러리 튐 — 두 복사본이 일치하지 않음

♡ 플레이어 버튼이 작동 안 함 — name="nxmp"가 빠졌거나, 두 트랙의 open이 열려 있음

♡ 아코디언이 전환 안 됨 — <details>에서 name= 또는 </details가 사라짐>

09 / 친절하게

크레딧 규칙

✔ 자신의 프로필에서 자유롭게 사용하고 편집할 수 있습니다. 크레딧 줄은 제거해도 됩니다.

✦ ✦ ✦

EPHEMERIS · 질문이 있나요? 메시지 주세요!



생성됨 10월 24일

업데이트됨 10월 25일

게시됨 10월 24일

  • 무제한
  • #css
  • #profilecss
  • #freecss
  • #ru1noustemplates
프록시 허용됨

공개된 채팅