FANDOM


간편 정보상자의 기본 틀은 태그로 이루어져 있습니다. 이 문서에서는 기본적인 태그의 종류를 알려드립니다. 또, 각 태그의 위키 문법 예제와 HTML 결과물을 보여드립니다.

모든 간편 정보상자 틀은 XML 방식으로 작성돼야 하며, 속성을 적용할 때는 HTML 방식을 사용해야 합니다.

기본 태그편집

infobox편집

속성
  • theme
  • theme-source
  • layout
하위 태그
  • title
  • image
  • header
  • navigation
  • data
  • group
모든 정보상자 태그는 이 태그 안에 속해야 합니다.

<infobox>
	<title source="이름_값" />
</infobox>

<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
	<h2 class="pi-item pi-item-spacing pi-title">이름</h2>
</aside>

title편집

속성
  • source
하위 태그
  • default
  • format
정보상자 제목을 표시합니다. title 태그에 사용된 그림은 모바일 기기에서는 표시되지 않습니다.

<title source="이름_값">
	<default>{{PAGENAME}}</default>
</title>

<h2 class="pi-item pi-item-spacing pi-title">문서 제목</h2>

data편집

속성
  • source
하위 태그
  • default
  • label
  • format
기본적인 정보를 표시합니다.

<data source="이름">
	<label>이름</label>
	<default>홍길동</default>
</data>

<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">이름</h3>
	<div class="pi-font pi-data-value">홍길동</div>
</div>

표시 방식 설정편집

label편집

속성 없음
하위 태그 없음

label 태그는 하위 태그로만 쓰일 수 있습니다. 태그 내에서 위키 문법을 사용할 수 있습니다.

자세한 사항은 도움말을 참고하세요.

<label>이름</label>

<h3 class="pi-secondary-font pi-data-label">이름</h3>

default편집

속성 없음
하위 태그 없음

default 태그는 하위 태그로만 쓰일 수 있습니다. 태그 내에서 위키 문법을 사용할 수 있습니다.

자세한 사항은 도움말을 참고하세요.

<default>홍길동</default>

<div class="pi-font pi-data-value">홍길동</div>

format편집

속성 없음
하위 태그 없음

format 태그는 하위 태그로만 쓰일 수 있습니다. 태그 내에서 위키 문법을 사용할 수 있습니다.

자세한 사항은 도움말을 참고하세요.

<data source="가격">
	<label>정가</label>
	<format>{{{가격}}}원</format>
</data>

<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">정가</h3>
	<div class="pi-font pi-data-value">15,000원</div>
</div>

그림 태그편집

image편집

속성
  • source
하위 태그
  • alt
  • caption
  • default

image 태그는 정보상자 내에 그림이나 동영상을 삽입할 때 쓰입니다.

이 태그의 스타일을 수정하기 위해선 커뮤니티 CSS를 수정해야 합니다. 또, 직접 그림·동영상의 크기를 조절할 수는 없습니다.

갤러리 태그를 이용해 한 번에 여러 그림을 삽입할 수 있습니다.

default 태그로 기본 그림을 설정할 수 있습니다. (예: <default>예제.jpg</default>)

<image source="그림" />

<figure class="pi-item pi-image">
	<a href=".../파일:그림.jpg" class="image image-thumbnail" title="">
		<img src="그림.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="그림.jpg" data-image-name="그림.jpg">
	</a>
</figure>

alt편집

속성
  • source
하위 태그
  • default
image 태그 안에서만 사용할 수 있습니다.

<image source="그림">
	<alt source="대체_이름">
		<default>기본 대체 이름</default>
	</alt>
</image>

<figure class="pi-item pi-image">
	<a href=".../파일:그림.jpg" class="image image-thumbnail" title="기본 대체 이름">
		<img src="그림.jpg" class="pi-image-thumbnail" alt="기본 대체 이름" width="" height="" data-image-key="그림.jpg" data-image-name="그림.jpg">
	</a>
</figure>

caption편집

속성
  • source
하위 태그
  • default
  • format
image 태그 안에서만 사용할 수 있습니다.

<image source="그림">
	<caption source="설명">
		<default>설명 예제</default>
	</caption>
</image>

<figcaption class="pi-item-spacing pi-caption">설명 예제</figcaption>

기타 태그편집

group편집

속성
  • layout="horizontal"
  • show="incomplete"
  • collapse="open"
  • collapse="closed"
하위 태그
  • data
  • header
  • image
  • title
  • navigation

여러 태그를 그룹으로 묶는 데 사용합니다.

자세한 사항은 도움말을 참고하세요.

기본 그룹편집

<group>
	<header>그룹 이름</header>
	<data source="값1" />
</group>

<section class="pi-item pi-group pi-border-color">
	<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">그룹 이름</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value"></div>
	</div>
</section>

수평 그룹편집

<group layout="horizontal">
	<header>그룹 이름</header>
	<data source="값1">
		<label>라벨</label>
	</data>
</group>

<section class="pi-item pi-group pi-border-color">
	<table class="pi-horizontal-group">
		<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">그룹 이름</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">라벨</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">라벨</td>
			</tr>
		</tbody>
	</table>
</section>

header편집

속성 없음
하위 태그 없음
header 태그는 그룹의 시작을 나타낼 때 쓰입니다.

<header>헤더</header>

일반 그룹
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">헤더</h2>
수평 그룹
<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">헤더</caption>

navigation편집

속성 없음
하위 태그 없음
텍스트를 적는 데 쓰입니다. 태그 내에서 위키 문법을 사용할 수 있습니다.

<navigation>[[링크]]</navigation>

<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
	<a href="/wiki/링크" title="링크">링크</a>
</nav>

Community content is available under CC-BY-SA unless otherwise noted.