FANDOM


90210-infobox-light.png

정보상자 예제

정보상자는 중요한 정보들을 정해진 형식으로 정리해서 보여주는 상자를 뜻합니다. 정보상자에 쓰이는 상자는 보통 로 만들어서 위키 어디서든 쓸 수 있도록 하는 것이 일반적입니다.

팬덤은 팬덤만의 독특한 정보상자인 간편 정보상자를 개발했습니다. 간편 정보상자를 이용해 정보상자를 다양한 기기에 최적화할 수 있습니다. 간편 정보상자든 일반 정보상자든 문서에 삽입하는 방법은 똑같습니다. 단지 정보상자 틀을 만드는 방식이 다를 뿐입니다. 일반 정보상자를 간편 정보상자로 변환할 수도 있습니다.

유용한 정보


정보상자 삽입Edit

VE-portableinfobox.png

시각 편집기에서 정보상자를 삽입하는 법

정보상자를 문서에 삽입할 때는 다음과 같은 방법을 사용할 수 있습니다.

  • 편집기에 탑재된 도구를 이용합니다.
  • 편집기의 소스 모드에서 직접 추가합니다.

시각 편집기에서는 ‘삽입’ 메뉴의 정보상자 항목을 통해 문서 내에 정보상자를 삽입할 수 있습니다.

소스 모드로 정보상자를 삽입할 때는 먼저 틀의 설명 문서에서 삽입용 코드를 복사해 문서에 붙여넣습니다. 이후 등호 뒤에 원하는 정보를 입력합니다. 아래는 예제입니다.

{{등장인물 정보
 | 이름     = 데이지
 | 그림     = 예제.jpg
 | 그림설명 = 바람에 날아가는 데이지
 | 역할     = 대장
 | 나이     = 2 개월
 | 상태     = 활동 중
 | 키       = 13센티
 | 몸무게   = 20그램
}}

정보상자 제작Edit

Tutorialinfobox.png

정보상자 예제

먼저 원하는 이름으로 틀 문서를 생성합니다. 틀 문서를 생성할 때는 “틀:이름” 같은 형식으로 문서를 생성하면 됩니다. (예: 틀:예제)

일반 정보상자는 표와 div 태그를 사용하는 반면, 간편 정보상자는 정보상자 전용 태그를 사용합니다. 이 문서에서는 간편 정보상자 제작법에 대해 다룹니다.


<infobox layout="stacked">
  <title source="이름"><default>{{PAGENAME}}</default></title>
  <image source="그림" />
</infobox>

틀 문서에 위 코드를 추가하면 다음과 같은 틀이 만들어집니다.

  • ‘이름’, ‘그림’에 입력된 값을 ‘title(이름)’과 ‘image(그림)’ 항목에 사용합니다.
  • ‘이름’에 아무런 값도 입력하지 않으면 ‘title’ 항목에 ‘default(기본)’로 설정된 값을 사용합니다.

이제 추가적인 정보를 담기 위한 칸을 만들어 봅시다.

<data source="시즌"><label>시즌</label></data>

위 코드는 다음과 같은 기능을 합니다.

  • ‘시즌’에 입력된 값을 해당 ‘data(데이터)’ 항목 내용에 사용합니다.
  • ‘label(라벨)’로 설정된 값을 해당 항목의 이름으로 사용합니다.

마지막으로 ‘첫 등장’을 항목 이름으로 사용하고, ‘등장’에 입력된 값을 항목 내용으로 사용하는 ‘data’ 항목을 추가하면 다음과 같은 코드가 완성됩니다.

<infobox layout="stacked">
  <title source="이름"><default>{{PAGENAME}}</default></title>
  <image source="그림" />
  <data source="시즌"><label>시즌(s)</label></data>
  <data source="등장"><label>첫 등장</label></data>
</infobox>

이제 이 틀을 위에서 언급한 방식대로 문서에 삽입하면 됩니다. 예를 들자면 다음과 같은 코드를 삽입하면 됩니다.

{{예제
 |이름 = 에다드 스타크
 |그림 = 에다드.jpg
 |시즌 = [[시즌 1|1]]
 |등장 = “[[Winter is Coming]]”
}}

항목 표시Edit

  • 내용 값이 입력되지 않은 항목은 기본적으로 표시되지 않습니다.
  • 단, 그룹 태그를 통해 강제적으로 표시되도록 한 항목은 값이 입력되지 않았더라도 표시됩니다.
  • ‘default’ 값이 설정된 항목은 따로 값을 입력하지 않아도 항상 표시됩니다.
  • 모든 항목이 비어 있을 경우 정보상자 자체가 표시되지 않습니다.

정보상자 스타일Edit

간편 정보상자는 기본적으로 제공되는 스타일을 사용하며, 테마 디자이너에서 설정된 색상을 참고합니다. 필요한 경우 정보상자의 스타일을 수정할 수 있습니다.

레이아웃Edit

정보상자는 두 레이아웃 옵션 중 하나를 사용할 수 있습니다.

기본 레이아웃 ‘Stacked’ 레이아웃
항목 라벨이 항목 내용의 왼쪽에 표시됩니다. 항목 라벨이 항목 내용의 위쪽에 표시됩니다.
<infobox>
   ...
</infobox>
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12.17.png
Screen Shot 2015-06-16 at 12.10.54.png

테마Edit

팬덤에서는 기본적으로 두 개의 정보상자 테마를 제공하고 있습니다. ‘특수기능:위키기능’에서 유로파 테마를 활성화·비활성화함으로써 두 가지 테마 중에서 하나를 선택할 수 있습니다. 유로파 테마를 사용할 경우 위키 내비게이션 색상으로 설정된 색상을 정보상자에서도 사용합니다.

아니면 커뮤니티 CSS를 이용해 사용자 지정 테마를 만들 수도 있습니다. ‘infobox’ 태그에 ‘theme’이나 ‘theme-source’ 속성을 적용함으로써 어느 정보상자에 어느 테마를 적용시킬지 정할 수 있습니다.

  • theme 속성: 해당 정보상자에 정해진 테마를 사용합니다.
  • theme-source 속성: 틀 삽입 과정에서 입력한 값에 따라 테마를 사용합니다.

보다 자세한 사항은 ‘도움말:정보상자/CSS’를 참고하세요.

다중 그림 및 동영상Edit

Infoboxtabs.png

태버 그림

<gallery> 태그를 사용해 정보상자에 다중 그림을 넣을 수 있습니다.

{{예제
 |이름   = 에다드 스타크
 |image  = <gallery>
에다드 1.jpg|말 위의 에다드
에다드 2.jpg|집 안의 에다드
</gallery>
}}

보다 자세한 사항은 이곳을 참고하세요.

정보상자에 동영상을 삽입할 때는 <image> 태그를 사용하면 됩니다. 다중 동영상을 삽입할 때는 각 영상 파일마다 <image> 태그를 사용하면 됩니다.

그룹 태그Edit

Advancedinfobox.png

그룹 태그가 쓰인 정보상자

이제 좀 더 복잡한 정보상자를 만들어 보겠습니다. 옆에 보이는 정보상자를 따라 만들어 봅시다.

이 정보상자는 먼저 세 ‘data’ 항목이 나온 후, 한 ‘title’ 항목, 한 ‘image’ 항목이 나옵니다. 여기서 알 수 있듯이 ‘title’ 항목은 꼭 정보상자 맨 위에 있을 필요는 없습니다.

<infobox layout="stacked">
  <data source="이전"><label>이전</label></data>
  <data source="동시"><label>동시</label></data>
  <data source="이후"><label>이후</label></data>
  <title source="이름" />
  <image source="그림" />
</infobox>
 

그룹 태그로 묶기Edit

<group> 태그를 이용해 여러 항목을 헤더 아래에 하나로 묶을 수 있습니다.

<infobox layout="stacked">
  <data source="이전"><label>이전</label></data>
  <data source="동시"><label>동시</label></data>
  <data source="이후"><label>이후</label></data>
  <title source="이름" />
  <image source="그림" />
  <group>
    <header>상세 정보</header>
    <data source="원인"><label>원인</label></data>
    <data source="일시"><label>일시</label></data>
    <data source="장소"><label>장소</label></data>
    <data source="결과"><label>결과</label></data>
  </group>
</infobox>
 

수평 레이아웃Edit

Screen Shot 2015-06-16 at 13.27.08.png

수평 레이아웃

<group> 태그를 이용해 여러 항목을 수평으로 나열할 수도 있습니다. 그룹 태그에 ‘layout="horizontal"’ 속성을 적용하면 됩니다.

<group layout="horizontal">
   ...
</group>
 

그룹 항목 강제 표시Edit

그룹 태그에 ‘show="incomplete"’ 속성을 추가하면 그룹 내의 항목 중에서 값이 입력되지 않은 항목들도 강제로 표시됩니다. 단, 그룹 내의 항목 중에서 값이 입력된 항목이 단 하나도 없을 경우 적용되지 않습니다.

<group layout="horizontal" show="incomplete">
  <header>진영</header>
  <data source="진영1" />
  <data source="진영2" />
</group>

이런 식으로 만든 코드들을 모두 한데 모으면 다음과 같은 틀이 완성됩니다.

<infobox layout="stacked">
  <data source="이전"><label>이전</label></data>
  <data source="동시"><label>동시</label></data>
  <data source="이후"><label>이후</label></data>
  <title source="이름" />
  <image source="그림" />
  <group>
    <header>상세 정보</header>
    <data source="원인"><label>원인</label></data>
    <data source="일시"><label>일시</label></data>
    <data source="장소"><label>장소</label></data>
    <data source="결과"><label>결과</label></data>
  </group>
  <group layout="horizontal" show="incomplete">
    <header>진영</header>
    <data source="진영1" />
    <data source="진영2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>지휘관</header>
    <data source="지휘관1" />
    <data source="지휘관2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>전력</header>
    <data source="전력1" />
    <data source="전력2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>사상자</header>
    <data source="사상자1" />
    <data source="사상자2" />
  </group>
  <data source="민간인"><label>민간인 사상자</label></data>
</infobox>

문서에 삽입할 때는 다음과 같이 됩니다.

{{전투
 |이전    = [[페어 섬 전투]]
 |동시    = [[올드 윅 포위]]
 |이후    = [[파이크 포위]]
 |이름    = [[그레이트 윅 포위]]
 |그림    = 스타니스 그레이트 윅.png
 |원인    = [[그레이조이의 반란]]
 |일시    = 289 AL
 |장소    = [[강철군도]], [[그레이트 윅]]
 |결과    = [[철왕좌]]의 승리
 |진영1   = [[파일:그레이조이.png|20px|link=그레이조이 가문]] [[그레이조이 가문]]
 |진영2   = [[파일:바라테온.png|20px|link=바라테온 가문]] [[철왕좌]]
 |지휘관1 = 알 수 없음
 |지휘관2 = [[스타니스 바라테온]]
 |사상자1 = 알 수 없음
 |사상자2 = 알 수 없음
}}
 

그룹 여닫기Edit

PI-Collapse.png

그룹 여닫기

그룹 태그에 ‘collapse="open"’이나 ‘collapse="closed"’ 속성을 적용함으로써 여닫기 기능을 추가할 수 있습니다.

<group collapse="closed">
  <header>등장</header>
  <data source="영화" />
  <data source="만화" />
</group>
  • 참고: 여닫기 기능을 추가하기 위해서는 내용이 입력된 헤더 태그가 반드시 그룹 태그 바로 아래에 있어야 합니다.

고급 기능Edit

서식Edit

<format> 태그를 사용하면 데이터에 원하는 서식을 적용할 수 있습니다. 예를 들어 데이터 옆에 아이콘을 추가하거나 링크를 생성할 수 있습니다. 간략한 설명은 다음과 같습니다.

  • 서식 태그를 사용하면 해당 항목에 입력한 값이 서식 태그에 입력된 방식대로 수정되어 표시됩니다. 서식 태그에 항목 값을 반영하기 위해서는 삼중 중괄호 안에 항목 값 이름을 넣어야 합니다.
    • 예: ‘가격’에 입력한 값을 서식 태그에 반영하려면 서식 태그에 {{{가격}}} 코드를 넣어야 함.
  • 항목 값이 입력되지 않은 경우 ‘default’ 값을 표시합니다. ‘default’ 값이 없는 경우 항목을 표시하지 않습니다.

사용 예:

  • 추가 텍스트: <format>{{{가격}}}원</format>
  • 링크: <format>[[{{{장소}}}]]</format>
  • 분류: <format>[[분류:{{{자동자 종류}}}]]</format>

예를 들어, 가격 옆에 {{돈 아이콘}} 틀을 추가하면 다음과 같이 됩니다.

<data source="가격">
  <label>가격</label>
  <format>{{{가격}}} {{돈 아이콘}}</format>
</data>

오른쪽에 보이는 정보상자는 아래와 같은 코드로 이루어져 있습니다.

Field mutators.png

서식 기능이 사용된 정보상자

<header>가격</header>
<data source="흥정">
  <label>흥정 가격</label>
  <format>{{{흥정}}} {{돈 아이콘}}</format>
</data>
<data source="구입">
  <label>일반 가격</label>
  <format>{{{구입}}} {{돈 아이콘}}</format>
</data>
<data source="판매">
  <label>판매 가격</label>
  <format>{{{판매}}} {{돈 아이콘}}</format>
</data>
<data source="무게">
  <label>무게</label>
  <format>{{{무게}}} {{무게 아이콘}}</format>
</data>

파서 함수Edit

정보상자에서 파서 함수를 이용할 수도 있습니다.

코드 결과
<data source="레벨">
  <label>랭크</label>
  <format>오크 {{#switch:{{{레벨}}}
         |1=피언
         |2=그런트
         |그런트
  }}</format>
  <default>오크</default>
</data>

이때, 스위치 함수에서 ‘|=(알 수 없음)’ 같이 아무것도 입력하지 않았을 때를 고려할 필요는 없습니다. 이미 ‘default’ 태그에서 아무것도 입력하지 않았을 때의 값을 정해 놨기 때문입니다.

예시Edit

도움 및 문의Edit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Also on FANDOM

Random Wiki