테스트:wiki문법(r58 판)

[주의!] 문서의 이전 버전(2026-02-13 12:16:04에 수정)을 보고 있습니다. 최신 버전으로 이동

분류

1. 개요[편집]

{{{#!wiki style=""
}}}

wiki 구문을 비롯한 style 부여 테스트.
나무위키 문법 도움말을 참고할 수 있다.

몇몇 테스트는 RAW(원문) 참조.
텍스트 등 양식(style)을 설정하고 출력할 범위를 지정하는 구문(문법).
기본적으로 개행을 하면 깨지는 문제가 있어 속에 나무마크 구문(문법)을 이용한 출력을 내기 곤란한 구문[1][2]
에 집어넣어줄 수 있다.

2. wiki 문법[편집]

2.1. 빈 공간[편집]

그냥 {{{#!wiki 만 넣어도 동작된다. 별도 설정한 양식이 없는 구문인데, 기본값(default)에 따른 출력으로 나오는 모양이다.

무난하게 출력된다.

2.2. style[편집]

style="" 그리고 콜론(:)[3], 스페이스바[4], 세미콜론(;)[5] 등 기호를 잘 입력해야 한다.

style에 아무 것도 입력하지 않아도 (default) 출력할 수 있다.

종류 이름 또는 설정값을 잘못 입력할 경우 없는 설정값(깨진 설정값)으로 인식하여 출력된다.

가령 display:none을 입력해야 하는데, nope나 no 등으로 잘못 입력하면 입력하지 않은 것으로 읽어서 출력된다.

다시 말해서 정의되는 양식이름을 입력하고 양식에 따라 정의되는 설정값을 입력 양식에 맞게 입력해야 컴퓨터가 읽을 수 있으면서 편집자가 설정하고 싶은 양식으로 나오게 된다.

style="" 안에 매개변수와 그 값을 부여하는 표시(@매개변수=@)를 집어넣고 저장한 문서를 include로 호출할 때 style="" 안에 넣었던 매개변수에 값을 주고 호출하게 되면 style 안에 매개변수를 넣었던 특정 단락이 깨져서 그 특정 단락에 대한 설정이 적용되지 않게 되었다. 이런 트릭을 넣고 생성된 틀이 많이 있었다.

wiki의 style안에는 CSS를 집어넣는다. 종류에 따라 먼저 기입한 순서대로 처리되는데, 같은 요소를 입력할 때 display 처럼 설정값에 따라 결과가 번복될 수 있는 요소가 있는가 하면 radial-gradient 처럼 나오는 결과를 중첩시키는 요소가 있다.

2.3. if 문법과 연동[편집]

if값에 따라 나오는 변수가 출력되는데, wiki 안에 들어갈 내용까지 반영되므로 입력할 수 있는 글자를 ~~AutoCAD~~ 단축키 입력하듯이[6] 줄여 입력할 수 있다. 다만, @ 기호는 열고 닫기가 없기 때문에 @를 잘 열고 잘 닫아줘야 한다.

이를테면 if 문법으로 {{{#!if this.di="display: inline;"를 먼저 정의하면 뒤에 wiki 문법을 쓸 때 {{{#!wiki style="display: inline;" 을 입력하는 대신 {{{#! wiki style="@di@" 만 입력해도 {{{#!wiki style="display: inline;을 쓴 것과 같게 나온다. 아예 앞의 style=" 부분도 {{{#!if this.sty="style=\"" 처럼 정의한 다음 {{{#! wiki @sty@@di@"로 줄여 입력시킬 수 있다.

아래는 모두 예시이며 쓰는 사람에 따라 다르게 쓸 수 있으므로 절대적이지는 않다.

d="display:"
- db="display: block;"
- df="display: flex;"
- dg="display: grid;"
- dt="display: table;"
- di="display: inline;"
- dib="display: inline-block;"
- dit="display: inline-table;"
- dif="display: inline-flex;"
- dig="display: inline-grid;"
- dn="display: none;"
b 또는 bd="border:"
b 또는 bg="background:"
- blg="background: linear-gradient" 또는 lg="linear-gradient"
- brg="background: radial-gradient" 또는 rg="rinear-gradient"
- tor="to right"
- tol="to left"

2.4. 도트[편집]

일단 이렇게 줄여 쓸 수 있으니 글자수를 획기적으로 적게 입력하면서 그려볼 수는 있겠다.

위 도트에는 나무위키 링크가 걸려있다.

위 도트에는 알파위키 링크가 걸려있다.

이렇게 하기에는 작업이 오래 걸려서 귀찮어려우므로, 응용만 해볼 수 있다면 틀:도트같은 틀을 만들어놓고 직접 그려볼 수 있다.

3. style 문법[편집]

Backend: 4200ff9; Frontend: bda2cf7; 업데이트가 있을 때 추가된 문법으로 추정된다. 앞의 위키(wiki)와는 다르게 여러 가지를 설정한 구성들 한 뭉치를 하나의 이름으로 저장할 수 있는 문법이다. 시범을 보이는 댓글에서 보다시피 스레드에도 지원이 되는 점을 보면 일반적인 {{{#!wiki }}} 로 마감되는 문법들과 연동된다. 특이하게 구성을 잘 살펴보면 html(hypertext markup language)에서 table row, table data를 줄여 tr, td로 부르는 부분과 tbady를 볼 수 있다.[7] 당연하겠지만 꾸미기에는 CSS가 들어가 있다.

style 문법의 @theseed-dark-mode { } 구문은 wiki 문법의 dark-style=" " 처럼 대응되고, 설정할 대상을 찾아가는 방법은 html과 비슷하겠지만 모종의 하위 폴더로 들어가듯이 경로를 > 기호를 새기면서 구조를 따라 작성함으로써 설정할 대상을 찾아가야 한다. 대상을 찾은 다음 대상을 꾸미는 방법은 CSS처럼 꾸미는 모양이다.[8] 앞에 table.이름 식으로 들어가는 방식인 점에서, table이 아닌 다른 속성을 가지고 와 종류.이름 식으로 표(table)가 아닌 다른 부분에 별도 style을 달아볼 수는 있게 생겼다.

구성을 만들었으면 이를

<tableclass=이름>

을 입력하여 표 문법 안에 해당하는 이름의 class로 적용할 수 있다. 문서에 표를 여러 개 만들 일이 있고 여러 표에 똑같은 양식을 적용해야 할 때 해당하는 class만 부르면 쉬워질 것이다. 문서를 편집할 때 표 하나하나마다 셀 특성별로 일일이 새기는 양식을 반복적으로 새기지 않을 수 있다.

3.1. if 문법과 연동[편집]

놀랍게도 if 문법과 연동된다. 예를 들어 앞에 시범을 보이는 댓글에서

{{{#!style
/* scoped styles are not supported */
table.colored > tbody > tr > td:first-of-type {
font-weight: bold;

}
table.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {
color: red;

}
table.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {
color: lime;

}
table.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {
color: blue;

}

/* media query is not supported */
@theseed-dark-mode {
table.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {
color: maroon;
}
table.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {
color: green;
}
table.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {
color: navy;
}

}
}}}

라는 문법을 ~~쓰기 귀찮아서~~ if와 연동한다 할 때

{{{#!if s="table.colored > tbody > tr", n=":nth-of-type"
}}}{{{#!style
/* scoped styles are not supported */
~~table.colored > tbody > tr~~@s@ > td:first-of-type {
font-weight: bold;

}
~~table.colored > tbody > tr~~@s@~~:nth-of-type~~@n@(3n) > td:first-of-type {
color: red;

}
~~table.colored > tbody > tr~~@s@~~:nth-of-type~~@n@(3n + 1) > td:first-of-type {
color: lime;

}
~~table.colored > tbody > tr~~@s@~~:nth-of-type~~@n@(3n + 2) > td:first-of-type {
color: blue;

}

/* media query is not supported */
@theseed-dark-mode {
~~table.colored > tbody > tr~~@s@~~:nth-of-type~~@n@(3n) > td:first-of-type {
color: maroon;
}
~~table.colored > tbody > tr~~@s@~~:nth-of-type~~@n@(3n + 1) > td:first-of-type {
color: green;
}
~~table.colored > tbody > tr~~@s@~~:nth-of-type~~@n@(3n + 2) > td:first-of-type {
color: navy;
}

}
}}}

식으로 줄여

{{{#!if s="table.colored > tbody > tr", n=":nth-of-type"
}}}{{{#!style
/* scoped styles are not supported */
@s@ > td:first-of-type {
font-weight: bold;

}
@s@@n@(3n) > td:first-of-type {
color: red;

}
@s@@n@(3n + 1) > td:first-of-type {
color: lime;

}
@s@@n@(3n + 2) > td:first-of-type {
color: blue;

}

/* media query is not supported */
@theseed-dark-mode {
@s@@n@(3n) > td:first-of-type {
color: maroon;
}
@s@@n@(3n + 1) > td:first-of-type {
color: green;
}
@s@@n@(3n + 2) > td:first-of-type {
color: navy;
}

}
}}}

처럼 표현해도 잘 동작이 된다.

테스트 보기 (RAW 참고) [펼치기 · 접기]

1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	10

3.2. 대괄호[편집]

대괄호 (

{

}

)는 컴퓨터가 어디부터 어디까지 읽는 영역을 표시하는 기호이므로, 많은 내용을 한 줄에 넣고 싶다면 대괄호 사이에 굳이 개행을 할 필요 없이 wiki style 문법으로 속성을 한 줄 안에 적듯이 만들면 된다. 이를테면 앞의 내용인

{{{#!style
/* scoped styles are not supported */
table.colored > tbody > tr > td:first-of-type {
font-weight: bold;

}
table.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {
color: red;

}
table.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {
color: lime;

}
table.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {
color: blue;

}

/* media query is not supported */
@theseed-dark-mode {
table.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {
color: maroon;
}
table.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {
color: green;
}
table.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {
color: navy;
}

}
}}}

부분을 줄여서

{{{#!style
/* scoped styles are not supported */
.colored > tbody > tr > td:first-of-type {font-weight: bold;}
.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {color: red;}
.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {color: lime;}
.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {color: blue;}

/* media query is not supported */
@theseed-dark-mode {
.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {color: maroon;}
.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {color: green;}
.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {color: navy;}
}
}}}

식으로 줄여도 된다.

3.3. include[편집]

include 구문으로 불러 올 문서에 style 설정이 있다면 문서에 불러와도 불러오는 문서 안에서만 해당 style이 적용된다. 불러오는 문서 안에 if문법이 따로 노는 것과 같다. 그러나 본래(main) 문서에서 include로 놓는 본문 앞에 미리 style 설정을 해놨고 include로 불러 올 문서에 해당 style이 적용될 수 있다면 include로 불러왔을 때 불러오는 문서에 본래(main) 문서에 설정한 style이 include로 불러온 문서 안에 적용될 수 있으며, include로 불러온 문서 안에 style이 설정되어 있다면 서로 충돌될 수 있다.

이를테면 본래(main) 문서 "갑"에 style A를 만들고 include로 문서 "을"을 [include(을)] 식으로 불러왔을 때 '을' 내용에 style A가 적용될 수 있으며, '을' 문서 안에 style B가 있다면 '갑'에서 설정한 style A와 충돌되어 나올 수 있다. 물론 '을' 문서에서 설정한 style B는 '갑' 문서의 본문 전체에 적용되지는 않고 불러온 '을'의 내용 안에만 적용된다.