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

=== 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를 씹어먹기 때문에 정상적으로 출력이 안됩니다.