뉴스

위키닷 구문

최근 수정 시각:

1. 개요2. 자주 사용되는 기본 구문
2.1. 접기 블록2.2. 글자 색
3. div 구문
3.1. 재단 로고가 뒤에 깔린 텍스트 박스3.2. 투명한 이미지가 뒤에 깔린 div
4. include 구문
4.1. ACS4.2. 테마 적용4.3. 인포창4.4. 캡션이 딸린 이미지 박스4.5. 등급분류 꾸미기 Ver2.0
5. module 구문
5.1. 폰트 수정5.2. 가짜 타이틀5.3. 깔끔한 면담기록5.4. 이메일5.5. 항밈 처리
6. 기타 구문 및 기능 사용법
6.1. offset 구문6.2. 엑조디아 하는 법6.3. CSS 만지는 법
6.3.1. 모바일 화면 확인 및 기타 소스 확인 법


1. 개요 [편집]

기본적인 것은 위키 구문빠른 참조, SCP 서식 틀 참조.
조건
  • 짧고 기본적인 것들은 위 링크를 참조하면 되므로 여기엔 구문이 길거나 따로 명시되지 않은 구문만 등재
  • 이왕이면 이 구문이 사용된 작품도 함께 명시
  • 코드의 앞 뒤를 중괄호 세개로 묶어주면 됨. 줄바꿈도 상관 없음. {{{ [코드] }}}

채널 팁글

CSS 참고하기 좋은 사이트:
  • MDN Web Docs: HTML, CSS, Javascript의 여러 태그, 속성, 키워드 등에 대한 정보를 모아놓은 사이트. 웹 디자인의 바이블.
  • Liveweave: HTML, CSS, Javascript 이 셋을 적으면 실시간으로 출력해서 보여주는 사이트.

2. 자주 사용되는 기본 구문 [편집]

[[명령어 속성="속성값 텍스트"]]로 열고 [[/명령어]]로 닫는 형식으로 되어 있음.
속성을 정의해 주면 그 속성이 적용된다.

2.1. 접기 블록 [편집]

[[collapsible show="+ 보이기" hide="- 숨기기"]]
보이기/숨기기 하려는 텍스트.
[[/collapsible]]

효과: 클릭하면 접힌 글이 나타난다. 다시 클릭하면 도로 접힌다.
속성: folded="no"를 추가시키면 기본으로 펼쳐진 상태가 됨.

블록 접기 문서에 추가적으로 부여할 수 있는 속성이 있다.

다만 '보이기/숨기기 하려는 텍스트' 전후의 구문 열기([[collapsible]])와 구문 닫기([[/collapsible]])가 같은 줄에 있으면 작동하지 않음.

2.2. 글자 색 [편집]

##000000|이러쿵저러쿵##

이렇게 간단히 바꿀 수 있다. 위 예시는 검은색(HEX코드 000000)으로 나온다.
HEX코드를 수정하면 원하는 색을 넣을 수 있다.

3. div 구문 [편집]

[[div 속성="속성값 텍스트"]] ~ 내용 ~ [[/div]] 형식으로 되어 있음.
다만 내용 전후의 구문 열기([[div]])와 구문 닫기([[/div]])가 같은 줄에 있으면 작동하지 않음.

3.1. 재단 로고가 뒤에 깔린 텍스트 박스 [편집]

[[div style="background: url(https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png) center no-repeat ; float: center; border: solid 2px #000000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
이러쿵저러쿵
[[/div]]

예시:
SCP-775-KO 상상하지 마시오

3.2. 투명한 이미지가 뒤에 깔린 div [편집]


[[div style="background:url("이미지 주소를 여기에 넣으세요") top right no-repeat; background-blend-mode: soft-light; background-color: #ffffffde; background-blend-mode:soft-light; border: solid 2px #000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
이러쿵저러쿵
[[/div]]


어떤 이미지든 투명하게 만들수 있어서 편리하다.

4. include 구문 [편집]

참고
다른 페이지의 구성 요소를 가져오는 것이다. 미리 누군가 HTML과 CSS를 이용해서 열심히 만든 요소를 어떤 페이지에 넣어두고 사용자는 그것을 간단히 불러와 적용시키는 것.
[[include component:이러쿵-저러쿵
코드들
]]

의 형식이 되는데, componenet: 앞에 위키를 명시해준다면 (한위키 내 소스의 경우 :scpko:, 본사 소스의 경우 :scp-wiki:) 사이트 상관 없이 사용 가능하다.

4.1. ACS [편집]

여기에 자세한 설명과 구문 사용법 링크가 있다.
[[include :scpko:component:anomaly-class-bar-source
|item-number= XXXX
|clearance= #
|container-class= 유클리드
|secondary-class= none
|secondary-icon= https://URL넣기.com
|disruption-class= 플람
|risk-class= 경고
]]


하이브리드라고, 심미적으로 덜 난잡한 형태의 ACS를 적용하는 방법은 아래와 같다.
[[include :scpko:component:acs-hybrid-text-bar-source
|version= 텍스트/하이브리드
|item-number= ####
|clearance-level= #
|containment-class= 유클리드
|include-secondary= yes/no
|secondary-class= 아폴리온
|secondary-icon= https://URL넣기.com
|disruption-class= 플람
|risk-class= 주목
]]


ACS를 입맞에 맞게 바꾸고 싶다면 이곳을 참조하라.
아이콘, 텍스트, 폰트, 추가 등급란 등 많은 것을 커스텀 할 수 있다.

ACS를 움직이게 하고 싶다면 아래 코드를 넣으면 된다.
[[include :scpko:component:acs-animation]]

예시:
SCP-935-KO 안개 낀 도시는 저편으로

4.2. 테마 적용 [편집]

본사 위키에 올라온 테마는 시그마-9 계열 테마 목록이나 블랙 하이라이터 계열 테마 목록에서 둘러볼 수 있다.
한위키나 다른 지부에서 만들어진 것까지 포함한 목록은 여기이다.

원하는 테마의 페이지에 들어가면 적용 방법이 나와있다.
(블랙 하이라이터 테마의 경우)
[[include :scp-wiki:theme:black-highlighter-theme]]

4.3. 인포창 [편집]

[[include info:start]]
여기에 텍스트 입력
[[include info:end]]

효과: 평가 모듈 옆에 'i' 버튼이 생기며 거기에 작품에 관한 정보를 입력할 수 있게 된다.
예시:
SCP-173

4.4. 캡션이 딸린 이미지 박스 [편집]

[[include component:image-block name=파일명.png|caption=이미지 설명]]

SCP-173에서도 찾아 볼 수 있는 설명이 딸린 이미지 박스이다.

4.5. 등급분류 꾸미기 Ver2.0 [편집]


[[include :scpko:component:cd-ver2
|lv=
|item=
|class=
|site-responsible=
|director=
|research-head=
|assigned-task-force= 
]]


여기 들어가면 만들수 있는 구문. ACS는 싫지만 등급은 멋지게 보이고 싶다면 이걸 사용해보자.

5. module 구문 [편집]

[[module css]] 부터 [[/module]]까지의 구문을 페이지 맨 위에 넣어둔 뒤 해당 구문이 필요한 때에 div 구문을 넣으면 된다.
module에 서식을 정의하고 div에서 그 서식을 가져오는 식이기 때문.

5.1. 폰트 수정 [편집]

한국어 글꼴 허브에 자세한 설명과 사용가능한 다양한 폰트 목록들이 나와 있다.

배달의 민족 도현체를 쓰고 싶다면
[[module CSS]]
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');
[[/module]]
 
[[span style="font-family: 'Do Hyeon' ;font-size: 18px;"]]
이러쿵저러쿵
[[/span]]

이렇게 폰트를 먼저 임포트 해준뒤 span 구문 내에 넣어주면 된다.

5.2. 가짜 타이틀 [편집]

[[module css]]
.footnotes-footer {
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
    display:none;
}
#page-title {
    display: none;
}
.meta-title {
    border-bottom: solid 1px #bbbbbb;
    color: #990011;
    font-weight: normal;
    margin: 0 0 0.6em;
    padding: 0 0 0.25em;
    font-size: 200%;
}
.meta-title p {
    margin: 0;
}
[[/module]]

[[div class="meta-title"]]
**여기에 제목을 입력**
[[/div]]


효과: 페이지 상단에 가짜 제목을 달 수 있음.

예시:
SCP-6974-KO-J 변태를 보면 짖는 개

5.3. 깔끔한 면담기록 [편집]

[[module CSS]]
.scp-foundation-1 {
    border: solid 2px #000;
    background-color: #fff;
    padding-top: 1em;
    padding-right: 2em;
    padding-left: 2em;
    padding-bottom: 1em;
    color: #000000;
}

.scp-foundation-2 {
    border-left: solid 3px #000;
    border-right: solid 3px #000;
    background-color: #fff;
    padding-top: 0em;
    padding-right: 1em;
    padding-left: 15px;
    padding-bottom: 0em;
    color: #000000;
}
[[/module]]

[[div class="scp-foundation-1"]]
[[=]]
++ **(제목)**
[[/=]]
-----
**면담자:**
**피면담자:**
[[div class="scp-foundation-2"]]
(내용)
[[/div]]
**주석:**
-----
[[table style="margin: auto; border-collapse:collapse; width: 100%"]]
[[row]]
[[cell style="text-align: left; border: 0px solid; padding: 0 20px 0;"]]
[[image https://scpko.wdfiles.com/local--files/scp-097-ko/SCP-Logo-small-thick.png width="15px"]]
[[/cell]]
[[cell style="text-align: right; border: 0px solid; padding: 0 20px 0;"]]
(문서 제목) | (쪽수)p
[[/cell]]
[[/row]]
[[/table]]
[[/div]]



5.4. 이메일 [편집]

[[module]]
.email {
    background: url(https://scp-wiki.wdfiles.com/local--files/the-great-hippo/SCP_icon%281%29.png) top right no-repeat;
    border: solid 3px #444444;
    width: 85%; padding: 1px 15px;
    margin: auto; margin-top: 10px;
    margin-bottom: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #999 #901 #901 #999;
}

.tofrom {
    margin-left: 0.625rem;
    margin-top: 0.312rem;
    padding: 0 1em;
    border-left: 3px solid;
    border-radius: 4px;
    border-color: #901;
}

.tofrom strong {
    color: #901;
}
[[/module]]


[[div class="email"]]
[[div class="tofrom"]]
**발신자:** ##red|@@##
**수신자:** ##red|@@##
**발신일:** 2000.00.00 00:00
**제목:** 
[[/div]]
-----
내용
----
[[>]]
발신인 이름
[[/>]]
[[/div]]

예시: SCP-788-KO

5.5. 항밈 처리 [편집]


[[module CSS]]
.antimeme {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}
[[/module]]


[[span class="antimeme"]]단어[[/span]]


단어를 흐릿하게 만들어준다.

6. 기타 구문 및 기능 사용법 [편집]

6.1. offset 구문 [편집]


6.2. 엑조디아 하는 법 [편집]

페이지의 맨 아래 "+ 설정" 버튼을 클릭 한 뒤 "페이지 소스"를 클릭하면 각 작품이 어떤 소스로 이루어져 있는지 모두 알 수 있다. 자신이 원하는 서식이 있고, 그 서식이 사용된 작품을 알고 있다면 얼마든지 긁어올 수 있다.
테마의 소스도 긁어 올 수 있는데, 인클루드 구문이 가리키는 링크로 들어가면 해당 테마의 메인 페이지로 넘어간다. 그곳에서 이 테마가 어떤 소스로 만들어졌는지를 알 수 있다. 역시 이것 또한 엑조디아가 가능하다.

예를 들어 SCP-4746 죽도록 표시됨에서 사용된 기술(마우스를 올리면 텍스트가 변한다)을 긁어오려면, 해당 구문이 사용된 파트의 소스를 찾아보면 된다.
[[span class="hover2"]][[span]]**데이비스 박사:** 좋은 아침입니다, A███. 예정된 면담 시간입니다.[[/span]]**데이비스 박사:** 너는 모든 수단을 동원해 제거되어야 한다.[[/span]]

이 파트를 컨트롤 CV 해오자. 뭔가 제대로 안되는게 있을 것이다. class="hover2"가 정의되지 않았기 때문. 이건 맨 위의 [[module]] 구문에서 정의된 속성이기 때문에 작동이 안되는 것이다. 그렇다면, 모듈 구문 내의 모든 코드를 긁어서 맨 위에 붙여넣기 해야 제대로 구현이 될 것이다. 하지만 우리가 hover2의 클래스만 쓴다고 하면
[[module CSS]]
@keyframes fade-in {
    0% {opacity: 0;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

/* Credit to Nanimono Demonai for the mouseover blackbox format, found here:
https://scp-wiki.wikidot.com/scp-style-resource#toc10 */

.dblock {background: white; color: white; transition: 1s;}
.dblock:hover {color: #333; transition: 1.5s;}

/* Credit to James Kanjo for the inline hover tip CSS I butchered, found here:
http://community.wikidot.com/howto:inline-hover-tips */

/* The three different hover classes defined below are for three different background colors: the main text (white), the interview log (#f5f5f5) and the image caption (#eee). */

.hover2 {color: #333; transition: 1s;}
.hover2:hover {color: #f5f5f5; transition: 1s;}
.hover2 span {display: none;}
.hover2:hover span {position: absolute; display: inline; background-color: transparent; color: #333; animation: fade-in 1s; width: 80%;}
.hover2:hover span span {position: relative;}
[[/module]]

이렇게 hover1, hover3를 정의해주는 코드들을 생략이 가능하다.

6.3. CSS 만지는 법 [편집]

엑조디아를 기본으로 이것저것 속성을 변경시켜 만져보면 된다.
div 구문 옆의 style에 어떤 속성이 들어가는지 살펴보고 그것을 만지면 된다. 각 속성은 세미콜론(;)으로 구분된다.
각각의 속성이 어떤 역할을 하고 어떻게 만질 수 있는지는 모질라 디벨로퍼 사이트에서 확인이 가능하다.

예시로 위에서 언급한 재단 배경이 들어간 상자를 보자.
[[div style="background: url(https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png) center no-repeat ; float: center; border: solid 2px #000000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
이러쿵저러쿵
[[/div]]


div 구문의 style에 어떤 속성이 들어있는지 보자.
background: url(https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png) center no-repeat ; float: center; border: solid 2px #000000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
즉, background, float, border, padding, box-shadow 속성이 할당되어 있다.
각 속성에 어떤 설정이 할당되어있는지 padding 속성만 살펴보도록 하자. 위의 모질라 디벨로퍼 사이트에 padding을 검색하면 padding이 안쪽 여백의 크기를 결정하는 속성이라는 것을 알 수 있다. 1px 15px로 설정되어 있고, 사이트의 설명에 따르면 각각 세로 방향과 가로방향의 여백을 정하는 것을 알 수 있다. 사이트에 있는 예시들도 우리가 직접 값을 수정이 가능하니 써보면 바로 이해가 될 것이다.
그리고 이제 자신이 원하는 만큼 여백을 수정해줄 수 있다.

비슷한 방법으로 자신이 원하는 서식을 얼마든지 커스텀 할 수 있다.

6.3.1. 모바일 화면 확인 및 기타 소스 확인 법 [편집]

F12를 누르면 오른쪽에 코드 덩어리의 이상한 창이 뜬다. 그게 바로 현재 창의 html과 CSS코드들이 모두 나와있는 창이다. 어떤 사이트든 이렇게 html과 CSS를 긁어올 수 있다.
오른쪽 창 맨 위에 휴대폰과 태블릿이 겹쳐있는 버튼(장치 에뮬레이션 토글)을 누르고 차원을 적당한 휴대폰 화면으로 설정해 두면 이 페이지가 휴대폰에서 어떻게 보이는지 알 수 있다.