이 샌드박스는 더이상 사용하실 수 없습니다.
후속 샌드박스로 이전해주시기 바랍니다.
샌드박스 2호기
샌드박스 3호기
새로운 샌드박스에 초안 페이지를 생성한 뒤, 이 페이지의 설정 → 페이지 소스에서 내용을 복사해 옮겨붙이시면 됩니다.
이전에 어려움이 있다면 포럼이나 대화방에서 운영진에게 문의하세요.
GO DOWN THE RABBIT HOLEC S S…
이것으로 간단한 CSS 테마를 만들 수 있습니다. 만약 더 많은 위키닷 마술을 배우고 싶다면, 아래 문서들을 읽어보세요.
- advanced-formatting-and-you
— by DrMagnus - scp-style-resource
— by Shaggydredlocks - ListPages 마술과 당신
— by Croquembouche
— by Rounderhouse - wiki-syntax
— by ghostchibi
-
정보
CSS 테마 제작 도구
원작: http://www.scpwiki.com/css-theme-preparation-tool
저자: 7happy7
역자: DeNEV does not match any existing user name
Special thanks: Boyu12, C-take, Dr Devan, Etinjat, MrPines, Nanimono Demonai, physicslike, Sekai_s, shu_yabiyabi, Zyn
이 도구는 자신의 문서에서 테마를 바꾸고 싶은 사람들을 위해 만들어졌습니다. 사용해보고 싶나요? 한번 해 보죠!
쓰고 싶은 색상을 생성하세요.
- » 색상 선택기 & 미리보기
"색상 선택기 & 미리보기"는 테마의 기본 색상을 준비해줍니다.
아래의 순서를 따라 해주세요.
"SCP 재단"인 사이트 제목 바꾸기
» 헤더 » 가짜 제목 » 제목 (div#header h1 a:before)
주석: 제목 항목을 사용하지 않으면 "color"와 "text-shadow"도 작동하지 않게 됩니다.
"확보, 격리, 보호"인 사이트 부제 바꾸기
» 헤더 » 가짜 제목 » 부제 (div#header h2 span:before)
주석: 제목 항목을 사용하지 않으면 "color"와 "text-shadow"도 작동하지 않게 됩니다.
헤더 로고 바꾸기
» 헤더 » 로고 (div#header)
헤더 배경 바꾸기
» 헤더 » div#container-wrap
링크 색상 바꾸기
» 기본 옵션 » a (링크) 색상
글자 색상 바꾸기
» 기본 옵션 » 본문body » text color
표준 배경 색 바꾸기
» 기본 옵션 » 본문body » background
제목 요소 색상 바꾸기
» 기본 옵션 » 제목 요소 » color
주석: 선택한 색상은 "h1 한정", 혹은 "전부"(h1, h2, h3, h4, h5, h6) 적용할 수 있습니다.
표준 글꼴 바꾸기
- : » 기본 옵션 » 글꼴 » @import (한국어 글꼴 허브/Google font)
- : » 기본 옵션 » 본문body » font-family
1. Go to https://fonts.google.com/.
2. Select your font.
3. Copy "@import url('https://fonts.googleapis.com/css?family=XXXXX');" and paste it into "α".
4. Copy "'<YOUR FONT>', <BASIC FONT KEYWORDS>1" and paste it into "β".
제목 요소의 글꼴 바꾸기
사이드바 색상 바꾸기
» 사이드바 » div.side-block » background
사이드바 헤더 색상 바꾸기
» 사이드바 » div.side-block » color (div.side-block div.heading)
모바일 사이드바 버튼 색상 바꾸기
» 사이드바 » open-menu » color
탭 배경 색상 바꾸기
» 탭 » div.yui-content » background
탭 선택기 색상 바꾸기
» 탭 » 일반 선택기
» 탭 » 호버 선택기
» 탭 » 활성 선택기
인터위키 색상 적용하기
» 인터위키 » div.scpnet-interwiki-wrapper » filter
Note: 더 많은 정보가 필요하다면 " 팁 4: 인터위키 필터" 탭을 읽어보세요.
평가 모듈 색상 바꾸기
» 평가 모듈 » background
» 평가 모듈 » color
text-shadow
<offset-x>, <offset-y>: Required. These length values specify the shadow's distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius>.
<length>2
<blur-radius>: Optional. This is a length value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.
<length>2
<color>: Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.
<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>3 | currentcolor | <deprecated-system-color>
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y*/
/* Use defaults for color and blur-radius */text-shadow: 5px 10px;
text-shadow - CSS: Cascading Style Sheets | MDN
by Mozilla 기여자들
CC-BY-SA 2.5
box-shadow
이 속성은 <inset> 키워드가 있다는 점만 제외하면 "text-shadow"와 같은 것입니다.
<inset>: 값을 지정하지 않으면(기본값) 요소가 공중에 떠있는 것처럼 밖에 드리우는 그림자가 됩니다.
inset 키워드가 존재하면 요소가 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려집니다.inset
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow - CSS: Cascading Style Sheets | MDN
by Mozilla 기여자들
CC-BY-SA 2.5
border테두리
<width>: 테두리의 굵기로 기본값은 medium입니다.
<length>2 | thin | medium | thick
<style>: 테두리의 스타일로 기본값은 none입니다.
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color>: 테두리의 색상으로 기본값은 currentcolor입니다.
<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>3 | currentcolor | <deprecated-system-color>
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
border - CSS: Cascading Style Sheets | MDN
by Mozilla 기여자들
CC-BY-SA 2.5
H | S | V |
---|---|---|
355deg | 100% | 73% |
hue-rotate | saturate | / |
0deg | 0% | 100% |
/ | / | brightness |
… | ||
… | ||
filter: | hue-rotate(0deg) saturate(100%) — |
a
주석 1: You can calculate only rough values by using the above tool.
주석 2: If the side-block color is not monotone(#ffffff, #DCDCDC, etc.), this method will not function well like "Third Law Theme"(#E2E4E7).
주석 3: hue-rotate(-70deg) = hue-rotate(290deg)
Basics
기본 색상 (시그마-9) by Aelanna |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #bb0011 | 355deg | 100% | 73% |
0deg | / | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: |
hue-rotate(360deg) — |
기본 색상 (시그마-9) by Aelanna |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #bb0011 | 355deg | 100% | 73% |
0deg | / | / | ||
侧边栏背景 | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
滤镜: | 色调偏移(360deg) — — — |
기본 색상 (시그마-9) by Aelanna |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #bb0011 | 355deg | 100% | 73% |
0deg | / | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: | hue-rotate(360deg) — — — |
MC&D 테마 by Randomini |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #6C4279 | 285deg | 45% | 47% |
-70deg | 45% | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: |
hue-rotate(290deg) — |
MC&D 테마 by Randomini |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #6C4279 | 285deg | 45% | 47% |
-70deg | / | / | ||
侧边栏背景 | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
滤镜: | 色调偏移(290deg) — 饱和度(45%) — |
MC&D 테마 by Randomini |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #6C4279 | 285deg | 45% | 47% |
-70deg | / | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: | hue-rotate(290deg) — saturate(45%) — |
뱀의 손 테마 by ZeroStrider, Salamander724 |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #059400 | 117deg | 100% | 58% |
-238deg | / | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: |
hue-rotate(122deg) — |
뱀의 손 테마 by ZeroStrider, Salamander724 |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #059400 | 117deg | 100% | 58% |
-238deg | / | / | ||
侧边栏背景 | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
滤镜: | 色调偏移(122deg) — — — |
뱀의 손 테마 by ZeroStrider, Salamander724 |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #059400 | 117deg | 100% | 58% |
-238deg | / | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: | hue-rotate(122deg) — — — |
제3법칙 테마 by GreenWolf, Randomini |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #4682B4 | 207deg | 61% | 70% |
-148deg | 61% | / | ||
side-bg | #E2E4E7 | 216deg | 2% | 90% |
/ | / | 90% | ||
filter: |
hue-rotate(212deg) — |
제3법칙 테마 by GreenWolf, Randomini |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #4682B4 | 207deg | 61% | 70% |
-148deg | / | / | ||
侧边栏背景 | #E2E4E7 | 216deg | 2% | 90% |
/ | / | 90% | ||
滤镜: | 色调偏移(212deg) — 饱和度(61%) 亮度(90%) |
제3법칙 테마 by GreenWolf, Randomini |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #4682B4 | 207deg | 61% | 70% |
-148deg | / | / | ||
side-bg | #E2E4E7 | 216deg | 2% | 90% |
/ | / | 90% | ||
filter: | hue-rotate(212deg) — saturate(61%) brightness(90%) |
SPC 테마 by PeppersGhost |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #0c499c | 214deg | 92% | 61% |
-141deg | 92% | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: |
hue-rotate(219deg) — |
SPC 테마 by PeppersGhost |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #0c499c | 214deg | 92% | 61% |
-141deg | / | / | ||
侧边栏背景 | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
滤镜: | 色调偏移(219deg) — 饱和度(92%) — |
SPC 테마 by PeppersGhost |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #0c499c | 214deg | 92% | 61% |
-141deg | / | / | ||
side-bg | #ffffff | 0deg | 0% | 100% |
/ | / | 100% | ||
filter: | hue-rotate(219deg) — saturate(92%) — |
암체 테마 by djkaktus |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #2F4F4F | 180deg | 40% | 30% |
-175deg | 40% | / | ||
side-bg | #DCDCDC | 0deg | 0% | 86% |
/ | / | 86% | ||
filter: |
hue-rotate(185deg) — |
암체 테마 by djkaktus |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #2F4F4F | 180deg | 40% | 30% |
-175deg | / | / | ||
侧边栏背景 | #DCDCDC | 0deg | 0% | 86% |
/ | / | 86% | ||
滤镜: | 色调偏移(185deg) — 饱和度(40%) 亮度(86%) |
암체 테마 by djkaktus |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #2F4F4F | 180deg | 40% | 30% |
-175deg | / | / | ||
side-bg | #DCDCDC | 0deg | 0% | 86% |
/ | / | 86% | ||
filter: | hue-rotate(185deg) — saturate(40%) brightness(86%) |
형이초학부 테마 by Lt Flops, TSATPWTCOTTTADC, Woedenaz |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #5b2f8e | 268deg | 67% | 56% |
-87deg | 67% | / | ||
side-bg | #f3f3f3 | 0deg | 0% | 95% |
/ | / | 95% | ||
filter: |
hue-rotate(273deg) — |
형이초학부 테마 by Lt Flops, TSATPWTCOTTTADC, Woedenaz |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #5b2f8e | 268deg | 67% | 56% |
-87deg | / | / | ||
侧边栏背景 | #f3f3f3 | 0deg | 0% | 95% |
/ | / | 95% | ||
滤镜: | 色调偏移(273deg) — 饱和度(67%) 亮度(95%) |
형이초학부 테마 by Lt Flops, TSATPWTCOTTTADC, Woedenaz |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #5b2f8e | 268deg | 67% | 56% |
-87deg | / | / | ||
side-bg | #f3f3f3 | 0deg | 0% | 95% |
/ | / | 95% | ||
filter: | hue-rotate(273deg) — saturate(67%) brightness(95%) |
사피르 테마 by stormbreath |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #151a61 | 236deg | 78% | 38% |
-119deg | 78% | / | ||
side-bg | #e5e5e5 | 0deg | 0% | 90% |
/ | / | 90% | ||
filter: |
hue-rotate(241deg) — |
사피르 테마 by stormbreath |
||||
---|---|---|---|---|
颜色代码 | H | S | V | |
链接 | #151a61 | 236deg | 78% | 38% |
-119deg | / | / | ||
侧边栏背景 | #e5e5e5 | 0deg | 0% | 90% |
/ | / | 90% | ||
滤镜: | 色调偏移(241deg) — 饱和度(78%) 亮度(90%) |
사피르 테마 by stormbreath |
||||
---|---|---|---|---|
カラーコード | H | S | V | |
リンク | #151a61 | 236deg | 78% | 38% |
-119deg | / | / | ||
side-bg | #e5e5e5 | 0deg | 0% | 90% |
/ | / | 90% | ||
filter: | hue-rotate(241deg) — saturate(78%) brightness(90%) |
Exception
끝은 이렇게 온다 테마 by djkaktus |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #e80e0e | 0deg | 93% | 90% |
-5deg | 93% | / | ||
side-bg | #161616 | 0deg | 0% | 8% |
/ | / | 8% | ||
filter: | invert(92%)4 hue-rotate(189deg)5 saturate(1200%) |
이자메아 테마 by Dr Solo |
||||
---|---|---|---|---|
color code | H | S | V | |
Link | #000000 | 0deg | 0% | 0% |
/ | / | / | ||
side-bg | #FFFFFF | 0deg | 0% | 100% |
/ | / | / | ||
filter: | grayscale(100%) drop-shadow(0 1px 1px #000000) |