김찬 연습장 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
연습장 | ||||||||||||||||||||
메모 | 낙서 | 노트 | 연구 | 팁 | 공부 | 모듈 | ||||||||||||||
틀 | 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|비고}} |비고 |} {{목차}} == 개요 == {{각주}} |