사용자
nyangx3/a(r152판)
[주의!] 문서의 이전 버전(에 수정)을 보고 있습니다. 최신 버전으로 이동
- 다크 모드 대응#사용법((color=)(#[a-f0-9]{3}|#[a-f0-9]{6}|(?!(transparent))[a-z]{3,20})(>))|((\{\{\{)(#[a-f0-9]{3}|#[a-f0-9]{6}|#[a-z]{3,20})(\s))→$2$7$3$8,$3$8$5$9
- #!style 다크 모드:@theseed-dark-mode { }
- 표 속 접기 문법{{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)"
{{{#!folding ﾠ[ 펼치기 · 접기 ]
{{{#!wiki style="margin: -5px -1px -11px" - 일반 라운딩:{{{#!wiki style="margin: auto; max-width: 700px; border-radius: 8px; overflow: hidden"
- 표(테이블) 라운딩: tablealign 속성을 지우고, 테이블 크기를 <tablewidth=100%>로 설정해 두어야 정상적으로 작동한다.
- 좌/우측: 좌측 정렬 시 'float: right'부분을 지우면 된다.{{{#!wiki style="width: min(100%, 420px); overflow: hidden; float: right; border-radius: 8px; border: 2px #000 solid; word-break: keep-all"
{{{#!wiki style="margin: -12px -2px"
||<tablewidth=100%> - 중앙:{{{#!wiki style="max-width: 700px; overflow: hidden; margin: auto; border-radius: 8px; border: 2px #000 solid; word-break: keep-all"
{{{#!wiki style="margin: -12px -2px"
||<tablewidth=100%>
- 테두리 그라디엔트:{{{#!wiki style="border: 2px solid transparent; background: padding-box linear-gradient(var(--article-background-color)), border-box linear-gradient(to right in oklch, gradient)"
[ 또는 펼치기 · 접기 ]
- stable{{{#!wiki style="border: 2px solid transparent; background: padding-box linear-gradient(#fff), border-box linear-gradient(to right in oklch, gradient)" dark-style="background: padding-box linear-gradient(var(--article-background-color, #1c1d1f)), border-box linear-gradient(to right in oklch, gradient)"
- or{{{#!wiki style="border: 2px solid transparent; background: border-box linear-gradient(to right in oklch, gradient)"
{{{#!wiki style="background: #fff" dark-style="background: var(--article-background-color, #1c1d1f)"
- 표(테이블) 테두리 그라디엔트:{{{#!style
.border-gradient { border: 2px solid transparent; background: border-box linear-gradient(to right, gradient) }
.border-gradient td { background: padding-box var(--article-background-color) }
}}}
||<-2><tableclass=border-gradient><tablealign=right><tablewidth=420>[ 또는 펼치기 · 접기 ]
- stable{{{#!style
.border-gradient {border: 2px solid transparent; background: border-box linear-gradient(to right, gradient) }
.border-gradient td {background: padding-box #fff}
@theseed-dark-mode {
.border-gradient td { background: padding-box var(--article-background-color, #1c1d1f) } }
}}}
||<-2><tableclass=border-gradient><tablealign=right><tablewidth=420> - #!wiki only{{{#!wiki style="width: min(100%, 420px); overflow: hidden; float: right; border: 2px solid transparent; background: border-box linear-gradient(to right in oklch, gradient)"
{{{#!wiki style="background: #fff" dark-style="background: var(--article-background-color, #1c1d1f)"
{{{#!wiki style="margin: -12px -2px"
||<tablewidth=100%><tablebgcolor=transparent><tablebordercolor=transparent> - or{{{#!wiki style="width: min(100%, 420px); overflow: hidden; float: right; border: 2px solid transparent; background: border-box linear-gradient(to right in oklch, gradient)"
{{{#!wiki style="background: #fff" dark-style="background: var(--article-background-color, #1c1d1f)"
{{{#!wiki style="margin: -12px -2px"
||<tablewidth=100%><tablebgcolor=transparent><tablebordercolor=transparent>
- 글자 그라디엔트:{{{#!wiki style="display: inline; color: transparent; background: text linear-gradient(to right in oklch, gradient)"
- 이런거: dark-style 뒤는 생략 가능.{{{#!wiki style="display: inline; background: #000; color: #fff; padding: 2px 3px; border-radius: 5px; font-size: 0.65em" dark-style="background: #fff; color: #000;"
- 자간 조정:{{{#!wiki style="font: 1em/line_height a; font-family: revert"
- 둘러보기 틀:
[ 펼치기 · 접기 ]
- 이미지/텍스트:{{{#!wiki style="margin: auto; max-width: 700px; border-radius: 8px; background: #ddd; overflow: hidden; word-break: keep-all; text-align: center"
{{{#!wiki style="display: flex; padding: 10px; justify-content: center; align-items: center; gap: 10px"
[[파일:____.jpg|width=65px]]{{{#!wiki style="border-right: 1px #fff solid; height: 65px"
}}}{{{#!wiki style="text-align: left"
'''{{{+2 [[링크|{{{#fff,#fff 이름}}}]]}}}[br]{{{#fff,#fff 둘러보기}}}'''}}}}}} - ver2:{{{#!wiki style="margin: auto; max-width: 700px; border-radius: 8px; background: #ddd; overflow: hidden; word-break: keep-all; text-align: center"
{{{#!wiki style="display: inline-flex; padding: 10px"
{{{#!wiki style="border-right: 1px solid #fff; padding: 0 10px"
[[파일:____.jpg|width=65px]]}}}{{{#!wiki style="padding: 0 10px; text-align: left; vertical-align: middle"
'''{{{+2 [[링크|{{{#fff,#fff 이름}}}]]}}}[br]{{{#fff,#fff 둘러보기}}}''' }}} - 펼치기 · 접기:{{{#!wiki style="display: inline-block; min-width: 33.3%"
{{{#!folding [ 펼치기 · 접기 ]
||<width=9999><tablebgcolor=#fff,#1c1d1f><tablebordercolor=#ddd,#ddd><tablecolor=#373a3c,#ddd><nopad>
- 음반 문서 관련:
[ 펼치기 · 접기 ]
- 빌보드 진입||<-3><tablealign=right><tablewidth=420><tablebgcolor=transparent><tablebordercolor=#ddd,#ddd><colbgcolor=#666,#666><colcolor=#fff,#fff><nopad> {{{#!wiki style="padding: 5px; font: 1em/1.5em a; font-family: revert"
'''{{{-2 The ○th Single from ''앨범명''}}}[br]{{{+2 ''곡명''}}}'''}}} [[파일:__________.jpg|width=100%]] ||
||<width=30%> '''아티스트''' ||<-2><colkeepall> ||
|| '''발매일''' ||<-2>[[○○○○년]] [[○월 ○일]] ||
|| '''장르''' ||<-2> ||
|| '''길이''' ||<-2> ||
|| '''수록 앨범''' ||<-2>[[음반문서|{{{#!wiki style="display: inline; padding: 2px 3px; border-radius: 3px; background: #666; font-size: 0.75em"
{{{#fff,#fff '''앨범명'''}}}}}}]] ||
## || '''수록 앨범''' ||<-2>[include(틀:음반 표시, 음반종류=정규 ○집, 음반명=음반명, 문서명=음반문서, 글자색=#fff, 배경색=#666)] ||
|| '''프로듀서''' ||<-2> ||
|| '''레이블''' ||<-2> ||
||<|2> '''차트 기록''' ||<width=120> '''[[빌보드 핫 100]]''' ||'''○위''' ||
|| '''[[Official Charts]]''' ||'''○위''' ||
||<|2> '''스트리밍 기록''' || '''[[Spotify]]''' ||'''○○○○○○회'''[*기준 2025년 ○월 ○일 기준] ||
|| '''[[유튜브]]''' ||'''○○○○○○회'''[*기준] ||
## https://www.officialcharts.com/search/q/?articles=0&albums=0 > Official Charts > Search terms
## https://www.billboard.com/charts > Billboard > Search Artists - 미기록||<-2><tablewidth=420px><tablealign=right><colbgcolor=#666,#666><tablebordercolor=#666,#666><tablebgcolor=transparent><colcolor=#fff,#fff><nopad> {{{#!wiki style="padding: 5px; font: 1em/1.5em a; font-family: revert"
'''{{{-2 The ○th Single from ''앨범명''}}}[br]{{{+2 ''곡명''}}}'''}}} [[파일:__________.jpg|width=100%]] ||
||<width=30%> '''아티스트''' || ||
|| '''발매일''' ||[[○○○○년]] [[○월 ○일]] ||
|| '''장르''' || ||
|| '''길이''' || ||
|| '''수록 앨범''' ||[[음반문서|{{{#!wiki style="display: inline; padding: 2px 3px; border-radius: 3px; background: #666; font-size: 0.75em"
{{{#fff,#fff '''앨범명'''}}}}}}]] ||
## || '''수록 앨범''' ||[include(틀:음반 표시, 음반종류=정규 ○집, 음반명=음반명, 문서명=음반문서, 글자색=#fff, 배경색=#666)] ||
|| '''프로듀서''' || ||
|| '''레이블''' || ||
|| '''스트리밍 기록''' ||{{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)"
{{{#!folding ﾠ[ 펼치기 · 접기 ]
{{{#!wiki style="margin: -5px -1px -11px"
||<tablewidth=100%><tablebgcolor=transparent> '''[[유튜브]]''' || '''○○○○○○회'''[*기준 2025년 ○월 ○일 기준] ||
|| '''[[Spotify]]''' || '''○○○○○○회'''[*기준] ||}}}}}}}}} || - 라운디드/그라디엔트 테두리{{{#!wiki style="border: 2px solid transparent; width: min(100%, 420px); overflow: hidden; float: right; border-radius: 8px; word-break: keep-all; background: border-box linear-gradient(75deg in oklch, #211f1e, #bfcad9)"
{{{#!wiki style="margin: -12px -2px"
||<-2><tablewidth=100%><tablebgcolor=transparent><colcolor=#fff,#fff><nopad> {{{#!wiki style="padding: 5px; font: 1em/1.5em a; font-family: revert"
'''{{{-2 The ○th Single from ''앨범명''}}}[br]{{{+2 ''곡명''}}}'''}}} [[파일:__________.jpg|width=100%]] ||
||<width=30%> '''아티스트''' ||<colbgcolor=#fff,#1c1d1f> ||
|| '''발매일''' ||[[○○○○년]] [[○월 ○일]] ||
|| '''장르''' || ||
|| '''길이''' || ||
|| '''수록 앨범''' ||[[음반문서|{{{#!wiki style="display: inline; padding: 2px 3px; border-radius: 3px; background: #666; font-size: 0.75em"
{{{#fff,#fff '''앨범명'''}}}}}}]] ||
## || '''수록 앨범''' ||[include(틀:음반 표시, 음반종류=정규 ○집, 음반명=음반명, 문서명=음반문서, 글자색=#fff, 배경색=#666)] ||
|| '''프로듀서''' || ||
|| '''레이블''' || ||
|| '''스트리밍 기록''' ||{{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)"
{{{#!folding ﾠ[ 펼치기 · 접기 ]
{{{#!wiki style="margin: -5px -1px -11px"
||<tablewidth=100%><tablebgcolor=transparent> '''[[유튜브]]''' || '''○○○○○○회'''[*기준 2025년 ○월 ○일 기준] ||
|| '''[[Spotify]]''' || '''○○○○○○회'''[*기준] ||}}}}}}}}} ||
||<-3><bgcolor=#fff,#1c1d1f><color=#373a3c,#ddd> [[https://open.spotify.com/|[[파일:스포티파이 아이콘.svg|width=20]]]] | [[https://music.youtube.com|[[파일:유튜브 뮤직 아이콘.svg|width=20]]]] | [[https://soundcloud.com|[[파일:사운드클라우드 아이콘.svg|width=20&border-radius=3]]]] | [[https://music.apple.com/kr|[[파일:Apple Music 아이콘.svg|width=20]]]] | [[https://www.melon.com|[[파일:멜론 아이콘.svg|width=20]]]] | [[https://www.genie.co.kr|[[파일:지니뮤직 아이콘.svg|width=20]]]] | [[https://music.bugs.co.kr|[[파일:벅스 아이콘.png|width=20]]]] | [[https://vibe.naver.com|[[파일:네이버 VIBE 아이콘.svg|width=20&border-radius=3]]]] ||}}}}}}
- 스타일 인용문:
[ 펼치기 · 접기 ]
- 실선{{{#!wiki style="display: table; margin: 1em 0 -1em; padding: 1em; border: 1px solid #3F8AD4; border-left-width: 10px" dark-style="border-color: #3F8AD4"
인터넷에 떠도는 명언의 90%는 거짓이다.
{{{#!wiki style="border-top: #ccc solid 0.0625rem; margin: .5em 0" dark-style="border-color: #383b40"
}}}아이작 뉴턴 경}}}인터넷에 떠도는 명언의 90%는 거짓이다.
아이작 뉴턴 경 - 그라디엔트{{{#!wiki style="display: table; margin: 1em 0 -1em; padding: 1em; border: 1px solid transparent; border-left-width: 10px; background: padding-box linear-gradient(#fff), border-box linear-gradient(to bottom in oklch, #f6d242, #ff52e5)" dark-style="background: padding-box linear-gradient(var(--article-background-color, #1c1d1f)), border-box linear-gradient(to bottom in oklch, #f6d242, #ff52e5)"고양이는 신이 빚어낸 최고의 걸작품이다.
레오나르도 다빈치 - 점선(기본형){{{#!wiki style="display: table; margin: 1em 0 -1em; padding: 1em; border: 2px #ccc dashed; border-left: 5px solid #71bc6d" dark-style="border-color: #383b40; border-left-color: #666c75"대충 이렇게 써 두면 명언같아진다.
알베르트 아인슈타인
- 화면 크기에 따른 글자 크기 변경:{{{#!wiki style="font-size: clamp(.75em, 2vw, 1em)"
- 글자 테두리:{{{#!wiki style="text-shadow: 1px 0 red, 0 1px red, -1px 0 red, 0 -1px red, 1px 1px red, 1px -1px red, -1px -1px red, -1px 1px red; color: #fff"or[include(틀:글자 테두리, w=굵기, s=테두리색, s_d=다크테두리색, c=글자색, c_d=다크글자색, t=텍스트)]
- 줄 바꿈 없는 공백(no-break space):{{{#!html }}}
편집기에서 Ctrl(Comend)+H 누르면 '찾기/바꾸기' 창이 나오는데, 해당 창의 '찾기' 칸 우측의
그 뒤 아래의 것들을 찾기/바꾸기 칸에 적절히 입력한 뒤, 바꾸기 칸 옆에 있는 '모두 바꾸기' 버튼을 누른다.
.*
부분을 클릭하여 활성화한다.(정규식 모드)그 뒤 아래의 것들을 찾기/바꾸기 칸에 적절히 입력한 뒤, 바꾸기 칸 옆에 있는 '모두 바꾸기' 버튼을 누른다.
- <nopad> 치환(\|\|(<.*?>)?)(\s*)\{{3}#!wiki[-\s]*style\s*="\s*margin\s*:\s*-[56]px\s*-10px\s*((-[56]px\s*)?|(-[56]px\s*-10px))?;?\s*"[^=]*\n\s*(\[\[\s*파일:.*?\]\]|\[\[.*?\|\[\[\s*파일:.*?\]\]\]\]|\[(include|youtube|navertv|nicovideo|vimeo)\(.*?\)\])\s*\}{3}\s*\|\|→$1<nopad> $7 ||
- 년도 수정(0000. 00. 00.)(\d{4})\.\s?0?(\d{1,2})\.\s?0?(\d{1,2})\.?→$1. $2. $3.
- 날짜 링크 걸기(\d{1,4})년\s*0?(1[0-2]|\d)월\s?0?(3[01]|[1-2]?\d)일→[[$1년]] [[$2월 $3일]]
- 폰트
- {{{#!wiki style="font-family: 폰트"
- Apple 관련 문서:-apple-system, BlinkMacSystemFont, SF Pro Display, Pretendard, Inter, HelveticaNeue, Arial, sans-serif
- 리터럴/literal:ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace
- 세이프 폰트:
[ 펼치기 · 접기 ]
- 𝑴𝒂𝒕𝒉𝒆𝒎𝒂𝒕𝒊𝒄𝒂𝒍 𝑨𝒍𝒑𝒉𝒂𝒏𝒖𝒎𝒆𝒓𝒊𝒄 𝑺𝒚𝒎𝒃𝒐𝒍𝒔: 1D400–1D7FF, 13종류. 변환기
[ 펼치기 · 접기 ]
- 아래 단축키들은 raw 편집에서도 사용이 가능하다.
[ 기본 단축키 펼치기 · 접기 ]
- 복사 :Ctrl키 +C키. 문자열 선택이 없을 시 줄 전체를 복사한다.
- 붙여넣기 :Ctrl키 +V키
- 잘라내기 :Ctrl키 +X키. 문자열 선택이 없을 시 줄 전체를 잘라내기한다.
- 되돌리기(undo) :Ctrl키 +Z키
- 도로 하기(redo) :Ctrl키 +Y키 또는Ctrl키 +Shift키 +Z키
- 전체선택 :Ctrl키 +A키
- 선택 상태 유지 :Shift키 + 커서 이동 후 클릭 또는↑/↓/←/→키
- 블록 단위 이동 :Ctrl키 +←/→키
- 블록 단위 선택 :Ctrl키 +Shift키 +←/→키
- 아래 단축키들은 편집기에서만 사용이 가능하다. 모나코 에디터의 거의 모든 단축키들을 사용할 수 있다.
[ 편집기 단축키 펼치기 · 접기 ]
- 문자열 찾기 :Ctrl키 +F키 또는F3키. 대소문자 구별/완전일치/정규식을 사용할 수 있으며, 다중 커서와 연계할 시 상당히 다양한 작업이 가능하다.
- 문자열 찾아 바꾸기 :Ctrl키 +H키. 찾을 내용과 바꿀 내용을 입력해야 한다. 정규식을 사용할 시 바꿀 내용에 $n (n은 자연수)으로 그룹을 사용할 수 있다.
- 다중 커서 :Alt키 + 마우스 클릭
- 줄 단위 다중 커서 :Alt키 +Shift키 + 마우스 클릭
- 선택한 문자열과 같은 문자열 추가로 선택 :Ctrl키 +D키
- 선택한 문자열과 같은 문자열 모두 선택 :Ctrl키 +F2키 또는Ctrl키 +Shift키 +L키
- 행 복제 :Ctrl키 +Shift키 +↑/↓키
- 맨 위/아래로 이동 :Ctrl키 +↑/↓키
- 행을 내용의 위/아래로 이동 :Alt키 +↑/↓키
- 행 선택 :Ctrl키 +L키
- 주석화/해제 :Ctrl키 +/키
- 주석화 :Ctrl키 +K,Ctrl키 +C키
- 해제 :Ctrl키 +K,Ctrl키 +U키
- F1키를 눌러 모든 단축키와 단축키로 사용할 수 없는
딱히 쓸 곳은 없는작업들도 확인할 수 있다.
- 모바일 환경에서는 한 곳을 오랫동안 누르면 명령을 고를 수 있는 창이 나온다. 여기에서 "명령 팔레트 (F1)"을 고르면 선택할 수 있는 명령이 주어진다. "찾기"같이 적당한 이름을 검색하여 단축키를 사용한 것과 같은 편집을 해 볼 수 있다.
- 그 외 the seed 엔진에서 제공하는 단축키도 사용할 수 있다.
[ the seed 전용 단축키 펼치기 · 접기 ]
- F(Front Gate): 나무위키:대문으로 이동
- E(Edit): 현재 문서 편집
- C(RecentChanges): 최근 변경
- D(RecentDiscuss): 최근 토론
- A(Any): 랜덤 문서
F, E 빼곤 딱히 쓸 만한 건 없다.
- CSS Custom Property MDN
- espejo, liberty 스킨은 화이트 모든 배경색이 #fff로 같으나 다크 모드 배경색이 각각 #1c1d1f, #000로 다른데, 스타일 문법에서 background: var(--article-background-color)를 쓰는 방식으로 이를 가져올 수 있다.
그 외 color: var(--text-color)로 스킨 상관 없이 기본 텍스트 색[4]을 가져올 수 있으며, espejo 스킨 한정으로 color: var(--link-color) [5]로 기본 링크 색[6]을 가져올 수 있다.
그 외에도 있으나 따로 정리하기 귀찮고 쓸 일도 별로 없으니 아래 속성 이름과 값을 보고 알아서 유추하시길..
※볼드체는 espejo/liberty 스킨 모두에서 사용할 수 있는 변수.[ (espejo/색상) 펼치기 · 접기 ]
--espejo-background-color: #f5f5f5 / #000
--espejo-text-color: #212529 / #e0e0e0
→--text-color: var(--espejo-text-color)
--espejo-text-secondary-color: rgba(33, 37, 41, .749) / hsla(0, 0%, 88%, .749)
→--text-secondary-color: var(--espejo-text-secondary-color)
--espejo-text-tertiary-color: rgba(33, 37, 41, .502) / hsla(0, 0%, 88%, .502)
--espejo-text-quaternary-color: rgba(33, 37, 41, .353) / hsla(0, 0%, 88%, .353)
--espejo-text-light-color: #212529 / #212529
--espejo-link-color: #0275d8 / #ec9f19
→--link-color: var(--espejo-link-color)
--espejo-link-hover-color: #0263b8 / #bd7f14
--espejo-link-external-color: #377e21 / #377e21
--espejo-highlight-color: rgba(231, 227, 23, .5) / rgba(233, 230, 18, .3)
--espejo-white-color: #fff / #000
--espejo-black-color: #000 / #fff
--espejo-danger-color: #d64a58 / #d64a58
--espejo-danger-hover-color: #ab3b46 / #ab3b46
--espejo-pink-color: #db2777 / #be185d
--espejo-brand1-color: #00a69c / #2e3033
→--brand-color-1: var(--espejo-brand1-color)
--espejo-brand2-color: #28b472 / #2e3033
→--brand-color-2: var(--espejo-brand2-color)
--espejo-brand-bright1-color: #bfe9d5 / #c0c1c2
→--brand-bright-color-1: var(--espejo-brand-bright1-color)
--espejo-brand-bright2-color: #d4f0e3 / #c0c1c2
→--brand-bright-color-2: var(--espejo-brand-bright2-color)
--espejo-card-background-color: #fff / #1c1d1f
→--article-background-color: var(--espejo-card-background-color)
--espejo-card-border-color: #ccc / #444
--espejo-component-background-color: #fff / #000
--espejo-component-background-focus-color: #f2f2f2 / #262626
--espejo-component-border-color: #ced4da / #444
--espejo-component-border-focus-color: #878a8d / #888
--espejo-button-background-color: #fff / #000
--espejo-button-background-disabled-color: #f7f7f7 / #050505
--espejo-button-background-secondary-color: #a2a2a2 / #1f1f1f
--espejo-button-background-active-color: #d4f0e3 / #325e4a
--espejo-button-background-danger-color: #d64a58 / #d64a58
--espejo-button-background-hover-color: #efefef / #1e1e1e
--espejo-button-background-secondary-hover-color: #aaa / #1d1d1d
--espejo-button-background-active-hover-color: #c9e4d8 / #2d5543
--espejo-button-background-danger-hover-color: #c1434f / #c1434f
--espejo-button-background-focus-color: #f3f3f3 / #0a0a0a
--espejo-button-background-secondary-focus-color: #a7a7a7 / #141414
--espejo-button-background-active-focus-color: #cee9dc / #305946
--espejo-button-background-danger-focus-color: #c74552 / #c74552
--espejo-button-border-color: #dadada / #3e3e3e
--espejo-button-border-hover-color: #c5c5c5 / #4a4a4a
--espejo-button-border-focus-color: #c5c5c5 / #4d4d4d
--espejo-nav-bar-background-color: linear-gradient(90deg, #00a69c , #00a69c , #28b472 ) / #2e3033
--espejo-nav-bar-text-color: #fff / #fff
--espejo-nav-bar-item-hover-color: hsla(0, 0%, 100%, .1) / hsla(0, 0%, 100%, .1)
--espejo-nav-bar-border-color: #ccc / #444
--espejo-site-notice-background-color: #fefc8c / #181800
--espejo-site-notice-icon-background-color: #e5e37e / #2e2e00
--espejo-article-title-namespace-underline-color: inset 0 -0.5rem 0 #d4f0e3 / inset 0 -0.5rem 0 rgba(212, 240, 227, .3)
--espejo-article-menu-background-color: #fff / #2e2e2e
--espejo-toc-map-item-background-1-color: #5a5a5a / #c2c2c2
--espejo-toc-map-item-background-2-color: #5a5a5a / #c2c2c2
--espejo-toc-map-item-background-3-color: #8c8c8c / #888
--espejo-toc-map-item-background-4-color: #adadad / #616161
--espejo-toc-map-item-background-5-color: #bdbdbd / #4e4e4e
--espejo-toc-map-item-background-6-color: #bdbdbd / #4e4e4e
--espejo-toc-map-item-background-hover-1-color: #404040 / #d5d5d5
--espejo-toc-map-item-background-hover-2-color: #404040 / #d5d5d5
--espejo-toc-map-item-background-hover-3-color: #797979 / #959595
--espejo-toc-map-item-background-hover-4-color: #a0a0a0 / #6b6b6b
--espejo-toc-map-item-background-hover-5-color: #b3b3b3 / #555
--espejo-toc-map-item-background-hover-6-color: #b3b3b3 / #555
--espejo-nav-control-background-color: #1aafa6 / #2e3033
--espejo-nav-control-text-color: #fff / #fff
--espejo-nav-control-border-color: rgba(206, 212, 218, .5) / rgba(68, 68, 68, .5)
--light-text-color: #212529 / #212529
--dark-text-color: #e0e0e0 / #e0e0e0
--light-text-secondary-color: rgba(33, 37, 41, .749) / rgba(33, 37, 41, .749)
--dark-text-secondary-color: hsla(0, 0%, 88%, .749) / hsla(0, 0%, 88%, .749)
--light-link-color: #0275d8 / #0275d8
--dark-link-color: #ec9f19 / #ec9f19
--light-article-background-color: #fff / #fff
--dark-article-background-color: #1c1d1f / #1c1d1f[ (espejo/색상 외) 펼치기 · 접기 ]
--espejo-layout-gutter-var: 0
--espejo-card-gutter-var: 1rem
--espejo-content-gutter-var: 0
--espejo-nav-bar-height-var: 3rem
--espejo-nav-bar-brand-gap-var: 0.5rem
--espejo-nav-bar-menu-item-gap-var: 0
--espejo-nav-bar-image-height-var: 2rem
--espejo-search-box-gap-var: 0
--espejo-search-box-gutter-left-var: env(safe-area-inset-left, 0)
--espejo-search-box-gutter-right-var: env(safe-area-inset-right, 0)
--espejo-search-box-button-width-var: 2rem
--espejo-search-box-left-button-width-var: 2.25rem
--espejo-search-box-suggest-gutter-left-var: max(env(safe-area-inset-left, 0), 0.25rem)
--espejo-search-box-suggest-gutter-right-var: max(env(safe-area-inset-right, 0), 0.25rem)
--espejo-site-notice-gap-left-var: env(safe-area-inset-left, 0)
--espejo-site-notice-gap-right-var: env(safe-area-inset-right, 0)
--espejo-sidebar-item-gutter-left-var: calc(env(safe-area-inset-left, 0) + 1rem)
--espejo-sidebar-item-gutter-right-var: calc(env(safe-area-inset-right, 0) + 1rem)
--espejo-article-gutter-left-var: calc(env(safe-area-inset-left, 0) + 1rem)
→--article-padding-x: var(--espejo-article-gutter-left-var)
--espejo-article-gutter-right-var: calc(env(safe-area-inset-right, 0) + 1rem)
--espejo-article-gutter-y-var: 1rem
→--article-padding-y: var(--espejo-article-gutter-y-var)
--espejo-article-title-gutter-bottom-var: 1.25rem
--espejo-article-wiki-title-gutter-bottom-var: 1rem
--espejo-nav-control-gutter-x-var: 1.5rem
--espejo-nav-control-gutter-y-var: 1.5rem
--espejo-nav-control-gap-var: 0.5rem
--espejo-sidebar-width-var: 280px
--espejo-nav-control-toc-popup-width-var: 280px
--espejo-page-font-size-var: 15px
--espejo-page-font-family-var: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji
--espejo-page-font-weight-var: 400
--espejo-layout-gutter-var: 1rem
--espejo-card-gutter-var: 1.25rem
--espejo-content-gutter-var: 1rem
--espejo-card-border-width-var: 1px
--espejo-card-border-radius-var: 6px
--espejo-button-border-width-var: 1px
--espejo-button-border-radius-var: 0.3rem
--espejo-button-gutter-x-var: 0.75rem
--espejo-button-gutter-y-var: 0.25rem
--espejo-nav-bar-height-var: 3.5rem
--espejo-nav-bar-gutter-left-var: max(env(safe-area-inset-left, 0), 1rem)
--espejo-nav-bar-gutter-right-var: max(env(safe-area-inset-right, 0), 1rem)
--espejo-nav-bar-gutter-y-var: 0.5rem
--espejo-nav-bar-border-width-var: 1px
--espejo-nav-bar-brand-gap-var: 1rem
--espejo-nav-bar-child-radius-var: 4px
--espejo-nav-bar-menu-item-gutter-var: 0.75rem
--espejo-nav-bar-menu-item-gap-var: 0.5rem
--espejo-nav-bar-menu-icon-size-var: 1rem
--espejo-nav-bar-menu-icon-size-large-var: 1.2rem
--espejo-nav-bar-menu-icon-gap-var: 0.75rem
--espejo-nav-bar-menu-font-size-var: 1.05rem
--espejo-nav-bar-menu-font-weight-var: 500
--espejo-nav-bar-image-menu-item-gutter-var: 0.5rem
--espejo-nav-bar-image-height-var: 2.5rem
--espejo-search-box-width-var: 20rem
--espejo-search-box-height-var: 2.5rem
--espejo-search-box-gap-var: 0.5rem
--espejo-search-box-gutter-left-var: 0
--espejo-search-box-gutter-right-var: 0
--espejo-search-box-button-width-var: 2.25rem
--espejo-search-box-left-button-width-var: 2.5rem
--espejo-search-box-suggest-gap-top-var: 0.75rem
--espejo-search-box-suggest-gutter-left-var: 0.25rem
--espejo-search-box-suggest-gutter-right-var: 0.25rem
--espejo-search-box-suggest-item-gutter-x-var: 0.5rem
--espejo-search-box-suggest-item-gutter-y-var: 0.5rem
--espejo-site-notice-gap-left-var: 0
--espejo-site-notice-gap-right-var: 0
--espejo-site-notice-gutter-x-var: 0.75rem
--espejo-site-notice-gutter-y-var: 0.75rem
--espejo-dropdown-menu-gutter-x-var: 0
--espejo-dropdown-menu-gutter-y-var: 0.25rem
--espejo-dropdown-menu-gap-top-var: 0.25rem
--espejo-dropdown-menu-gap-x-var: 0.25rem
--espejo-dropdown-menu-item-gutter-x-var: 0.75rem
--espejo-dropdown-menu-item-gutter-y-var: 0.375rem
--espejo-dropdown-menu-item-gutter-y-tight-var: 0.3125rem
--espejo-dropdown-menu-item-gap-x-var: 0.25rem
--espejo-dropdown-menu-item-gap-y-var: 0.125rem
--espejo-dropdown-menu-item-gap-y-tight-var: 0
--espejo-dropdown-menu-item-border-radius-var: 4px
--espejo-dropdown-menu-item-icon-gap-var: 0.75rem
--espejo-dropdown-menu-item-icon-gap-tight-var: 0.35rem
--espejo-dropdown-menu-header-gutter-x-var: 1rem
--espejo-dropdown-menu-header-gutter-top-var: 0.375rem
--espejo-dropdown-menu-header-gutter-bottom-var: 0.125rem
--espejo-sidebar-width-var: 320px
--espejo-sidebar-item-gutter-left-var: 1.25rem
--espejo-sidebar-item-gutter-right-var: 1.25rem
--espejo-sidebar-item-gutter-bottom-var: 1rem
--espejo-article-min-height-var: 50rem
--espejo-article-gutter-left-var: 1.5rem
--espejo-article-gutter-right-var: 1.5rem
--espejo-article-gutter-y-var: 1.5rem
--espejo-article-seperator-width-var: 1px
--espejo-article-seperator-gap-var: 1.5rem
--espejo-article-title-gutter-bottom-var: 1.5rem
--espejo-article-wiki-title-gutter-bottom-var: 1.5rem
--espejo-nav-control-gutter-x-var: 2.5rem
--espejo-nav-control-gutter-y-var: 2rem
--espejo-nav-control-gap-var: 0.75rem
--espejo-nav-control-item-width-var: 2.5rem
--espejo-nav-control-item-height-var: 2.5rem
--espejo-nav-control-toc-popup-width-var: 320px
--espejo-nav-control-toc-popup-max-height-var: 28rem
--toast-area-offset-x: calc(var(--espejo-nav-control-gutter-x-var) + env(safe-area-inset-right) - 0.5rem)
--toast-area-offset-y: calc(var(--espejo-nav-control-gutter-y-var) + env(safe-area-inset-bottom) + 6rem)
--scrollbar-width: 0px;
--visual-viewport-height: (사용자의 화면 높이);
--csstools-color-schee--dark: / initial[ (liberty/나무위키 기준) 펼치기 · 접기 ]
--liberty-brand-color: #008275 / #2d2f34
→--brand-color-1: var(--liberty-brand-color)
→--brand-color-2: var(--liberty-brand-color)
--liberty-brand-dark-color: #00413b / #16171a
--liberty-brand-bright-color: #80c1ba / #383b40
→--brand-bright-color-1: var(--liberty-brand-bright-color)
→--brand-bright-color-2: var(--liberty-brand-bright-color)
--liberty-navbar-logo-image: url(https://namu.wiki/liberty_namu_logo.png);
--liberty-navbar-logo-minimum-width: 6rem;
--text-color: #373a3c / #ddd
--article-background-color: #fff / #000
--csstools-color-schee--dark: / initial
- 그라디엔트 관련
- 그라디엔트를 만들 때 기본 색 공간에서 만들면 보기 좋지 않은 결과물이 나올 확률이 높다. 특히 보색을 사용하거나 여러 색상을 사용할 때 이런 현상이 많이 일어나는데, 이럴 때linear-gradient(to right in <색공간명>, 색상1, 색상2)형식으로 색 공간을 다르게 정의하여 보통 더 나은 결과물을 얻을 수 있다.
아래는 보색 관계인 보라색과 초록색의 색 공간별 그라디엔트 예시이다.normal(to right in srgb-linear, #5211EE, #ADEE11)(to right in lab, #5211EE, #ADEE11)(to right in oklab, #5211EE, #ADEE11)(to right in lch, #5211EE, #ADEE11)(to right in oklch, #5211EE, #ADEE11) - color-interpolation-method: 사용 가능한 색 공간
[ 펼치기 · 접기 ]
- rectangular-color-space
(to right in srgb, #5211EE, #ADEE11)(to right in srgb-linear, #5211EE, #ADEE11)(to right in display-p3, #5211EE, #ADEE11)(to right in a98-rgb, #5211EE, #ADEE11)(to right in prophoto-rgb, #5211EE, #ADEE11)(to right in rec2020, #5211EE, #ADEE11)(to right in lab, #5211EE, #ADEE11)(to right in oklab, #5211EE, #ADEE11)- xyz-space
(to right in xyz, #5211EE, #ADEE11)(to right in xyz-d50, #5211EE, #ADEE11)(to right in xyz-d65, #5211EE, #ADEE11)- polar-color-space
(to right in hsl, #5211EE, #ADEE11)(to right in hwb, #5211EE, #ADEE11)(to right in lch, #5211EE, #ADEE11)(to right in oklch, #5211EE, #ADEE11) - hue-interpolation-method: polar-color-space(hsl, hwb, lch, oklch)에서만 사용 가능.
[ 펼치기 · 접기 ]
- 유효한 값: shorter hue, longer hue, increasing hue, decreasing hue
- hsl
in hsl longer hue, red, bluein hsl increasing hue, red, bluein hsl shorter hue, red, bluein hsl decreasing hue, red, blue- lch
in lch longer hue, red, bluein lch shorter hue, red, blue- oklch
in oklch longer hue, red, bluein oklch shorter hue, red, blue- 🌈
in hsl longer hue, red, redin lch longer hue, red, redin oklch longer hue, red, red
- 토론
- 빈 댓글을 만들기 위해##같은 주석 문법을 많이 사용하는데, 사실\한 글자로도 만들 수 있다.
- if 문법으로 구현한 계산기이며, 특성상 소수점 계산 시 및 long 한계[7]를 넘을 시 오류가 날 수 있다.[include(사용자:nyangx3/연습장, if=계산기, a=54321, f=+, b=12345)][include(사용자:nyangx3/연습장, if=계산기, a=-741, f=-, b=147)][include(사용자:nyangx3/연습장, if=계산기, a=37, f=*, b=73)][include(사용자:nyangx3/연습장, if=계산기, a=23, f=/, b=7)]
[ 오류 펼치기 · 접기 ]
[include(사용자:nyangx3/연습장, if=계산기, a=0.99999, f=+, b=0.99999)][include(사용자:nyangx3/연습장, if=계산기, a=9223372036854775808, f=+, b=9223372036854775000)][include(사용자:nyangx3/연습장, if=계산기, a=92233720368547758080, f=*, b=123)][include(사용자:nyangx3/연습장, if=계산기, a=1, f=/, b=0)][include(사용자:nyangx3/연습장, if=계산기, a=0, f=/, b=0)] - 그 외 소수점 계산 및
[ 큰 수 계산기 펼치기 · 접기 ]
- 단계별 글자 크기
1em = espejo: 14.25px, liberty: 15px입력출력입력출력+1단계1.28889em-1단계0.92589em+2단계1.38889em-2단계0.83333em+3단계1.48144em-3단계0.74067em+4단계1.57400em-4단계0.64811em+5단계1.66667em-5단계0.62222em