Fandom

Ko.wikia

도움말:정보상자

519총 문서
개 보유
Add New Page
토론0 Share
90210-infobox-light.png

정보상자 예제

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

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

유용한 정보


정보상자 삽입편집

VE-portableinfobox.png

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

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

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

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

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

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

정보상자 제작편집

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]]”
}}

항목 표시편집

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

정보상자 스타일편집

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

레이아웃편집

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

기본 레이아웃 ‘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

테마편집

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

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

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

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

다중 그림 및 동영상편집

Infoboxtabs.png

태버 그림

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

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

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

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

그룹 태그편집

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>
 

그룹 태그로 묶기편집

<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>
 

수평 레이아웃편집

Screen Shot 2015-06-16 at 13.27.08.png

수평 레이아웃

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

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

그룹 항목 강제 표시편집

그룹 태그에 ‘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 = 알 수 없음
}}
 

그룹 여닫기편집

PI-Collapse.png

그룹 여닫기

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

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

고급 기능편집

서식편집

<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>

파서 함수편집

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

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

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

예시편집

도움 및 문의편집

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.