테스트:wiki문법(r52 판)

[주의!] 문서의 이전 버전(2026-01-03 21:40:44에 수정)을 보고 있습니다. 최신 버전으로 이동

분류

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;
}

}
}}}

부분을 줄여서

{{{#!if s="table.colored > tbody > tr", n=":nth-of-type"
}}}{{{#!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;}
}
}}}

식으로 줄여도 된다.

[1] 예 : [ ] 기호가 들어가는 주석[2]

앞에서 언급한 인용문 구문을 더 설명하자면,
[* > (인용할 내용)]
식으로 입력하면 각주 안에 인용문을 넣기 불가능지만 이렇게 wiki 구문을 이용하면 각주 안에도 인용문을 집어넣을 수도 있다.

[3] 구분자. 양식(속성)이름:설정값 으로 동작되는 모양[4] 설정해야 하는 변수를 구분[5] 설정할 양식을 각각으로 구분하는 표시(명령 구분자)[6] 예를 들어 "L"만 입력해도 바로 Line(선 긋기) 명령을 내릴 수 있다.[7] 각주에서 언급된 scope는 html에서 <th scope="값">처럼 별도 scope를 주는 문법으로 보인다.[8] 문서에서 표로 나온 부분을 살펴보면 html과 css가 병합되어 있는 내용을 볼 수 있다.