실험용2 편집하기 (부분)

== 고급 ==
여기까지 보고도 의욕이 넘친다면 [http://www.mediawiki.org/wiki/Help:Contents/ko MediaWiki 도움말:목차]나 [[위키백과:위키백과:위키_문법|위키백과:위키 문법]], [[wikipedia:en:Wikipedia:Extended image syntax|Wikipedia:Extended image syntax]]에 가면 당신의 학습욕구를 충족시킬 온갖 문법들을 살펴볼 수 있습니다.

기초적인 프로그래밍 지식이 있다면, 이해하시기 쉬울겁니다.

=== html, CSS 태그 이용 ===
미디어위키에서는 html과 CSS 문법을 상당수 지원합니다. 이하는 html, CSS의 태그를 활용하는 방법의 예시를 설명합니다.

==== 펼치기/접기 (태그 이용) ====
'''예시'''
<div class="toccolours mw-collapsible mw-collapsed">스포일러 주의<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.</div>
</div>

<syntaxhighlight lang=html>
<div class="toccolours mw-collapsible mw-collapsed">스포일러 주의<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.</div>
</div>
</syntaxhighlight>

박스가 쳐져 있는 것을 원치 않으실 경우에는 class에서 toccolours 값을 제거해주시면 됩니다.

'''예시'''
<div class="mw-collapsible mw-collapsed">
스포일러 주의
<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.
</div>
</div>

<syntaxhighlight lang=html>
<div class="mw-collapsible mw-collapsed">
스포일러 주의
<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.
</div>
</div>
</syntaxhighlight>

박스의 가로 크기를 조정하고 싶으신 경우에는 style에 width 값을 넣어주시면 됩니다.

'''예시'''
<div class="toccolours mw-collapsible mw-collapsed" style="width:200px">스포일러 주의<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.</div>
</div>

<syntaxhighlight lang=html>
<div class="toccolours mw-collapsible mw-collapsed" style="width:200px">
스포일러 주의
<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.</div>
</div>
</syntaxhighlight>

테두리를 없애도 가로 크기 조절이 가능합니다.

'''예시'''
<div class="mw-collapsible mw-collapsed" style="width:200px">
스포일러 주의
<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.
</div>
</div>

<syntaxhighlight lang=html>
<div class="mw-collapsible mw-collapsed" style="width:200px">
스포일러 주의
<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.
</div>
</div>
</syntaxhighlight>

위의 모든 예시 공통으로 class에서 mw-collapsed을 제거하면 처음부터 펼쳐진 상태가 됩니다.

'''예시'''
<div class="toccolours mw-collapsible">스포일러 주의<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.</div>
</div>

<syntaxhighlight lang=html>
<div class="toccolours mw-collapsible">스포일러 주의<div class="mw-collapsible-content">
사실 그녀의 정체는 위키 페어리인 척하는 위키모이였다.</div>
</div>
</syntaxhighlight>

==== 문서 내부에 책갈피(anchor) 만들기 ====
문서 내부에 <code><nowiki><span id="(책갈피 이름)">(책갈피를 만들 곳)</span></nowiki></code>를 삽입하면 해당 위치로 스크롤되어 이동할 수 있는 책갈피(anchor)가 만들어집니다. 해당 책갈피가 있는 곳으로 이동하는 링크는 <code><nowiki>[[(문서명)#(책갈피 이름)]]</nowiki></code> 형태를 이용해서 작성할 수 있습니다.

문단을 다른 이름으로도 접근 가능하게 하려면(문단 별칭) <code><nowiki>=== <span id="(다른 이름)"/> 문단 이름 ===</nowiki></code>처럼 입력해도 됩니다. <code><nowiki>=== <span id="(다른 이름)"> 문단 이름 </span> ===</nowiki></code>과 일치합니다.

간편하게 책갈피를 만들어주는 {{틀|책갈피}}도 제공하고 있습니다.

==== 순서가 매겨진 목록 특정 순서에서 시작하기 ====
'''입력'''
<syntaxhighlight lang=html style="width: 400px;">
<ol start="3">
	<li>세 번째부터 시작하는 순서가 있는 목록</li>
	<li>이어지는 목록</li>
		<dl>
			<dd>항목의 설명</dd>
		</dl>
		<ol>
			<li>이어지는 목록</li>
			<li>이어지는 목록</li>
		</ol>
	<li>이어지는 목록</li>
</ol>
</syntaxhighlight>

'''결과'''
<p>
<ol start="3">
	<li>세 번째부터 시작하는 순서가 있는 목록</li>
	<li>이어지는 목록</li>
		<dl>
			<dd>항목의 설명</dd>
		</dl>
		<ol>
			<li>이어지는 목록</li>
			<li>이어지는 목록</li>
		</ol>
	<li>이어지는 목록</li>
</ol>
</p>

<code><nowiki><ol start="시작할 순서"></nowiki></code>에 시작을 원하는 숫자를 넣어 사용합니다. 

다음과 같이 중첩된 목록에서의 순서를 지정할 수도 있습니다. 

'''입력'''
<syntaxhighlight lang=html style="width: 400px;">
<ol start="3">
	<li>세 번째부터 시작하는 순서가 있는 목록</li>
		<ol start="3">
			<li>세 번째부터 시작하는 중첩된 목록</li>
			<li>이어지는 목록</li>
		</ol>
</ol>
</syntaxhighlight>

'''결과'''
<p>
<ol start="3">
	<li>세 번째부터 시작하는 순서가 있는 목록</li>
		<ol start="3">
			<li>세 번째부터 시작하는 중첩된 목록</li>
			<li>이어지는 목록</li>
		</ol>
</ol>
</p>

==== 테두리 그레디언트 ====
테두리 그레디언트는 웹 디자인에서도 자주 쓰입니다.

<syntaxhighlight lang=html style="">
<div style="border:3px solid transparent;background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, #FC5D9D, #F8C596) border-box;border-radius:5px;">
테두리 그레디언트
</div>
</syntaxhighlight>

<div style="border:3px solid transparent;background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, #FC5D9D, #F8C596) border-box;border-radius:5px;">
테두리 그레디언트
</div>


border-image에 그레디언트 속성을 작성해도 테두리 그레디언트가 적용이 되는데 그러면 border-radius가 먹히지 않으니 위의 예시대로 작성해주셔야 됩니다. 배경을 두 부분으로 나누어 주어 테두리 안쪽을 기준으로 한 배경(padding-box)을 흰색-흰색, 그레디언트 테두리를 기준으로 한 배경(border-box)에 그레디언트를 적용해주고 테두리 색을 투명으로 지정해 주면 border-box의 그레디언트가 테두리에만 노출되게 됩니다. 반드시 padding-box 먼저 그 다음 border-box 순서로 작성해야 됩니다. 반대로 적으면 border-box 속성이 padding-box를 씹어먹기 때문에 정상적으로 출력이 안됩니다.

=== 그래프 생성 ===
미디어위키 확장 기능을 통해 웹상에서 편집·반응할 수 있는 그래프를 만들 수 있습니다. [[Vega (문법)|Vega]] 문법을 기반으로 하며 [https://vega.github.io/vega-editor/ Vega Editor]와 미디어위키 위키의 [[mediawikiwiki:Extension:Graph|Extension:Graph]]를 참조할 수 있습니다. 

[[:분류:그래프가 있는 문서]]에는 그래프가 사용된 문서가 표시되며, [[특수:GraphSandbox|그래프 연습장]]에서 편집되는 그래프를 실시간으로 미리보며 연습할 수 있습니다.

=== 파서 태그 사용하기 ===
이미지 분할할 때 사용하는 [[#이미지 안에 링크 넣기|<code><nowiki><imagemap></nowiki></code> 태그]]도 일종의 파서 태그입니다. 리브레 위키에서는 다음과 같은 태그를 사용할 수 있습니다. [[특수:버전]] 참조.

{|class="wikitable"
|- style="align:center; font-size=15pt;"
! 태그 이름 !! 태그의 용도
|-
| <code><nowiki><categorytree></nowiki></code> || 분류 트리를 문서 안에 삽입할 때 사용합니다. [[도움말:분류 트리]]을 참고하세요.
|-
| <code><nowiki><gallery></nowiki></code> || 여러 개의 그림을 행렬 형태로 배열할 수 있게 도와줍니다. 위의 [[#갤러리(여러 이미지 넣기)|갤러리(여러 이미지 넣기)]] 문단을 참고하세요.
|-
| <code><nowiki><imagemap></nowiki></code> || 해당 그림 위에 도형을 그려서 그림을 분할할 수 있는 기능을 제공합니다. 위의 [[#이미지 안에 링크를 여러 개 넣기(imagemap)|이미지 안에 링크를 여러 개 넣기(imagemap)]] 문단을 참고하세요.
|-
| <code><nowiki><inputbox></nowiki></code> || 글자 입력 상자를 출력하는 태그입니다. [[도움말:입력 상자]]를 참고하세요.
|-
| <code><nowiki><math></nowiki></code> || 수식을 입력할 때 필요한 태그입니다. 수식 입력 방법은 [[도움말:TeX 문법]]를 참고하세요.
|-
| <code><nowiki><poem></nowiki></code> || 시를 쓸 때 유용합니다. 이 태그 안의 내용은 줄바꿈이나 띄어쓰기를 그대로 반영하지만 위키 문법을 무시하지 않습니다. 
|-
| <code><nowiki><pre></nowiki></code> || 회색 상자를 생성하며, 줄바꿈이나 띄어쓰기 등을 그대로 반영한 채로 입력합니다. 리브레 위키에서는 pre 태그 안에 있는 내용은 위키 문법을 자동으로 무시하고 텍스트로 입력한 내용 그대로 출력합니다.
|-
| <code><nowiki><syntaxhighlight></nowiki></code> || 각종 프로그래밍 언어에서 특정 키워드에 강조 효과를 주는 소스 코드를 출력합니다. lang 입력 없으면 css가 기본적으로 출력됩니다. 이 상자 안의 내용은 줄바꿈이나 띄어쓰기는 그대로 반영하며, style 태그 등으로 효과를 줄 수는 없습니다. 위의 [[#코드 입력(syntaxhighlight)|코드 입력(syntaxhighlight)]] 문단을 참고하세요.
|-
| <code><nowiki><youtube></nowiki></code> || [[YouTube]] 동영상을 출력할 수 있게 도와줍니다. [[mw:Extension:YouTube]] 참조. 그러나 주로 {{틀|YouTube}}를 사용하기에 태그 자체를 직접 사용할 일은 없을 겁니다.
|-
|}

==== POEM 태그 vs PRE 태그 ====
{|style="width: 100%;"
!
! style="width: 47%; text-align:center;" | Poem 태그
! style="width: 47%; text-align:center" | Pre 태그
|-
! 입력<br />예시
|
<pre>
<poem style="background:#eee; 
border:1px solid black; 
width:85%;">
<big style="color:blue; 
text-align:center">'''호수'''</big>
                ''정지용''


얼골 하나야 
손바닥 둘로
폭 가리지만,

보고 싶은 맘
湖水만 하니
눈 감을 밖에
</poem>
</pre>
|
<pre>
<pre style="background:#eee; 
border:1px solid black; 
width:85%;">
<big style="color:blue; 
text-align:center">'''호수'''</big>
                ''정지용''


얼골 하나야 
손바닥 둘로
폭 가리지만,

보고 싶은 맘
湖水만 하니
눈 감을 밖에
&lt;/pre>
</pre>
|-
! 결과
|
<poem style="background:#eee; 
border:1px solid black; 
width:85%;">
<big style="color:blue; 
text-align:center">'''호수'''</big>
                ''정지용''


얼골 하나야 
손바닥 둘로
폭 가리지만,

보고 싶은 맘
湖水만 하니
눈 감을 밖에
</poem>
|
<pre style="background:#eee; 
border:1px solid black; 
width:85%;">
<big style="color:blue; 
text-align:center">'''호수'''</big>
                ''정지용''


얼골 하나야
손바닥 둘로
폭 가리지만,

보고 싶은 맘
湖水만 하니
눈 감을 밖에
</pre>
|-
! 특징
|
# poem 태그에 스타일 부여 가능.
# align 속성 제외 상당수의 글자 효과가 유효함
# 첫 띄어쓰기는 무제한.
# 그러나 첫 문자 이후에는 &amp;nbsp; 제외 2칸 이상 띄어쓰기를 무시
# 한 줄 개행을 인식한다.
|
# pre 태그에 스타일 부여 가능
# 모든 위키문법이 적용되지 않으며, nowiki와 효과 유사.
# 한 줄 개행과 2칸 이상 띄어쓰기 모두 인식
# 기본적으로 연한 회색으로 칠해져 있음.
|}

=== 파서 함수와 특수 명령문 ===
{{본문|도움말:특수 명령문}}

[[미디어위키]]는 조건문 등 분기 기능을 지원하는 파서 함수와 특정한 값을 출력하는 특수 명령문을 사용할 수 있습니다.

=== Lua 모듈 사용하기 ===
{{참고|시리즈:쉽게 배우는 프로그래밍 입문/Lua}}
모듈 이름공간의 문서는 Lua로 작성된 스크립트로, 복잡한 분기문이나 반복문 등을 필요로 할 때 사용할 수 있습니다. 호출할 때에는 <code><nowiki>{{#invoke:(모듈명)|(변수명)}}</nowiki></code>라고 사용하면 됩니다.

현재 사용 가능한 모듈 목록입니다. [[특수:모든문서/모듈:]] 모듈은 여기서 실험하실 수 있습니다. [[모듈:샌드박스]]

{{주석}}
{{리브레 위키 도움말}}
{{리브레 위키}}
[[분류:도움말]]