편집 요약 없음 |
|||
(같은 사용자의 중간 판 19개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
{{namucat|김찬 | {{namucat|DISPLAYTITLE=김찬 연습장 {{nobold|{{fs|14|(메모)}}}}|김찬/연습장}} | ||
{{김찬 연습장}} | {{김찬 연습장}} | ||
{{목차}} | {{목차}} | ||
7번째 줄: | 7번째 줄: | ||
* {{exhide|ex=off|https://ko.wikipedia.org/wiki/위키백과:대문|위키백과}}/{{exhide|ex=off|https://www.mediawiki.org/wiki/MediaWiki|미디어위키}}/{{exhide|ex=off|https://librewiki.net/wiki/리브레_위키:현관|리브레위키}} - 같은 엔진과 문법을 쓰는 만큼 도움말에서 참고할 정보가 무지 많음. | * {{exhide|ex=off|https://ko.wikipedia.org/wiki/위키백과:대문|위키백과}}/{{exhide|ex=off|https://www.mediawiki.org/wiki/MediaWiki|미디어위키}}/{{exhide|ex=off|https://librewiki.net/wiki/리브레_위키:현관|리브레위키}} - 같은 엔진과 문법을 쓰는 만큼 도움말에서 참고할 정보가 무지 많음. | ||
* {{exhide|ex=off|https://namu.wiki/w/나무위키:대문|나무위키}} - 엔진과 문법은 다르지만 디자인 면에서 참고할 수 있음. | * {{exhide|ex=off|https://namu.wiki/w/나무위키:대문|나무위키}} - 엔진과 문법은 다르지만 디자인 면에서 참고할 수 있음. | ||
== 머찐 그라데이션 == | |||
소장 가치가 이써요 | |||
{|{{style|class=wiki|width=100%|layout=on}} | |||
|- | |||
!문법||결과 | |||
|- | |||
|2022 연말시리즈 | |||
<pre style="user-select: all;">linear-gradient(172deg, #be2537 5%, #f03a43 40%, #f47b5d 73%, #fac78c 75%)</pre> | |||
|{{style|bg=linear-gradient(172deg, #be2537 5%, #f03a43 40%, #f47b5d 73%, #fac78c 75%)}}| | |||
|- | |||
|2023 연말시리즈 | |||
<pre style="user-select: all;">linear-gradient(60deg, #ff9b00 16%, #fb0055 16%, #fb0055 22%, #fb0055 22%, #fb0055 25%, #880e4f 25%, #880e4f 50%, transparent 50%), linear-gradient(120deg, #880e4f 75%, #fb0055 75%, #fb0055 78%, #fb0055 78%, #fb0055 84%, #ff9b00 84%)</pre> | |||
|{{style|bg=linear-gradient(60deg, #ff9b00 16%, #fb0055 16%, #fb0055 22%, #fb0055 22%, #fb0055 25%, #880e4f 25%, #880e4f 50%, transparent 50%), linear-gradient(120deg, #880e4f 75%, #fb0055 75%, #fb0055 78%, #fb0055 78%, #fb0055 84%, #ff9b00 84%)}}| | |||
|- | |||
|나무위키 {{exhide|type=namu|기르제아}} 문서<br>px 단위라 모바일에선 잘 안 보일 듯? | |||
<pre style="user-select: all;">repeating-linear-gradient(45deg, transparent, transparent 45px, #000 45px, #000 72.5px), repeating-linear-gradient(135deg, transparent, transparent 45px, #000 45px, #000 72.5px), linear-gradient(#5a5a5a, #5a5a5a)</pre> | |||
|{{style|bg=repeating-linear-gradient(45deg, transparent, transparent 45px, #000 45px, #000 72.5px), repeating-linear-gradient(135deg, transparent, transparent 45px, #000 45px, #000 72.5px), linear-gradient(#5a5a5a, #5a5a5a)}}| | |||
|- | |||
|<pre style="user-select: all;">linear-gradient(0deg, rgba(255, 255, 255, 0.875), rgba(255, 255, 255, 0.875)), repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px ), linear-gradient(hsl(34, 53%, 82%), hsl(34, 53%, 82%))</pre> | |||
|{{style|bg=linear-gradient(0deg, rgba(255, 255, 255, 0.875), rgba(255, 255, 255, 0.875)), repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px ), linear-gradient(hsl(34, 53%, 82%), hsl(34, 53%, 82%))}}| | |||
|- | |||
|<pre style="user-select: all;">radial-gradient(circle at 50% 50%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 0% 0%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 0% 100%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 100% 0%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 100% 100%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 90deg at 97.5% 67%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 90deg at 97.5% 67%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 270deg at 2.5% 33%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 270deg at 2.5% 33%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 120deg at 50% 83%, white 0 120deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -60deg at 50% 17%, white 0 120deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 0deg at 50% 50%, #fff0 0 2deg, #1c1b18 2.5deg 57.5deg, #fff0 58deg 62.5deg, #211e1e 63deg 117.5deg, #fff0 118deg 122.5deg, #0c0b0a 123deg 177.5deg, #fff0 178deg 182deg, #1c1b18 182.5deg 237.5deg, #fff0 0 242.5deg, #211e1e 243deg 297.5deg, #fff0 298deg 302.5deg, #0c0b0a 303deg 357.5deg, #fff0 358deg 360deg) 50% / calc(4px * 17.5) calc(4px * 29.5), white</pre> | |||
|{{style|bg=radial-gradient(circle at 50% 50%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 0% 0%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 0% 100%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 100% 0%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 100% 100%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 90deg at 97.5% 67%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 90deg at 97.5% 67%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 270deg at 2.5% 33%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 270deg at 2.5% 33%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 120deg at 50% 83%, white 0 120deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -60deg at 50% 17%, white 0 120deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 0deg at 50% 50%, #fff0 0 2deg, #1c1b18 2.5deg 57.5deg, #fff0 58deg 62.5deg, #211e1e 63deg 117.5deg, #fff0 118deg 122.5deg, #0c0b0a 123deg 177.5deg, #fff0 178deg 182deg, #1c1b18 182.5deg 237.5deg, #fff0 0 242.5deg, #211e1e 243deg 297.5deg, #fff0 298deg 302.5deg, #0c0b0a 303deg 357.5deg, #fff0 358deg 360deg) 50% / calc(4px * 17.5) calc(4px * 29.5), white}}| | |||
|} | |||
== 색 == | == 색 == | ||
40번째 줄: | 66번째 줄: | ||
|#33b733 | |#33b733 | ||
|{{style|align=left}}|제이위키 하이퍼링크(외부 링크) 기본 색 → {{c|#33b733|예시}} | |{{style|align=left}}|제이위키 하이퍼링크(외부 링크) 기본 색 → {{c|#33b733|예시}} | ||
|- | |||
|{{style|bg=#ec9f19}}| | |||
|#ec9f19 | |||
|{{style|align=left}}|제이위키 다크 모드 하이퍼링크 기본 색 → {{c|#ec9f19|예시}} | |||
|- | |||
|{{style|bg=#dc4343}}| | |||
|#dc4343 | |||
|{{style|align=left}}|제이위키 다크 모드 하이퍼링크(없는 문서) 기본 색 → {{c|#dc4343|예시}} | |||
|- | |- | ||
|{{style|bg=#333333}}| | |{{style|bg=#333333}}| | ||
131번째 줄: | 165번째 줄: | ||
{{MT}} | {{MT}} | ||
|- | |- | ||
! | !{{style|width=15%}}|상 | ||
!{{style|width=15%}}|하 | |||
!{{style|width=15%}}|좌 | |||
!{{style|width=15%}}|우 | |||
!요소 | |||
|- | |- | ||
|0.8rem 0 | !colspan=5|margin | ||
|- | |||
|colspan=2|0.8rem | |||
|colspan=2|0 | |||
|rowspan=2|wikitable 표 | |rowspan=2|wikitable 표 | ||
|- | |- | ||
|12px 0 | |colspan=2|12px | ||
|colspan=2|0 | |||
|- | |- | ||
|0.5rem | |colspan=2|0.5rem | ||
|1.6rem | |||
|0 | |||
|{{nowiki|<ul>}} | |||
|- | |- | ||
|0.3em 0 | |0.3em | ||
|0 | |||
|3.2em | |||
|0 | |||
|{{nowiki|<ol>}} | |||
|- | |- | ||
!colspan= | !colspan=5|padding | ||
|- | |- | ||
|0.3rem 0.6rem | |colspan=2|0.3rem | ||
|colspan=2|0.6rem | |||
|rowspan=2|wikitable 표 칸 내부 | |rowspan=2|wikitable 표 칸 내부 | ||
|- | |- | ||
|4.5px 9px | |colspan=2|4.5px | ||
|colspan=2|9px | |||
|- | |- | ||
!colspan= | !colspan=5|font-size | ||
|- | |- | ||
|0.96rem | |colspan=4|0.96rem | ||
|rowspan=3|글씨 크기 | |rowspan=3|글씨 크기 | ||
|- | |- | ||
|14.4px | |colspan=4|14.4px | ||
|- | |- | ||
|10.8pt | |colspan=4|10.8pt | ||
{{MT끝}} | {{MT끝}} | ||
162번째 줄: | 213번째 줄: | ||
{{MT|text=center}} | {{MT|text=center}} | ||
|- | |- | ||
|{{펼접|id=special-letter|style=table-layout: fixed;}} | |{{style|bg=header}}|{{펼접|id=special-letter|title=[ 유니코드 특수문자 ]|style=table-layout: fixed;}} | ||
|- | |||
|colspan=5| | |||
|- | |- | ||
!colspan=5|{{fs|14|발음 기호}} | !colspan=5|{{fs|14|발음 기호}} | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!À||Á||Â||Ã||Ä | !À||Á||Â||Ã||Ä | ||
216번째 줄: | 269번째 줄: | ||
|&uuml;||&yuml; | |&uuml;||&yuml; | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!colspan=5|{{fs|14|구두점}} | !colspan=5|{{fs|14|구두점}} | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!¿||¡||§||¶||† | !¿||¡||§||¶||† | ||
238번째 줄: | 291번째 줄: | ||
|&ldquo;||&rdquo; | |&ldquo;||&rdquo; | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!colspan=5|{{fs|14|통상 기호}} | !colspan=5|{{fs|14|통상 기호}} | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!™||©||®||¢||€ | !™||©||®||¢||€ | ||
252번째 줄: | 305번째 줄: | ||
|&yen;||&pound;||&curren; | |&yen;||&pound;||&curren; | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!colspan=5|{{fs|14|그리스 문자}} | !colspan=5|{{fs|14|그리스 문자}} | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!α||β||γ||δ||ε | !α||β||γ||δ||ε | ||
286번째 줄: | 339번째 줄: | ||
|&Pi;||&Sigma;||&Phi;||&Psi;||&Omega; | |&Pi;||&Sigma;||&Phi;||&Psi;||&Omega; | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!colspan=5|{{fs|14|수학 기호}} | !colspan=5|{{fs|14|수학 기호}} | ||
|- | |- | ||
| | |colspan=5| | ||
|- | |- | ||
!∫||∑||∏||√||− | !∫||∑||∏||√||− | ||
350번째 줄: | 403번째 줄: | ||
… | … | ||
|틀20=틀이름}}</pre> | |틀20=틀이름}}</pre> | ||
=== CSS === | |||
{{folding|id=css-memo-1|title=[ 모바일과 PC에서 서로 다른 코드 짜기 ]|table=on| | |||
{{pre2|lang=css|line=on| | |||
@media screen and (max-width: 768px) { | |||
Mobile에서 | |||
} | |||
@media screen and (min-width: 768px) { | |||
PC에서 | |||
} | |||
}} | |||
}} | |||
== 클래스 종류 == | == 클래스 종류 == | ||
* 테이블 | * 테이블 | ||
** '''wikitable'''<br>가장 기본적인 형태의 테이블 레이아웃 | ** '''wikitable'''<br>가장 기본적인 형태의 테이블 레이아웃 | ||
** '''infobox'''<br>모서리를 둥글게 처리한 레이아웃 | ** '''infobox'''<br>모서리를 둥글게 처리한 레이아웃 | ||
* div와 span | * div와 span | ||
** '''mw-collapsible'''<br>미디어위키 기본 접기 | ** '''mw-collapsible'''<br>미디어위키 기본 접기 | ||
** '''mw-customtoggle-클래스명'''<br>커스텀 접기 | ** '''mw-customtoggle-클래스명'''<br>커스텀 접기 | ||
363번째 줄: | 428번째 줄: | ||
== 템플릿 == | == 템플릿 == | ||
=== 틀 문서 === | === 틀 문서 === | ||
{|width="100%" | |||
|- | |||
| | |||
{{나무접기2|id=template-doc|<pre style="user-select: all;">{{namucat}} | {{나무접기2|id=template-doc|<pre style="user-select: all;">{{namucat}} | ||
{{틀 도움}} | {{틀 도움}} | ||
374번째 줄: | 442번째 줄: | ||
== 둘러보기 == | == 둘러보기 == | ||
{{김찬 제작 틀}}</pre>}} | {{김찬 제작 틀}}</pre>}} | ||
|} | |||
=== [[아이펠루스]] === | === [[아이펠루스]] === | ||
{|width="100%" | |||
|- | |||
| | |||
{{나무접기2|id=eipellus-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | {{나무접기2|id=eipellus-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | ||
{|{{style|class=wiki|max-width=410px|table=right|border=#e1e8ed}} | {|{{style|class=wiki|max-width=410px|table=right|border=#e1e8ed}} | ||
439번째 줄: | 511번째 줄: | ||
{{각주}}</pre>}} | {{각주}}</pre>}} | ||
|} | |||
=== [[칠성고]] === | === [[칠성고]] === | ||
{|width="100%" | |||
|- | |||
| | |||
{{나무접기2|id=chilsung-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | {{나무접기2|id=chilsung-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | ||
{|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #00beff;" | {|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #00beff;" | ||
489번째 줄: | 565번째 줄: | ||
{{각주}}</pre>}} | {{각주}}</pre>}} | ||
|} | |||
=== [[퇴귀야담]] === | |||
{|width="100%" | |||
|- | |- | ||
| | |||
{{나무접기2|id=xhlrnldieka-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | {{나무접기2|id=xhlrnldieka-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | ||
{|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #2a2a2a;" | {|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #2a2a2a;" | ||
581번째 줄: | 619번째 줄: | ||
{{각주}} | {{각주}} | ||
</pre>}} | </pre>}} | ||
|} | |||
=== [[무도학당]] === | === [[무도학당]] === | ||
{|width="100%" | |||
|- | |||
| | |||
{{나무접기2|id=mudohakdang-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | {{나무접기2|id=mudohakdang-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | ||
{|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #dcdcdc;" | {|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #dcdcdc;" | ||
636번째 줄: | 678번째 줄: | ||
{{각주}}</pre>}} | {{각주}}</pre>}} | ||
|} | |||
=== [[ | === [[뒤편]] === | ||
{|width="100%" | |||
|- | |||
| | |||
{{나무접기2|id=project-noir-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | {{나무접기2|id=project-noir-character-profile-table|title=[ 등장인물 ]|<pre style="user-select: all;">{{namucat}} | ||
{|class="wikitable" style="max-width: 400px; float: right; border: 2px solid black;" | {|class="wikitable" style="max-width: 400px; float: right; border: 2px solid black;" | ||
673번째 줄: | 719번째 줄: | ||
{{각주}}</pre>}} | {{각주}}</pre>}} | ||
|} | |||
{{각주}} | {{각주}} | ||
{{문서 가져옴|연습장:Kimchan|307254}} | {{문서 가져옴|연습장:Kimchan|307254}} |
2024년 4월 6일 (토) 22:19 기준 최신판
김찬 연습장 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
연습장 | ||||||||||||||||||||
메모 | 낙서 | 노트 | 연구 | 팁 | 공부 | 모듈 | ||||||||||||||
틀 | CSS | Lua |
유용한 사이트
- Color Picker online - 첨부한 이미지에서 색을 추출하여 헥스 코드를 알 수 있음.
- ChatGPT - 장난 같겠지만 얘한테 HTML CSS에 관해 물어 보면 어느 정도 참고할 수 있는 정보는 제공해 줌.
- 위키백과/미디어위키/리브레위키 - 같은 엔진과 문법을 쓰는 만큼 도움말에서 참고할 정보가 무지 많음.
- 나무위키 - 엔진과 문법은 다르지만 디자인 면에서 참고할 수 있음.
머찐 그라데이션
소장 가치가 이써요
문법 | 결과 |
---|---|
2022 연말시리즈
linear-gradient(172deg, #be2537 5%, #f03a43 40%, #f47b5d 73%, #fac78c 75%) |
|
2023 연말시리즈
linear-gradient(60deg, #ff9b00 16%, #fb0055 16%, #fb0055 22%, #fb0055 22%, #fb0055 25%, #880e4f 25%, #880e4f 50%, transparent 50%), linear-gradient(120deg, #880e4f 75%, #fb0055 75%, #fb0055 78%, #fb0055 78%, #fb0055 84%, #ff9b00 84%) |
|
나무위키 기르제아 문서 px 단위라 모바일에선 잘 안 보일 듯? repeating-linear-gradient(45deg, transparent, transparent 45px, #000 45px, #000 72.5px), repeating-linear-gradient(135deg, transparent, transparent 45px, #000 45px, #000 72.5px), linear-gradient(#5a5a5a, #5a5a5a) |
|
linear-gradient(0deg, rgba(255, 255, 255, 0.875), rgba(255, 255, 255, 0.875)), repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px ), linear-gradient(hsl(34, 53%, 82%), hsl(34, 53%, 82%)) |
|
radial-gradient(circle at 50% 50%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 0% 0%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 0% 100%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 100% 0%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), radial-gradient(circle at 100% 100%, #0c0b0ae0 calc(4px * 1), #fff0 calc(4px * 8)) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 90deg at 97.5% 67%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 90deg at 97.5% 67%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 270deg at 2.5% 33%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 270deg at 2.5% 33%, white 0 87.5deg, #fff0 88deg 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, white 0.5deg 90deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 116.5deg at 50% 85.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 120deg at 50% 83%, white 0 120deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -63.5deg at 50% 14.5%, #211e1e 0 127deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from -60deg at 50% 17%, white 0 120deg, #fff0 0 100%) 50% / calc(4px * 17.5) calc(4px * 29.5), conic-gradient(from 0deg at 50% 50%, #fff0 0 2deg, #1c1b18 2.5deg 57.5deg, #fff0 58deg 62.5deg, #211e1e 63deg 117.5deg, #fff0 118deg 122.5deg, #0c0b0a 123deg 177.5deg, #fff0 178deg 182deg, #1c1b18 182.5deg 237.5deg, #fff0 0 242.5deg, #211e1e 243deg 297.5deg, #fff0 298deg 302.5deg, #0c0b0a 303deg 357.5deg, #fff0 358deg 360deg) 50% / calc(4px * 17.5) calc(4px * 29.5), white |
색
색 | 헥스 코드 | 설명 |
---|---|---|
기본 색 | ||
#373a3c | 제이위키 기본 글자 색 → 예시 | |
#f5f8fa | 제이위키 테이블 헤더 기본 배경 색 | |
#e1e8ed | 제이위키 테이블 기본 테두리 색, 기본 수평줄 색 | |
#337ab7 | 제이위키 하이퍼링크 기본 색 → 예시 | |
#ba0000 | 제이위키 하이퍼링크(없는 문서) 기본 색 → 예시 | |
#33b733 | 제이위키 하이퍼링크(외부 링크) 기본 색 → 예시 | |
#ec9f19 | 제이위키 다크 모드 하이퍼링크 기본 색 → 예시 | |
#dc4343 | 제이위키 다크 모드 하이퍼링크(없는 문서) 기본 색 → 예시 | |
#333333 | 위키독 기본 글자 색 | |
#dcdcdc | 위키독 테이블 기본 테두리 색 | |
#bfbfbf | 위키독 기본 수평줄 색 | |
#373a3c | 나무위키 기본 글자 색 | |
#ec9f19 | 나무위키 다크모드 하이퍼링크 색 → 예시 | |
상징색 | ||
#ffc800 | 아이펠루스, 세이넬 아르젠베르크 상징색 | |
#0055fe | 제국 기사단 상징색 | |
#cdeef0 | 성기사단 상징색 | |
#ffda2f | 로셰리아교, 교황 등 상징색 | |
#00beff | 칠성고등학교 상징색 | |
#2a2a2a | 퇴귀야담 상징색 | |
#a600c4 | 추기경 상징색 (자주 쓰는 보라색) | |
#7f00ff | 인챈토레스트, 정령 상징색 | |
#cccc00 | 헤리스카룬 상징색 | |
#005000 | 알테어룸 상징색 | |
#a72c3e | 드래곤 상징색 | |
기타 | ||
#a600c4 | 자주 쓰는 보라색 (추기경 상징색) | |
#ff6600 | 자주 쓰는 주황색 |
HTML 색 이름
[ HTML 색 이름 ]
|
단위
1rem = 15px = 11.25pt
1px = 0.02645833cm
1em = 14.4px = 10.8pt
기본값
상 | 하 | 좌 | 우 | 요소 |
---|---|---|---|---|
margin | ||||
0.8rem | 0 | wikitable 표 | ||
12px | 0 | |||
0.5rem | 1.6rem | 0 | <ul> | |
0.3em | 0 | 3.2em | 0 | <ol> |
padding | ||||
0.3rem | 0.6rem | wikitable 표 칸 내부 | ||
4.5px | 9px | |||
font-size | ||||
0.96rem | 글씨 크기 | |||
14.4px | ||||
10.8pt |
특수문자
[ 유니코드 특수문자 ]
|
문법
- 유튜브
{|{{style|class=wiki|max-width=400px|border=색깔}} |- |<div style="margin: -0.3rem -0.6rem -9.5px;">{{Youtube|아이디|분류제외=분류제외}}</div> |- !{{style|bg=색깔|color=색깔}}|내용 |}
접기
- 관련 둘러보기 틀
{{나무위키 둘러보기|id=아이디|border=테두리|bg=배경색|제목색=제목색|제목=제목 |틀1=틀이름 |틀2=틀이름 … |틀20=틀이름}}
CSS
[ 모바일과 PC에서 서로 다른 코드 짜기 ] @media screen and (max-width: 768px) {
Mobile에서
}
@media screen and (min-width: 768px) {
PC에서
}
|
클래스 종류
- 테이블
- wikitable
가장 기본적인 형태의 테이블 레이아웃 - infobox
모서리를 둥글게 처리한 레이아웃
- wikitable
- div와 span
- mw-collapsible
미디어위키 기본 접기 - mw-customtoggle-클래스명
커스텀 접기 - mw-collapsed
접기를 기본적으로 접음 - toccolours
- mw-collapsible
템플릿
틀 문서
[ 펼치기 · 접기 ] {{namucat}} {{틀 도움}} == 틀 본문 == <onlyinclude><includeonly></includeonly></onlyinclude> == 설명 == == 사용법 == == 둘러보기 == {{김찬 제작 틀}} |
아이펠루스
[ 등장인물 ] {{namucat}} {|{{style|class=wiki|max-width=410px|table=right|border=#e1e8ed}} |- !colspan="2" style="background: #f5f8fa;"|{{c|black|인물이명<br>{{fontsize|14|인물이름}}<br>인물원어}} |- |colspan="2"|<div style="margin: -4.5px -9px;">[[파일:빈 이미지.png|1000px|link=]]</div> |- !style="width: 30%; background: #f5f8fa;"|{{c|black|이명}} |이명 |- !style="background: #f5f8fa;"|[[종족 (아이펠루스)|{{c|black|종족}}]] |종족 |- !style="background: #f5f8fa;"|{{c|black|성별}} |성별 |- !style="background: #f5f8fa;"|{{c|black|나이}} |나이 |- !style="background: #f5f8fa;"|{{c|black|신체}} |신체 |- !style="background: #f5f8fa;"|{{c|black|출신}} |출신 |- !style="background: #f5f8fa;"|{{c|black|소속}} |소속 |- !style="background: #f5f8fa;"|{{c|black|직책}} |직책 |- !style="background: #f5f8fa;"|{{c|black|비고}} |비고 |} {{목차}} == 개요 == {{스탯 |정렬= |색깔= |글자색= |체력= |정신력= |면역력= |공격력= |방어력= |근력= |순발력= |무력= |마력= |성력= |지력= |테두리=테두리 |비고=}} == 상세 == == 인간 관계 == == 전투력 == == 기타 == {{각주}} |
칠성고
[ 등장인물 ] {{namucat}} {|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #00beff;" |- !colspan="2" style="background: #00beff;"|{{c|white|{{fontsize|14|인물이름한글}}<br>영문명or한문명}} |- |colspan="2"|<div style="margin: -4.5px -9px;">[[파일:빈 이미지.png|1000px|link=]]</div> |- !style="width: 30%; background: #00beff;"|{{c|white|본명}} |본명 |- !style="width: 30%; background: #00beff;"|{{c|white|다른 이름}} |다른이름 |- !style="background: #00beff;"|{{c|white|나이}} |나이 |- !style="background: #00beff;"|{{c|white|성별}} |성별 |- !style="background: #00beff;"|{{c|white|신체}} |신체 |- !style="background: #00beff;"|{{c|white|능력}} |능력 |- !style="background: #00beff;"|{{c|white|소속}} |소속 |- !style="background: #00beff;"|{{c|white|직책}} |직책 |- !style="background: #00beff;"|{{c|white|관련 인물}} |관련인물 |} {{목차}} == 개요 == == 상세 == == 작중 행적 == == 인간 관계 == == 능력 == == 기타 == {{각주}} |
퇴귀야담
[ 등장인물 ] {{namucat}} {|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #2a2a2a;" |- !colspan="2" style="background: #2a2a2a;"|{{c|white|{{fontsize|14|인물이름한글}}<br>영문명or한문명}} |- |colspan="2"|<div style="margin: -4.5px -9px;">[[파일명|1000px|link=]]</div> |- !style="width: 30%; background: #2a2a2a;"|{{c|white|종족}} |종족 |- !style="background: #2a2a2a;"|{{c|white|성별}} |성별 |- !style="background: #2a2a2a;"|{{c|white|연령}} |연령 |- !style="background: #2a2a2a;"|{{c|white|신체}} |신체 |- !style="background: #2a2a2a;"|{{c|white|조직}} |조직 |- !style="background: #2a2a2a;"|{{c|white|계급}} |계급 |- !style="background: #2a2a2a;"|{{c|white|술법}} |술법 |- !style="background: #2a2a2a;"|{{c|white|관련 인물}} |관련인물 |} {{목차}} == 개요 == == 상세 == == 작중 행적 == == 인간 관계 == == 능력 == === 전투력 === === 술법 === == 기타 == {{각주}} |
무도학당
[ 등장인물 ] {{namucat}} {|class="wikitable" style="max-width: 410px; float: right; border: 2px solid #dcdcdc;" |- !colspan="2" style="background: #c0c0c0;"|{{c|black|전직}} |- !colspan="2" style="background: #dcdcdc;"|{{c|black|현직}} |- |colspan="2"|<div style="margin: -4.5px -9px;">[[파일명|1000px|link=]]</div> |- !colspan="2" style="background: white;"|{{c|black|{{fontsize|14|이름한글}}<br>영문명과한문명}} |- !rowspan="2" style="background: #dcdcdc;"|{{c|black|출생}} |연도와 날짜 (나이) |- |지역 |- !style="background: #dcdcdc;"|{{c|black|국적}} |국적 |- !style="background: #dcdcdc;"|{{c|black|성별}} |성별 |- !style="background: #dcdcdc;"|{{c|black|신체}} |신체 |- !style="background: #dcdcdc;"|{{c|black|출신}} |출신 |- !style="background: #dcdcdc;"|{{c|black|소속}} |소속 |- !style="background: #dcdcdc;"|{{c|black|직책}} |직책 |- !style="background: #dcdcdc;"|{{c|black|속성}} |속성 |} {{목차}} == 개요 == == 상세 == == 작중 행적 == == 인간 관계 == == 평가 == == 강함 == == 기타 == {{각주}} |
뒤편
[ 등장인물 ] {{namucat}} {|class="wikitable" style="max-width: 400px; float: right; border: 2px solid black;" |- !colspan="2" style="background-color: black;"|{{c|white|{{fontsize|14|인물이름}}<br>인물원어이름}} |- |colspan="2"|<div style="margin: -4.5px -9px;">[[파일:빈 이미지.png|1000px|link=]]</div> |- !style="width: 30%; background: black;"|{{c|white|이름}} |이름 |- !style="background: black;"|{{c|white|나이}} |나이 |- !style="background: black;"|{{c|white|성별}} |성별 |- !style="background: black;"|{{c|white|국적}} |{{국기|국가이름}} |- !style="background: black;"|{{c|white|신체}} |신체 |- !style="background: black;"|{{c|white|소속}} |소속 |- !style="background: black;"|{{c|white|직업}} |직업 |- !style="background: black;"|{{c|white|비고}} |비고 |} {{목차}} == 개요 == {{각주}} |