r57
r1
1[[분류:테스트]][[분류:나무마크 문법]]
2== 개요 ==
3||<table align=right><nopad><table bordercolor=#abcdef> [youtube(9bZkp7q19f0, width=320px, height=240px)]||
4|| ---{{{#00A495 '''\{\{\{#!wiki style=""[br]\}\}\}'''}}}--- ||
r39
5[clearfix]
r43
6wiki 구문을 비롯한 style 부여 테스트.
r3
7나무위키 문법 도움말을 참고할 수 있다.
r1
8
r3
9몇몇 테스트는 RAW(원문) 참조.
10텍스트 등 양식(style)을 설정하고 출력할 범위를 지정하는 구문(문법).
r11
11기본적으로 개행을 하면 깨지는 문제가 있어 속에 나무마크 구문(문법)을 이용한 출력을 내기 곤란한 구문[* 예 : \[ \] 기호가 들어가는 주석][* {{{#!wiki style="display:inline;"
12>앞에서 언급한 인용문 구문을 더 설명하자면,
13>{{{#!wiki style="display:inline; font-family:monospace;"
14\[* > {{{#dodgerblue (인용할 내용)}}}\]}}} 식으로 입력하면 각주 안에 인용문을 넣기 불가능지만 이렇게 wiki 구문을 이용하면 각주 안에도 인용문을 ---집어---넣을 수도 있다.}}}]
15에 ---집어---넣어줄 수 있다.
r49
16== wiki 문법 ==
r43
17=== 빈 공간 ===
r3
18그냥 \{{{#!wiki 만 넣어도 동작된다. 별도 설정한 양식이 없는 구문인데, 기본값(default)에 따른 출력으로 나오는 모양이다.
r2
19
20{{{#!wiki
21무난하게 출력된다.}}}
r43
22=== style ===
r12
23{{{style=""}}} 그리고 콜론({{{:}}})[* 구분자. 양식(속성)이름:설정값 으로 동작되는 모양], 스페이스바[* 설정해야 하는 변수를 구분], 세미콜론({{{;}}})[* 설정할 양식을 각각으로 구분하는 표시(명령 구분자)] 등 기호를 잘 입력해야 한다.
r7
24##display:none을 두고 의도적으로 다르게 적은 문장.
r4
25{{{#!wiki style=""
r6
26style에 아무 것도 입력하지 않아도 (default) 출력할 수 있다.}}}
27{{{#!wiki style="display:none;"
28RAW 등으로만 볼 수 있는 설정이 있다.}}}{{{#!wiki style="display:nope;"
r7
29종류 이름 또는 설정값을 잘못 입력할 경우 없는 설정값(깨진 설정값)으로 인식하여 출력된다.}}}{{{#!wiki style="display:no;"
30가령 display:none을 입력해야 하는데, nope나 no 등으로 잘못 입력하면 입력하지 않은 것으로 읽어서 출력된다.}}}{{{#!wiki style="presentation:none;"
r8
31다시 말해서 정의되는 양식이름을 입력하고 양식에 따라 정의되는 설정값을 입력 양식에 맞게 입력해야 컴퓨터가 읽을 수 있으면서 편집자가 설정하고 싶은 양식으로 나오게 된다.}}}
32{{{#!wiki style="display:inline; display:none; display:inline;"
r9
33같은 양식이름에 정의되는 설정값을 적어놓은 단락이 2개 이상 있으면 컴퓨터가 왼쪽부터 오른쪽으로 읽게 되면서 마지막으로 적어놓은 설정으로 나오게 된다. 가령 display:inline; display:none; display:inline;으로 적어놓으면 display:none; 을 읽어도 마지막(그 오른쪽)의 display;inline;이 적용된다.}}}{{{#!wiki style="display:inline; display:inline; display:none;"
34(inline, inline, none을 입력하면 none을 읽게 되어 해당 문구는 나오지 않는다.)}}}
35{{{#!wiki style="display:inline;"
r13
36{{{style=""}}} 안에 매개변수와 그 값을 부여하는 표시(@@_@매개변수=@)를 집어넣고 저장한 문서를 include로 호출할 때 {{{style=""}}} 안에 넣었던 매개변수에 값을 주고 호출하게 되면 {{{style}}} 안에 매개변수를 넣었던 특정 단락이 깨져서 그 특정 단락에 대한 설정이 적용되지 않게 되었다. 이런 트릭을 넣고 생성된 틀이 많이 있었다.}}}
37
r15
38wiki의 style안에는 CSS를 집어넣는다. 종류에 따라 먼저 기입한 순서대로 처리되는데, 같은 요소를 입력할 때 display 처럼 설정값에 따라 결과가 번복될 수 있는 요소가 있는가 하면 radial-gradient 처럼 나오는 결과를 중첩시키는 요소가 있다.
39
r43
40=== if 문법과 연동 ===
r23
41if값에 따라 나오는 변수가 출력되는데, wiki 안에 들어갈 내용까지 반영되므로 입력할 수 있는 글자를 --AutoCAD-- 단축키 입력하듯이[* 예를 들어 "L"만 입력해도 바로 '''L'''ine(선 긋기) 명령을 내릴 수 있다.] 줄여 입력할 수 있다. 다만, @ 기호는 열고 닫기가 없기 때문에 @를 잘 열고 잘 닫아줘야 한다.
r15
42
r17
43이를테면 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\@"로 줄여 입력시킬 수 있다.
r16
44##}}}}}}}}}}}}}}}}}}편집기 하이라이팅 버그
r15
45
r23
46아래는 모두 예시이며 쓰는 사람에 따라 다르게 쓸 수 있으므로 절대적이지는 않다.
r18
47 * d="'''d'''isplay:"
48 * db="'''d'''isplay: '''b'''lock;"
49 * df="'''d'''isplay: '''f'''lex;"
50 * dg="'''d'''isplay: '''g'''rid;"
51 * dt="'''d'''isplay: '''t'''able;"
52 * di="'''d'''isplay: '''i'''nline;"
53 * dib="'''d'''isplay: '''i'''nline-'''b'''lock;"
54 * dit="'''d'''isplay: '''i'''nline-'''t'''able;"
r19
55 * dif="'''d'''isplay: '''i'''nline-'''f'''lex;"
56 * dig="'''d'''isplay: '''i'''nline-'''g'''rid;"
r18
57 * dn="'''d'''isplay: '''n'''one;"
r19
58 * b 또는 bd="'''b'''order:"
59 * b 또는 bg="'''b'''ack'''g'''round:"
r21
60 * blg="'''b'''ackground: '''l'''inear-'''g'''radient" 또는 lg="'''l'''inear-'''g'''radient"
61 * brg="'''b'''ackground: '''r'''adial-'''g'''radient" 또는 rg="'''r'''inear-'''g'''radient"
62 * tor="'''to''' '''r'''ight"
r23
63 * tol="'''to''' '''l'''eft"
r18
64
r43
65=== 도트 ===
r24
66일단 이렇게 줄여 쓸 수 있으니 글자수를 획기적으로 적게 입력하면서 그려볼 수는 있겠다.
r34
67{{{#!if sty='style="', paint=sty+"display:inline-block;width:1em;height:1em;background:", mg=sty+'margin-top:-0.5em;"', w=paint+'transparent;"', wh=paint+'white;"',b=paint+'#5f4d3e;"', g=paint+'#00a495;"', p1=paint+'#dda0dd;"', p2=paint+'#e3d4f0;"', c=paint+'#00d1b2;"', b1=paint+'skyblue;"', b2=paint+'deepskyblue;"', we=paint+'wheat;"'
r27
68}}}{{{#!wiki style="max-width: 16em; overflow: hidden;"
69{{{#!wiki style="margin: -1.5em;"
r25
70[[https://namu.wiki|{{{#!wiki style="margin:1.5em"
r24
71{{{#!wiki @w@
72}}}{{{#!wiki @w@
r28
73}}}{{{#!wiki @g@
74}}}{{{#!wiki @g@
75}}}{{{#!wiki @g@
r24
76}}}{{{#!wiki @w@
77}}}{{{#!wiki @w@
78}}}{{{#!wiki @w@
79}}}{{{#!wiki @w@
80}}}{{{#!wiki @w@
81}}}{{{#!wiki @w@
82}}}{{{#!wiki @w@
83}}}{{{#!wiki @w@
84}}}{{{#!wiki @w@
85}}}{{{#!wiki @w@
86}}}{{{#!wiki @w@
87}}}{{{#!wiki @mg@
88{{{#!wiki @w@
89}}}{{{#!wiki @w@
r28
90}}}{{{#!wiki @g@
r24
91}}}{{{#!wiki @w@
r28
92}}}{{{#!wiki @g@
r24
93}}}{{{#!wiki @w@
r28
94}}}{{{#!wiki @g@
95}}}{{{#!wiki @g@
96}}}{{{#!wiki @g@
r24
97}}}{{{#!wiki @w@
98}}}{{{#!wiki @w@
99}}}{{{#!wiki @w@
100}}}{{{#!wiki @w@
101}}}{{{#!wiki @w@
102}}}{{{#!wiki @w@
r31
103}}}{{{#!wiki @w@
r24
104}}}}}}{{{#!wiki @mg@
105{{{#!wiki @w@
106}}}{{{#!wiki @w@
r28
107}}}{{{#!wiki @g@
108}}}{{{#!wiki @g@
109}}}{{{#!wiki @g@
r24
110}}}{{{#!wiki @w@
r28
111}}}{{{#!wiki @g@
r24
112}}}{{{#!wiki @w@
r28
113}}}{{{#!wiki @g@
r24
114}}}{{{#!wiki @w@
115}}}{{{#!wiki @w@
116}}}{{{#!wiki @w@
117}}}{{{#!wiki @w@
118}}}{{{#!wiki @w@
119}}}{{{#!wiki @w@
r31
120}}}{{{#!wiki @w@
r24
121}}}}}}{{{#!wiki @mg@
122{{{#!wiki @w@
123}}}{{{#!wiki @w@
124}}}{{{#!wiki @w@
r28
125}}}{{{#!wiki @b@
r24
126}}}{{{#!wiki @w@
127}}}{{{#!wiki @w@
r28
128}}}{{{#!wiki @g@
129}}}{{{#!wiki @g@
130}}}{{{#!wiki @g@
r24
131}}}{{{#!wiki @w@
132}}}{{{#!wiki @w@
133}}}{{{#!wiki @w@
134}}}{{{#!wiki @w@
r31
135}}}{{{#!wiki @g@
136}}}{{{#!wiki @g@
137}}}{{{#!wiki @g@
r24
138}}}}}}{{{#!wiki @mg@
139{{{#!wiki @w@
140}}}{{{#!wiki @w@
141}}}{{{#!wiki @w@
142}}}{{{#!wiki @w@
r28
143}}}{{{#!wiki @b@
r24
144}}}{{{#!wiki @w@
145}}}{{{#!wiki @w@
r28
146}}}{{{#!wiki @b@
147}}}{{{#!wiki @w@
148}}}{{{#!wiki @w@
149}}}{{{#!wiki @w@
150}}}{{{#!wiki @w@
r31
151}}}{{{#!wiki @b@
r24
152}}}{{{#!wiki @g@
r31
153}}}{{{#!wiki @w@
r28
154}}}{{{#!wiki @g@
155}}}}}}{{{#!wiki @mg@
156{{{#!wiki @w@
r24
157}}}{{{#!wiki @w@
158}}}{{{#!wiki @w@
159}}}{{{#!wiki @w@
r28
160}}}{{{#!wiki @b@
r24
161}}}{{{#!wiki @w@
r28
162}}}{{{#!wiki @w@
r24
163}}}{{{#!wiki @b@
164}}}{{{#!wiki @b@
165}}}{{{#!wiki @w@
166}}}{{{#!wiki @w@
r28
167}}}{{{#!wiki @b@
r24
168}}}{{{#!wiki @w@
169}}}{{{#!wiki @g@
r31
170}}}{{{#!wiki @g@
171}}}{{{#!wiki @g@
r28
172}}}}}}{{{#!wiki @mg@
r30
173{{{#!wiki @w@
r24
174}}}{{{#!wiki @w@
175}}}{{{#!wiki @w@
r30
176}}}{{{#!wiki @w@
177}}}{{{#!wiki @w@
r24
178}}}{{{#!wiki @b@
r28
179}}}{{{#!wiki @b@
r24
180}}}{{{#!wiki @w@
181}}}{{{#!wiki @b@
182}}}{{{#!wiki @b@
183}}}{{{#!wiki @b@
184}}}{{{#!wiki @w@
r31
185}}}{{{#!wiki @w@
186}}}{{{#!wiki @w@
187}}}{{{#!wiki @w@
188}}}{{{#!wiki @w@
r28
189}}}}}}{{{#!wiki @mg@
190{{{#!wiki @g@
r24
191}}}{{{#!wiki @g@
r30
192}}}{{{#!wiki @g@
193}}}{{{#!wiki @w@
r24
194}}}{{{#!wiki @b@
195}}}{{{#!wiki @b@
196}}}{{{#!wiki @w@
197}}}{{{#!wiki @w@
198}}}{{{#!wiki @w@
r28
199}}}{{{#!wiki @b@
r24
200}}}{{{#!wiki @w@
201}}}{{{#!wiki @w@
202}}}{{{#!wiki @w@
203}}}{{{#!wiki @w@
204}}}{{{#!wiki @w@
r26
205}}}{{{#!wiki @w@
r24
206}}}}}}{{{#!wiki @mg@
r28
207{{{#!wiki @g@
r30
208}}}{{{#!wiki @w@
r28
209}}}{{{#!wiki @g@
r30
210}}}{{{#!wiki @b@
r24
211}}}{{{#!wiki @w@
212}}}{{{#!wiki @w@
213}}}{{{#!wiki @w@
214}}}{{{#!wiki @w@
215}}}{{{#!wiki @w@
216}}}{{{#!wiki @w@
r28
217}}}{{{#!wiki @b@
r24
218}}}{{{#!wiki @w@
219}}}{{{#!wiki @w@
220}}}{{{#!wiki @w@
221}}}{{{#!wiki @w@
222}}}{{{#!wiki @w@
223}}}}}}{{{#!wiki @mg@
r30
224{{{#!wiki @g@
225}}}{{{#!wiki @g@
226}}}{{{#!wiki @g@
r24
227}}}{{{#!wiki @w@
228}}}{{{#!wiki @w@
229}}}{{{#!wiki @w@
230}}}{{{#!wiki @w@
231}}}{{{#!wiki @w@
232}}}{{{#!wiki @w@
233}}}{{{#!wiki @w@
234}}}{{{#!wiki @w@
235}}}{{{#!wiki @w@
236}}}{{{#!wiki @w@
237}}}{{{#!wiki @w@
238}}}{{{#!wiki @w@
239}}}{{{#!wiki @w@
r33
240}}}}}}}}}]]}}}}}}위 도트에는 [[나무위키]] 링크가 걸려있다.
r24
241
r33
242{{{#!wiki style="max-width: 16em; overflow: hidden;"
243{{{#!wiki style="margin: -1.5em;"
244[[https://www.alphawiki.org/|{{{#!wiki style="margin:1.5em"
245{{{#!wiki @w@
246}}}{{{#!wiki @w@
247}}}{{{#!wiki @w@
248}}}{{{#!wiki @w@
249}}}{{{#!wiki @w@
250}}}{{{#!wiki @p1@
251}}}{{{#!wiki @p1@
252}}}{{{#!wiki @p1@
253}}}{{{#!wiki @p1@
254}}}{{{#!wiki @p1@
255}}}{{{#!wiki @p1@
256}}}{{{#!wiki @w@
257}}}{{{#!wiki @w@
258}}}{{{#!wiki @w@
259}}}{{{#!wiki @w@
260}}}{{{#!wiki @w@
261}}}{{{#!wiki @mg@
262{{{#!wiki @w@
263}}}{{{#!wiki @w@
264}}}{{{#!wiki @w@
265}}}{{{#!wiki @w@
266}}}{{{#!wiki @p1@
267}}}{{{#!wiki @p1@
268}}}{{{#!wiki @p1@
269}}}{{{#!wiki @p1@
270}}}{{{#!wiki @p1@
271}}}{{{#!wiki @p1@
272}}}{{{#!wiki @p1@
273}}}{{{#!wiki @p1@
274}}}{{{#!wiki @w@
275}}}{{{#!wiki @w@
276}}}{{{#!wiki @w@
277}}}{{{#!wiki @w@
278}}}}}}{{{#!wiki @mg@
279{{{#!wiki @w@
280}}}{{{#!wiki @w@
281}}}{{{#!wiki @p1@
282}}}{{{#!wiki @p1@
283}}}{{{#!wiki @p1@
284}}}{{{#!wiki @p1@
285}}}{{{#!wiki @p1@
286}}}{{{#!wiki @p1@
287}}}{{{#!wiki @p1@
288}}}{{{#!wiki @p1@
289}}}{{{#!wiki @p1@
290}}}{{{#!wiki @p1@
291}}}{{{#!wiki @p1@
292}}}{{{#!wiki @p1@
293}}}{{{#!wiki @w@
294}}}{{{#!wiki @w@
295}}}}}}{{{#!wiki @mg@
296{{{#!wiki @w@
297}}}{{{#!wiki @w@
298}}}{{{#!wiki @p1@
299}}}{{{#!wiki @p1@
300}}}{{{#!wiki @p1@
301}}}{{{#!wiki @p1@
302}}}{{{#!wiki @wh@
303}}}{{{#!wiki @wh@
304}}}{{{#!wiki @wh@
305}}}{{{#!wiki @wh@
306}}}{{{#!wiki @p1@
307}}}{{{#!wiki @p1@
308}}}{{{#!wiki @p1@
309}}}{{{#!wiki @p1@
310}}}{{{#!wiki @w@
311}}}{{{#!wiki @w@
312}}}}}}{{{#!wiki @mg@
313{{{#!wiki @w@
314}}}{{{#!wiki @p1@
315}}}{{{#!wiki @p1@
316}}}{{{#!wiki @p1@
317}}}{{{#!wiki @p1@
318}}}{{{#!wiki @wh@
319}}}{{{#!wiki @p1@
320}}}{{{#!wiki @p1@
321}}}{{{#!wiki @p1@
322}}}{{{#!wiki @p1@
323}}}{{{#!wiki @wh@
324}}}{{{#!wiki @p1@
325}}}{{{#!wiki @p2@
326}}}{{{#!wiki @p1@
327}}}{{{#!wiki @p1@
328}}}{{{#!wiki @w@
329}}}}}}{{{#!wiki @mg@
330{{{#!wiki @p1@
331}}}{{{#!wiki @p1@
332}}}{{{#!wiki @p1@
333}}}{{{#!wiki @p1@
334}}}{{{#!wiki @wh@
335}}}{{{#!wiki @p1@
336}}}{{{#!wiki @p1@
337}}}{{{#!wiki @p1@
338}}}{{{#!wiki @p1@
339}}}{{{#!wiki @p1@
340}}}{{{#!wiki @p1@
341}}}{{{#!wiki @wh@
342}}}{{{#!wiki @p1@
343}}}{{{#!wiki @p1@
344}}}{{{#!wiki @p1@
345}}}{{{#!wiki @p1@
346}}}}}}{{{#!wiki @mg@
347{{{#!wiki @p1@
348}}}{{{#!wiki @p1@
349}}}{{{#!wiki @p1@
350}}}{{{#!wiki @wh@
351}}}{{{#!wiki @p1@
352}}}{{{#!wiki @p1@
353}}}{{{#!wiki @p1@
354}}}{{{#!wiki @p1@
355}}}{{{#!wiki @p1@
356}}}{{{#!wiki @p1@
357}}}{{{#!wiki @p2@
358}}}{{{#!wiki @p1@
359}}}{{{#!wiki @wh@
360}}}{{{#!wiki @p1@
361}}}{{{#!wiki @p1@
362}}}{{{#!wiki @p1@
363}}}}}}{{{#!wiki @mg@
364{{{#!wiki @p1@
365}}}{{{#!wiki @p1@
366}}}{{{#!wiki @p1@
367}}}{{{#!wiki @wh@
368}}}{{{#!wiki @p1@
369}}}{{{#!wiki @p1@
370}}}{{{#!wiki @p1@
371}}}{{{#!wiki @p1@
372}}}{{{#!wiki @p1@
373}}}{{{#!wiki @p1@
374}}}{{{#!wiki @p2@
375}}}{{{#!wiki @p1@
376}}}{{{#!wiki @wh@
377}}}{{{#!wiki @p1@
378}}}{{{#!wiki @p1@
379}}}{{{#!wiki @p1@
380}}}}}}{{{#!wiki @mg@
381{{{#!wiki @p1@
382}}}{{{#!wiki @p1@
383}}}{{{#!wiki @p1@
384}}}{{{#!wiki @wh@
385}}}{{{#!wiki @p1@
386}}}{{{#!wiki @p1@
387}}}{{{#!wiki @p1@
388}}}{{{#!wiki @p1@
389}}}{{{#!wiki @p1@
390}}}{{{#!wiki @p1@
391}}}{{{#!wiki @p2@
392}}}{{{#!wiki @p1@
393}}}{{{#!wiki @wh@
394}}}{{{#!wiki @p1@
395}}}{{{#!wiki @p1@
396}}}{{{#!wiki @p1@
397}}}}}}{{{#!wiki @mg@
398{{{#!wiki @p1@
399}}}{{{#!wiki @p1@
400}}}{{{#!wiki @p1@
401}}}{{{#!wiki @wh@
402}}}{{{#!wiki @p1@
403}}}{{{#!wiki @p1@
404}}}{{{#!wiki @p1@
405}}}{{{#!wiki @p1@
406}}}{{{#!wiki @p1@
407}}}{{{#!wiki @p1@
408}}}{{{#!wiki @p2@
409}}}{{{#!wiki @p1@
410}}}{{{#!wiki @wh@
411}}}{{{#!wiki @p1@
412}}}{{{#!wiki @p1@
413}}}{{{#!wiki @p1@
414}}}}}}{{{#!wiki @mg@
415{{{#!wiki @p1@
416}}}{{{#!wiki @p1@
417}}}{{{#!wiki @p1@
418}}}{{{#!wiki @p1@
419}}}{{{#!wiki @wh@
420}}}{{{#!wiki @p1@
421}}}{{{#!wiki @p1@
422}}}{{{#!wiki @p1@
423}}}{{{#!wiki @p1@
424}}}{{{#!wiki @p1@
425}}}{{{#!wiki @p1@
426}}}{{{#!wiki @wh@
427}}}{{{#!wiki @p1@
428}}}{{{#!wiki @p1@
429}}}{{{#!wiki @p1@
430}}}{{{#!wiki @p1@
431}}}}}}{{{#!wiki @mg@
432{{{#!wiki @w@
433}}}{{{#!wiki @p1@
434}}}{{{#!wiki @p1@
435}}}{{{#!wiki @p1@
436}}}{{{#!wiki @p1@
437}}}{{{#!wiki @wh@
438}}}{{{#!wiki @p1@
439}}}{{{#!wiki @p1@
440}}}{{{#!wiki @p1@
441}}}{{{#!wiki @p1@
442}}}{{{#!wiki @wh@
443}}}{{{#!wiki @p1@
444}}}{{{#!wiki @p2@
445}}}{{{#!wiki @p1@
446}}}{{{#!wiki @p1@
447}}}{{{#!wiki @w@
448}}}}}}{{{#!wiki @mg@
449{{{#!wiki @w@
450}}}{{{#!wiki @w@
451}}}{{{#!wiki @p1@
452}}}{{{#!wiki @p1@
453}}}{{{#!wiki @p1@
454}}}{{{#!wiki @p1@
455}}}{{{#!wiki @wh@
456}}}{{{#!wiki @wh@
457}}}{{{#!wiki @wh@
458}}}{{{#!wiki @wh@
459}}}{{{#!wiki @p1@
460}}}{{{#!wiki @p1@
461}}}{{{#!wiki @p1@
462}}}{{{#!wiki @p1@
463}}}{{{#!wiki @w@
464}}}{{{#!wiki @w@
465}}}}}}{{{#!wiki @mg@
466{{{#!wiki @w@
467}}}{{{#!wiki @w@
468}}}{{{#!wiki @p1@
469}}}{{{#!wiki @p1@
470}}}{{{#!wiki @p1@
471}}}{{{#!wiki @p1@
472}}}{{{#!wiki @p1@
473}}}{{{#!wiki @p1@
474}}}{{{#!wiki @p1@
475}}}{{{#!wiki @p1@
476}}}{{{#!wiki @p1@
477}}}{{{#!wiki @p1@
478}}}{{{#!wiki @p1@
479}}}{{{#!wiki @p1@
480}}}{{{#!wiki @w@
481}}}{{{#!wiki @w@
482}}}}}}{{{#!wiki @mg@
483{{{#!wiki @w@
484}}}{{{#!wiki @w@
485}}}{{{#!wiki @w@
486}}}{{{#!wiki @w@
487}}}{{{#!wiki @p1@
488}}}{{{#!wiki @p1@
489}}}{{{#!wiki @p1@
490}}}{{{#!wiki @p1@
491}}}{{{#!wiki @p1@
492}}}{{{#!wiki @p1@
493}}}{{{#!wiki @p1@
494}}}{{{#!wiki @p1@
495}}}{{{#!wiki @w@
496}}}{{{#!wiki @w@
497}}}{{{#!wiki @w@
498}}}{{{#!wiki @w@
499}}}}}}{{{#!wiki @mg@
500{{{#!wiki @w@
501}}}{{{#!wiki @w@
502}}}{{{#!wiki @w@
503}}}{{{#!wiki @w@
504}}}{{{#!wiki @w@
505}}}{{{#!wiki @p1@
506}}}{{{#!wiki @p1@
507}}}{{{#!wiki @p1@
508}}}{{{#!wiki @p1@
509}}}{{{#!wiki @p1@
510}}}{{{#!wiki @p1@
511}}}{{{#!wiki @w@
512}}}{{{#!wiki @w@
513}}}{{{#!wiki @w@
514}}}{{{#!wiki @w@
515}}}{{{#!wiki @w@
516}}}}}}}}}]]}}}}}}위 도트에는 [[알파위키]] 링크가 걸려있다.
r24
517
r40
518{{{#!if b='black', w='white'
r42
519}}}{{{#!wiki style="margin-top: -0.5em;"
r41
520''''''[Include(틀:도트, 값=@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@|@w@|@b@)]}}}
r38
521이렇게 하기에는 작업이 오래 걸려서 --귀찮--어려우므로, 응용만 해볼 수 있다면 [[틀:도트]]같은 틀을 만들어놓고 직접 그려볼 수 있다.
522
r49
523== style 문법 ==
r51
524Backend: 4200ff9; Frontend: bda2cf7; 업데이트가 있을 때 추가된 문법으로 추정된다. 앞의 위키(wiki)와는 다르게 여러 가지를 설정한 구성들 한 뭉치를 하나의 이름으로 저장할 수 있는 문법이다. [[https://namu.wiki/thread/ExuberantUptightJoblessBeggar#31|시범을 보이는 댓글]]에서 보다시피 스레드에도 지원이 되는 점을 보면 일반적인 \{{{#!wiki \}}} 로 마감되는 문법들과 연동된다. 특이하게 구성을 잘 살펴보면 html(hypertext markup language)에서 '''t'''able '''r'''ow, '''t'''able '''d'''ata를 줄여 tr, td로 부르는 부분과 tbady를 볼 수 있다.[* 각주에서 언급된 scope는 html에서 <th scope="값">처럼 별도 scope를 주는 문법으로 보인다.] 당연하겠지만 꾸미기에는 CSS가 들어가 있다.
r43
525
r50
526style 문법의 @theseed-dark-mode { } 구문은 wiki 문법의 dark-style=" " 처럼 대응되고, 설정할 대상을 찾아가는 방법은 html과 비슷하겠지만 모종의 하위 폴더로 들어가듯이 경로를 {{{>}}} 기호를 새기면서 구조를 따라 작성함으로써 설정할 대상을 찾아가야 한다. 대상을 찾은 다음 대상을 꾸미는 방법은 CSS처럼 꾸미는 모양이다.[* 문서에서 표로 나온 부분을 살펴보면 html과 css가 병합되어 있는 내용을 볼 수 있다.] 앞에 table.{{{#deepskyblue 이름}}} 식으로 들어가는 방식인 점에서, table이 아닌 다른 속성을 가지고 와 {{{#teal 종류}}}.{{{#deepskyblue 이름}}} 식으로 표(table)가 아닌 다른 부분에 별도 style을 달아볼 수는 있게 생겼다.
r49
527
r50
528구성을 만들었으면 이를 {{{#!wiki style="display: inline; font-family: monospace;"
r51
529<tableclass={{{#deepskyblue 이름}}}>}}}을 입력하여 표 문법 안에 해당하는 이름의 class로 적용할 수 있다. 문서에 표를 여러 개 만들 일이 있고 여러 표에 똑같은 양식을 적용해야 할 때 해당하는 class만 부르면 쉬워질 것이다. 문서를 편집할 때 표 하나하나마다 셀 특성별로 일일이 새기는 양식을 반복적으로 새기지 않을 수 있다.
r44
530=== if 문법과 연동 ===
531놀랍게도 if 문법과 연동된다. 예를 들어 앞에 시범을 보이는 댓글에서
532>{{{#!wiki style="display: inline; font-family: monospace;"
533\{{{#!style
534/* scoped styles are not supported */
535table.colored > tbody > tr > td:first-of-type {
536 font-weight: bold;
537}
538table.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {
539 color: red;
540}
541table.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {
542 color: lime;
543}
544table.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {
545 color: blue;
546}
547
548/* media query is not supported */
549@theseed-dark-mode {
550 table.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {
551 color: maroon;
552 }
553 table.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {
554 color: green;
555 }
556 table.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {
557 color: navy;
558 }
559}
560\}}}\ }}}
561라는 문법을 --쓰기 귀찮아서-- if와 연동한다 할 때
562>{{{#!wiki style="display: inline; font-family: monospace;"
563\{{{#!if s="table.colored > tbody > tr", n=":nth-of-type"
564\}}}\{{{#!style
565/* scoped styles are not supported */
566--table.colored > tbody > tr--@@_@s@ > td:first-of-type {
567 font-weight: bold;
568}
569--table.colored > tbody > tr--@@_@s@--:nth-of-type--@@_@n@(3n) > td:first-of-type {
570 color: red;
571}
572--table.colored > tbody > tr--@@_@s@--:nth-of-type--@@_@n@(3n + 1) > td:first-of-type {
573 color: lime;
574}
575--table.colored > tbody > tr--@@_@s@--:nth-of-type--@@_@n@(3n + 2) > td:first-of-type {
576 color: blue;
577}
578
579/* media query is not supported */
580@theseed-dark-mode {
581 --table.colored > tbody > tr--@@_@s@--:nth-of-type--@@_@n@(3n) > td:first-of-type {
582 color: maroon;
583 }
584 --table.colored > tbody > tr--@@_@s@--:nth-of-type--@@_@n@(3n + 1) > td:first-of-type {
585 color: green;
586 }
587 --table.colored > tbody > tr--@@_@s@--:nth-of-type--@@_@n@(3n + 2) > td:first-of-type {
588 color: navy;
589 }
590}
591\}}}\ }}}
592식으로 줄여
593>{{{#!wiki style="display: inline; font-family: monospace;"
594\{{{#!if s="table.colored > tbody > tr", n=":nth-of-type"
595\}}}\{{{#!style
596/* scoped styles are not supported */
r46
597{{{#deepskyblue @@_@s@}}} > td:first-of-type {
r44
598 font-weight: bold;
599}
r46
600{{{#deepskyblue @@_@s@@@_@n@}}}(3n) > td:first-of-type {
r44
601 color: red;
602}
r46
603{{{#deepskyblue @@_@s@@@_@n@}}}(3n + 1) > td:first-of-type {
r44
604 color: lime;
605}
r46
606{{{#deepskyblue @@_@s@@@_@n@}}}(3n + 2) > td:first-of-type {
r44
607 color: blue;
608}
609
610/* media query is not supported */
611@theseed-dark-mode {
r46
612 {{{#deepskyblue @@_@s@@@_@n@}}}(3n) > td:first-of-type {
r44
613 color: maroon;
614 }
r46
615 {{{#deepskyblue @@_@s@@@_@n@}}}(3n + 1) > td:first-of-type {
r44
616 color: green;
617 }
r46
618 {{{#deepskyblue @@_@s@@@_@n@}}}(3n + 2) > td:first-of-type {
r44
619 color: navy;
620 }
621}
622\}}}\ }}}
r45
623처럼 표현해도 잘 동작이 된다.
624{{{#!folding 테스트 보기 (RAW 참고) [펼치기 · 접기]
r44
625{{{#!if s="table.colored > tbody > tr", n=":nth-of-type"
626}}}{{{#!style
627/* scoped styles are not supported */
628@s@ > td:first-of-type {
629 font-weight: bold;
630}
631@s@@n@(3n) > td:first-of-type {
632 color: red;
633}
634@s@@n@(3n + 1) > td:first-of-type {
635 color: lime;
636}
637@s@@n@(3n + 2) > td:first-of-type {
638 color: blue;
639}
640
641/* media query is not supported */
642@theseed-dark-mode {
643 @s@@n@(3n) > td:first-of-type {
644 color: maroon;
645 }
646 @s@@n@(3n + 1) > td:first-of-type {
647 color: green;
648 }
649 @s@@n@(3n + 2) > td:first-of-type {
650 color: navy;
651 }
652}
653}}}
654||<tableclass=colored><table width=100%><table bgcolor=#ffffff,#2d2f34><table color=#212529,#e0e0e0><colbgcolor=#ffffff,#000000> 1 ||1 ||
655|| 2 ||2 ||
656|| 3 ||3 ||
657|| 4 ||4 ||
658|| 5 ||5 ||
659|| 6 ||6 ||
660|| 7 ||7 ||
661|| 8 ||8 ||
662|| 9 ||9 ||
663|| 10 ||10 ||
664}}}
665
r52
666=== 대괄호 ===
667대괄호 ({{{#!wiki style="display:inline-block; font-family:monospace"
668\{}}}, {{{#!wiki style="display:inline-block; font-family:monospace"
r53
669\}}}})는 컴퓨터가 어디부터 어디까지 읽는 영역을 표시하는 기호이므로, 많은 내용을 한 줄에 넣고 싶다면 대괄호 사이에 굳이 개행을 할 필요 없이 wiki style 문법으로 속성을 한 줄 안에 적듯이 만들면 된다. 이를테면 앞의 내용인
r52
670>{{{#!wiki style="display: inline; font-family: monospace;"
671\{{{#!style
672/* scoped styles are not supported */
673table.colored > tbody > tr > td:first-of-type {
674 font-weight: bold;
675}
676table.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {
677 color: red;
678}
679table.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {
680 color: lime;
681}
682table.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {
683 color: blue;
684}
685
686/* media query is not supported */
687@theseed-dark-mode {
688 table.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {
689 color: maroon;
690 }
691 table.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {
692 color: green;
693 }
694 table.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {
695 color: navy;
696 }
697}
698\}}}\ }}}
699부분을 줄여서
700>{{{#!wiki style="display: inline; font-family: monospace;"
r53
701\{{{#!style
r52
702/* scoped styles are not supported */
r53
703.colored > tbody > tr > td:first-of-type {font-weight: bold;}
704.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {color: red;}
705.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {color: lime;}
706.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {color: blue;}
r52
707
708/* media query is not supported */
709@theseed-dark-mode {
r53
710.colored > tbody > tr:nth-of-type(3n) > td:first-of-type {color: maroon;}
711.colored > tbody > tr:nth-of-type(3n + 1) > td:first-of-type {color: green;}
712.colored > tbody > tr:nth-of-type(3n + 2) > td:first-of-type {color: navy;}
r52
713}
714\}}}\ }}}
715식으로 줄여도 된다.
716
r54
717=== include ===
718include 구문으로 불러 올 문서에 style 설정이 있다면 문서에 불러와도 불러오는 문서 안에서만 해당 style이 적용된다. 불러오는 문서 안에 if문법이 따로 노는 것과 같다. 그러나 본래(main) 문서에서 include로 놓는 본문 앞에 미리 style 설정을 해놨고 include로 불러 올 문서에 해당 style이 적용될 수 있다면 include로 불러왔을 때 불러오는 문서에 본래(main) 문서에 설정한 style이 include로 불러온 문서 안에 적용될 수 있으며, include로 불러온 문서 안에 style이 설정되어 있다면 서로 충돌될 수 있다.
r52
719
r57
720이를테면 본래(main) 문서 "갑"에 style A를 만들고 include로 문서 "을"을 {{{[include(을)]}}} 식으로 불러왔을 때 '을' 내용에 style A가 적용될 수 있으며, '을' 문서 안에 style B가 있다면 '갑'에서 설정한 style A와 충돌되어 나올 수 있다. 물론 '을' 문서에서 설정한 style B는 '갑' 문서의 본문 전체에 적용되지는 않고 불러온 '을'의 내용 안에만 적용된다.
r54
721
r15
722{{{#!wiki sytle="display:none"
723[각주]}}}