경고: 로그인하지 않았습니다. 편집을 하면 IP 주소가 공개되게 됩니다. 로그인하거나 계정을 생성하면 편집자가 사용자 이름으로 기록되고, 다른 장점도 있습니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!== 중급 == 여기서부터는 문서에 각종 자료를 삽입하거나 문서를 보기 좋게 꾸미는데 사용하는 기술을 설명합니다. [[틀]] 사용법과 [[HTML]]이나 [[CSS]]를 아시면 이해하시기가 쉬울 겁니다. === 각주 === 각주는 어떤 말에 대한 출처나, 부연설명을 문장 속이 아닌 다른 곳에 달아 놓은 말입니다.<ref>이런 식으로요.</ref> 총 사용방법은 <code><nowiki><ref name="이름" group="묶음">코드</ref></nowiki></code>입니다. ; 기본 : 각주를 달 때에는 <code>ref</code> 태그를 사용합니다.<br />단, 이렇게 써두기만 하면 각주 에러가 뜨면서 각주 기능이 작동하지 않습니다. 그러므로 문서 맨 아래쪽 부분에 <code><nowiki>{{각주}}</nowiki></code>를 넣어야 합니다. : {| class="wikitable" ! 입력 ! 결과 ! 설명 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> 내용<ref>각주</ref> </pre> | 내용<ref>각주</ref> | |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> 내용{{ref|각주}}<br />내용{{*|각주}}<br />내용{{ㅈ|각주}} </pre> | 내용{{ref|각주}}<br />내용{{*|각주}}<br />내용{{ㅈ|각주}} | 간단한 틀({{틀|ref}}, {{틀|*}}, {{틀|ㅈ}})을 사용해도 됩니다. |- |} ; 이름(name) : 각주에 이름을 붙이는 것으로, 똑같은 각주를 여러 번 달 때에 사용합니다. 일일이 똑같은 각주를 여러 군데에 달 필요가 없습니다. : {| class="wikitable" ! 입력 ! 결과 ! 설명 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> 내용1<ref name="ref">각주1</ref> 내용2<ref name="ref" /> </pre> | 내용1<ref name="ref">각주1</ref> 내용2<ref name="ref" /> | 같은 각주를 다른 곳에 달 때에는 <code><nowiki><ref name="이름" /></nowiki></code>만 입력합니다.<br />이때 주의할 점은 이름 붙인 각주(<code><nowiki><ref name="이름">각주</ref></nowiki></code>)가 제일 위에 있어야 한다는 것입니다.<br />또한 각주 이름은 숫자로 할 수 없습니다. |- |} ; 묶음(group) : 각주의 종류를 묶는데 사용합니다. 이를 이용하여 부연설명인 각주와 출처 각주를 분리할 수 있습니다. 각주 아래에는 <code><nowiki><references group="묶음" /></nowiki></code>이 필요합니다. : {| class="wikitable" ! 입력 ! 결과 ! 설명 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> 내용1<ref group="참고">부연설명1</ref> 내용2<ref group="참고">부연설명2</ref> 내용3<ref group="출처">출처1</ref> 내용4<ref group="출처">출처2</ref> 부연설명 ---- <references group="참고" /> 출처 ---- <references group="출처" /> </pre> | 내용1<ref group="참고">부연설명1</ref> 내용2<ref group="참고">부연설명2</ref> 내용3<ref group="출처">출처1</ref> 내용4<ref group="출처">출처2</ref> 부연설명 ---- <references group="참고" /> 출처 ---- <references group="출처" /> | 묶음 이름이 각주 번호 앞에 나타납니다. |- |} ==== 인용하기(출처 표시하기) ==== 각주에서 인용 틀을 사용하면 간편하게 [[인용]] 형식에 맞춰 내용의 [[출처]]를 표기할 수 있습니다. 상세한 사용 방법은 각 틀 문서를 참고할 수 있습니다. 웹 페이지의 경우 페이지가 변경되거나 접속이 불가능할 때를 대비해 [[시리즈:지식을 지키는 웹 보존하기|페이지를 보존]]해 둘 수 있습니다. *{{틀|웹 인용}} *{{틀|뉴스 인용}} *{{틀|서적 인용}} *{{틀|저널 인용}} *{{틀|영상 인용}} === 인용문 === {{틀|인용문}}과 {{틀|인용문2}}를 사용하여 인용문을 문서에 넣을 수 있습니다. 둘의 차이점은 따옴표의 유무입니다. 표 안에서는 제대로 작동하지 않으므로, 그때에는 각각 {{틀|인용문/표}}와 {{틀|인용문2/표}}를 사용해주세요. {| class="wikitable" |- ! 입력 ! 결과<ref>실제로는 각각 {{틀|인용문/표}}와 {{틀|인용문2/표}}를 사용했습니다.</ref> |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> {{인용문|펜을 쥔 모든 손에 권리를.|리브레 위키 슬로건}} </pre> | {{인용문/표|펜을 쥔 모든 손에 권리를.|리브레 위키 슬로건}} |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> {{인용문2|{{Lorem ipsum}}}} </pre> | {{인용문2/표|{{Lorem ipsum}}}} |- |} 자세한 사용법은 [[틀:인용문/설명문서]], [[틀:인용문2/설명문서]], [[틀:인용문/표/설명문서]], [[틀:인용문2/표/설명문서]]에 적혀있습니다. === 수식 입력(TeX) === {{본문|도움말:TeX 문법}} 리브레 위키는 수식 입력을 위해 {{TeX}}문법을 지원합니다. 자세한 내용은 [[도움말:TeX 문법]]을 참고하시기 바랍니다. === 코드 입력(syntaxhighlight) === [[C (프로그래밍 언어)|C]]나 [[파이썬]]처럼 [[프로그래밍 언어]]의 코드를 보여줄 때에는 div, pre나 code 태그 등을 사용하여 설명할 수 있습니다. 하지만 syntaxhighlight를 사용하면 에디터처럼 자동으로 구문에 강조나 색이 입혀집니다. 총 사용방법은 <code><nowiki><syntaxhighlight lang="{언어}" line="(line)" start="시작번호" highlight="줄번호" (inline)>코드</syntaxhighlight></nowiki></code>입니다. 편집기상에서 키보드로 직접 탭 문자(<code> </code>)를 입력할 수는 없어, 대신 띄어쓰기(스페이스 바) 4개를 입력하거나 이를 복사해 붙여넣어야 합니다. ; 언어 : 코드에 맞는 언어의 이름을 입력합니다. 지원하는 언어는 아래의 표와 같습니다. : {| class="wikitable" |- ! 입력 ! 결과 ! 설명 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><syntaxhighlight lang="c"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight></pre> | <syntaxhighlight lang="c"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight> | rowspan="2" | C(위)와 파이썬(아래)의 Hello, world! 코드 비교. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><syntaxhighlight lang="python"> print("Hello, world!") </syntaxhighlight></pre> | <syntaxhighlight lang="python"> print("Hello, world!") </syntaxhighlight> |- |} : {| class="wikitable collapsible collapsed" style="width: 100%; font-size: 85%; margin: auto;" ! 지원 언어 목록 (출처: [[mw:Extension:SyntaxHighlight#Supported languages|지원 언어]]) |- | <div style="text-align: center">위키 마크업도 사용하실 수 있습니다. 아직 정식 지원은 안됩니다. 정식 지원이 될때까지 <big>html+handlebars</big>를 이용하시면 됩니다.<ref>Pygments does not yet provide a "wikitext" or "mediawiki" lexer (phab:T29828). Use "html+handlebars" or "moin" instead.</ref></div> <div style="font-weight: bold; margin: auto;">프로그래밍 언어</div> {{세로목록|열너비=15em|목록= * ActionScript * Ada * Agda (literate 포함) * Alloy * AMPL * ANTLR * APL * AppleScript * Assembly (여러 종류) * Asymptote * Augeas * AutoIt * Awk * BBC Basic * Befunge * BlitzBasic * Boa * Boo * Boogie * BrainFuck * C, C++ (아두이노 같은 변형 포함) * C# * Chapel * Charm++ CI * Cirru * Clay * Clean * Clojure * CoffeeScript * ColdFusion * Common Lisp * Component Pascal * Coq * Croc (MiniD) * Cryptol (Literate Cryptol 포함) * Crystal * Cypher * Cython * D * Dart * DCPU-16 * Delphi * Dylan (console 포함) * Eiffel * Elm * Emacs Lisp * Email * Erlang (shell sessions 포함) * Ezhil * Factor * Fancy * Fantom * Fennel * FloScript * Forth * Fortran * FreeFEM++ * F# * GAP * Gherkin (Cucumber) * GLSL shaders * Golo * Gosu * Groovy * Haskell (Literate Haskell 포함) * HLSL * HSpec * Hy * IDL * Idris (Literate Idris 포함) * Igor Pro * Io * Jags * Java * JavaScript * Jasmin * Jcl * Julia * Kotlin * Lasso (templating 포함) * Limbo * LiveScript * Logtalk * Logos * Lua * Mathematica * Matlab * Modelica * Modula-2 * Monkey * Monte * MoonScript * Mosel * MuPad * NASM * Nemerle * NesC * NewLISP * Nimrod * Nit * Notmuch * NuSMV * Objective-C * Objective-J * Octave * OCaml * Opa * OpenCOBOL * ParaSail * Pawn * PHP * Perl 5 * Pike * Pony * PovRay * PostScript * PowerShell * Praat * Prolog * Python (console sessions과 tracebacks 포함) * QBasic * Racket * Raku a.k.a. Perl 6 * REBOL * Red * Redcode * Rexx * Ride * Ruby (irb sessions 포함) * Rust * S, S-Plus, R * Scala * Scdoc * Scheme * Scilab * SGF * Shell scripts (Bash, Tcsh, Fish) * Shen * Silver * Slash * Slurm * Smalltalk * SNOBOL * Snowball * Solidity * SourcePawn * Stan * Standard ML * Stata * Swift * Swig * SuperCollider * Tcl * Tera Term language * TypeScript * TypoScript * USD * Unicon * Urbiscript * Vala * VBScript * Verilog, SystemVerilog * VHDL * Visual Basic.NET * Visual FoxPro * Whiley * Xtend * XQuery * Zeek * Zephir * Zig }} |- | <div style="font-weight: bold; margin: auto;">템플릿 언어</div> {{세로목록|열너비=15em|목록= * Angular templates * Cheetah templates * ColdFusion * Django / Jinja templates * ERB (Ruby templating) * Evoque * Genshi (the Trac template language) * Handlebars</translate> * JSP (Java Server Pages) * Liquid * Myghty (the HTML::Mason based framework) * Mako (the Myghty successor) * Slim * Smarty templates (PHP templating) * Tea * Twig }} |- | <div style="font-weight: bold; margin: auto;">기타 마크업</div> {{세로목록|열너비=15em|목록= * Apache config files * Apache Pig * BBCode * CapDL * Cap'n Proto * CMake * Csound scores * CSS * Debian control files * Diff files * Dockerfiles * DTD * EBNF * E-mail headers * Extempore * Flatline * Gettext catalogs * Gnuplot script * Groff markup * Hexdumps * HTML * HTTP sessions * IDL * Inform * INI-style config files * IRC logs (irssi style) * Isabelle * JSGF notation * JSON, JSON-LD * Lean theorem prover * Lighttpd config files * Linux kernel log (dmesg) * LLVM assembly * LSL scripts * Makefiles * MoinMoin/Trac Wiki markup * MQL * MySQL * NCAR command language * Nginx config files * Nix language * NSIS scripts * Notmuch * POV-Ray scenes * Puppet * QML * Ragel * Redcode * ReST * Roboconf * Robot Framework * RPM spec files * Rql * RSL * Scdoc * SPARQL * SQL, also MySQL, SQLite * Squid configuration * TADS 3 * Terraform * TeX * Thrift * TOML * Treetop grammars * USD (Universal Scene Description) * Varnish configs * VGL * Vim Script * WDiff * Windows batch files * XML * XSLT * YAML * Windows Registry files }} |- |} ; 줄(line) : <code>line="line"</code>을 넣으면 코드 왼쪽에 줄 번호가 추가됩니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><syntaxhighlight lang="c" line="line"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight></pre> | <syntaxhighlight lang="c" line="line"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight> |- |} ; 시작 번호 : 첫 번째 줄의 번호를 설정합니다. ('줄(line)'을 설정해야 함) : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><syntaxhighlight lang="c" line="line" start="100"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight></pre> | <syntaxhighlight lang="c" line="line" start="100"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight> |- |} ; 줄 강조 : 강조하고 싶은 줄 번호를 입력하면, 해당 줄이 다른 색으로 강조됩니다. : {| class="wikitable" |- ! 입력 ! 결과 ! 설명 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><syntaxhighlight lang="c" line="line" highlight="2"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight></pre> | <syntaxhighlight lang="c" line="line" highlight="2"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight> | |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><syntaxhighlight lang="c" line="line" highlight="2,4"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight></pre> | <syntaxhighlight lang="c" line="line" highlight="2,4"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight> | 떨어져 있는 줄들을 강조할 때에는 반점(,)을 사용합니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><syntaxhighlight lang="c" line="line" highlight="3-6"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight></pre> | <syntaxhighlight lang="c" line="line" highlight="3-6"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight> | 연속된 줄들을 강조할 때에는 붙임표(-)를 사용합니다. |- |} ; 인라인(inline) : <code>inline</code>을 넣으면, code 태그를 사용한 것처럼 한 문장 안에 코드를 넣을 수 있습니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 <syntaxhighlight lang="c" inline>return 0;</syntaxhighlight>뒷말 뒷말</pre> | 앞말 앞말 <syntaxhighlight lang="c" inline>return 0;</syntaxhighlight>뒷말 뒷말 |} ; 클래스(class)와 스타일(style) : 다른 태그와 마찬가지로 class와 style을 사용할 수 있습니다. 아래 예시는 style을 사용하여 검은색 테두리를 입혔습니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><syntaxhighlight lang="c" line="line" style="border: 1px solid black;"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight></pre> | <syntaxhighlight lang="c" style="border: 1px solid black;"> #include <stdio.h> int main(void) { printf("Hello, world!\n"); return 0; } </syntaxhighlight> |- |} === 표 === {{참고|도움말:표}} === 사진 넣기 === 사진은 리브레 위키에 업로드한 파일을 문법으로 입력해 사용합니다. 파일을 업로드하는 방법은 [[도움말:파일 올리기]]에서 확인하세요. 단, [http://commons.wikimedia.org/wiki/Main_Page 위키미디어 공용]에 있는 파일은 따로 올리지 않고 그냥 사용할 수 있습니다. ==== 기본 안내 ==== {| class="wikitable" style="margin: auto;" |- ! 기능 ! 입력 |- | 원래 이미지 파일 그대로 사용하고자 할 때 | <code><nowiki>[[파일:File.jpg]]</nowiki></code> |- | 크기를 정하고 싶을 때 | <code><nowiki>[[파일:File.jpg|300px]]</nowiki></code> |- | 위치를 정하고 싶을 때 | <code><nowiki>[[파일:File.jpg|가운데]]</nowiki></code><br /><code><nowiki>[[파일:File.jpg|왼쪽]]</nowiki></code><br /><code><nowiki>[[파일:File.jpg|오른쪽]]</nowiki></code> |- | 한쪽에 글과 함께 표시되도록 하고 싶을 때 | <code><nowiki>[[파일:File.jpg|섬네일]]</nowiki></code> |- | 설명을 추가하고 싶을 때 | <code><nowiki>[[파일:File.jpg|섬네일|설명]]</nowiki></code> |- | 복합 | <code><nowiki>[[파일:File.jpg|섬네일|가운데|900px|설명]]</nowiki></code> |} [[파일:BB61 USS Iowa BB61 broadside USN.jpg|섬네일|220픽셀|위키미디어 공용의 이미지를 불러온 예]] 이미지를 글의 한쪽에 글과 함께 표시되는 섬네일로 넣으면 여백과 테두리가 자동으로 추가됩니다. 컴퓨터 화면에서는 기본적으로 글의 오른쪽에 정해진 크기로 배치되며, 모바일에서는 화면에 따라 알맞은 형태로 표시됩니다. 원할 경우 크기나 정렬을 변경할 수 있습니다. 이미지를 섬네일로 넣을 경우, 함께 나열하는 글의 길이가 짧거나 다른 콘텐츠와 위치에 간섭이 발생하면 컴퓨터 화면에서 이어지는 이미지와 글의 위치가 맞지 않을 수 있습니다. 이 경우 글에서 구분이 필요한 내용 다음에 {{틀|-}}을 입력하여 (이 문단과 같이) 해결할 수 있습니다. (참고: [[도움말:좋은 글 쓰기#이미지와 목록 정렬]]) {{-}} 리브레 위키를 포함한 미디어위키와 디지털 환경에서는 미디어에 보이지 않는 설명인 [[대체 텍스트]]를 추가할 수 있습니다. [[대체 텍스트]]는 검색 엔진이 자료를 찾아 정리하고 시각 장애인이 화면의 내용을 읽어주는 소프트웨어로 문서를 이해하는 데 도움을 줍니다. <code><nowiki>[[파일:File.jpg|섬네일|보이는 설명|alt=보이지 않는 설명]]</nowiki></code>과 같이 입력이 가능합니다. 가능한 상세하게 이해가 가능하도록 적는 것이 좋으며, 장식적 요소 등 설명의 의미를 갖지 못할 경우에는 적지 않는 것이 적합한 경우도 있습니다. 이미지의 가로, 세로 길이를 조절하고 싶으면 <code><nowiki>[[파일:File.jpg|너비x높이px]]</nowiki></code>를 쓰면 됩니다! (svg 파일만 가능하며, 나미저 파일은 가로/세로 비율에 따라 자동으로 조절됨) 너비는 자동으로 조절되고 높이만 고정하고 싶으면 너비를 입력하지 마세요(<code><nowiki>[[파일:File.jpg|x높이px]]</nowiki></code>). ==== 갤러리(여러 이미지 넣기) ==== 갤러리는 여러 이미지를 섬네일로 함께 넣는 기능입니다. 총 사용방법은 <code><nowiki><gallery {변수}>파일|설명|alt=대체 텍스트</gallery></nowiki></code>입니다. ; 기본 : 갤러리로 입력할 때에는 대괄호를 사용하지 않으며, 나머지는 앞서 설명한 사진 넣기 문단과 동일합니다. 또한, '파일:'은 생략할 수 있습니다. : 파일 설명에서 링크를 사용할 때에는 대괄호를 사용합니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- |} ; mode(모드) : 갤러리를 표현하는 방식을 설정합니다. : {| class="wikitable" |- ! colspan="2" | 설명 |- ! 입력 ! 결과 |- | colspan="2" | '''traditional''': 기본값으로, 파일 바깥에 박스가 생깁니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery mode="traditional"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery mode="traditional"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- | colspan="2" | '''nolines''': 'traditional'에서 바깥 박스가 사라지고, 설명이 가운데로 정렬됩니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery mode="nolines"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery mode="nolines"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- | colspan="2" | '''packed''': 'nolines'에서 파일들의 세로 길이를 모두 같게 지정합니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery mode="packed"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery mode="packed"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- | colspan="2" | '''packed-overlay''': 'packed'에서 파일 설명이 파일 아래가 아닌, 파일 내부 하단에 나타납니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery mode="packed-overlay"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery mode="packed-overlay"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- | colspan="2" | '''packed-hover''': 'packed'에서 파일에 커서를 올리면 'packed-overlay'처럼 설명이 나타납니다. 마우스가 없는 모바일에서는 'packed-overlay'와 동일하게 항상 설명이 나타납니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery mode="packed-hover"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery mode="packed-hover"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- | colspan="2" | '''slideshow''': 슬라이드 쇼 형태로 나타나, 파일을 좌우로 넘기며 볼 수 있습니다. 파일이 원본 크기로 나타납니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery mode="slideshow"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery mode="slideshow"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- |} ; 제목(caption) : 갤러리의 제목을 보여줍니다. <code>caption="제목"</code>으로 입력합니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery caption="리브레 위키 공인 캐릭터"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery caption="리브레 위키 공인 캐릭터"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- |} ; 너비(widths)와 높이(heights) : 각 파일의 최대 너비와 최대 높이를 설정합니다. 각각 <code>widths="너비px"</code>, <code>heights="높이px"</code>으로 입력합니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery widths="60px" heights="60px"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery widths="60px" heights="60px"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- |} ; 열수(perrow) : 갤러리에 나타나는 파일의 열 개수를 설정합니다. <code>perrow="열수"</code>로 입력합니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery perrow="2"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery perrow="2"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- |} ; 파일 이름 보여주기(showfilename) : 파일과 파일 설명 사이에 파일 링크가 나타나게 합니다. 링크를 넣고 싶으면, <code>showfilename="yes" 또는 "예"</code>를 입력합니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery showfilename="yes"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery showfilename="yes"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- |} ; 파일 섬네일 보여주기(showthumbnails) : 모드(mode)가 'slideshow'일 때만 사용할 수 있는 변수로, 슬라이드 쇼 밑에 전체 파일의 섬네일을 보여줍니다. 섬네일을 넣고 싶다면 <code>showthumbnails="yes" 또는 "예"</code>를 입력합니다. : 아래의 섬네일을 클릭하면, 슬라이드 쇼가 해당 파일로 바뀝니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery mode="slideshow" showthumbnails="yes"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery mode="slideshow" showthumbnails="yes"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- |} ; 클래스(class)와 스타일(style) : 다른 태그와 마찬가지로 class와 style을 사용할 수 있습니다. 아래 예시는 style을 사용하여 'packed' 갤러리에서 각 파일의 설명을 가운데 정렬했습니다. : {| class="wikitable" |- ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><gallery mode="packed" style="text-align: center;"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery></pre> | <gallery mode="packed" style="text-align: center;"> 파일:리브룬.png|[[리브룬]] 파일:Aggropteryx-1.gif 파일:Original rev.png|레브 파일:ㄴㅁㅇㄹ.png|리버티 </gallery> |- |} 복잡한 문법은 시각 편집기를 활용하면 생각할 필요가 없습니다. <gallery mode="slideshow"> 파일:화면 캡처 2022-07-18 214816.png|시각편집기 화면입니다. 파일:화면 캡처 2022-07-18 215116.png|시각편집기로 갤러리 태그를 쉽게 설정할 수 있습니다. 파일:시각편집기 - 갤러리.png|시각편집기에서 이 버튼을 누르면 갤러리를 넣을 수 있습니다. 파일:화면 캡처 2022-07-18 215921.png|아래 '새 그림 추가' 버튼을 누르면 파일을 찾을 수 있습니다. 위키미디어 공용의 사진도 사용할 수 있습니다. </gallery> ==== 고급 문법 ==== 총 사용 방법은 <code><nowiki>[[파일:파일 이름|형태|테두리|가로정렬|세로정렬|크기|설명|link=링크|alt=대체 텍스트|page=페이지|lang=언어|class=클래스]]</nowiki></code>입니다. 많은 변수를 사용하기 때문에 아래에서 순서대로 차근차근 설명합니다. ; 기본 : {| class="wikitable" |- ! 입력 ! rowspan="2" | 설명 |- ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:Rev Error.png]]</pre> | rowspan="2" | 원래 이미지 파일이 그대로 들어갑니다.<br />파일 바깥에 표나 div가 있으면 해당 크기로 조절되지만, 없으면 원래 파일 크기로 나타나므로 추천하지 않는 방법입니다. |- | [[파일:Rev Error.png]] |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[:파일:Ledibug.png]]</pre> | rowspan="2" | 파일 문서로 링크합니다. |- | [[:파일:Ledibug.png]] |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[:파일:Ledibug.png|]]</pre> | rowspan="2" | 뒤에 '<nowiki>|</nowiki>'를 붙이면, <nowiki>[[:파일:Ledibug.png|Ledibug.png]]</nowiki>로 저장됩니다. (보이는 문구에서 '파일:'이 빠집니다.) |- | [[:파일:Ledibug.png|Ledibug.png]] |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[:파일:Ledibug.png|리디버그]]</pre> | rowspan="2" | 링크처럼 보이는 문구를 바꿀 수 있습니다. |- | [[:파일:Ledibug.png|리디버그]] |- |} ; 형태와 테두리 : 파일이 나타나는 방식을 설정합니다. : {| class="wikitable" |- ! 입력 ! rowspan="2" | 설명 |- ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Rev Error.png|파일 설명]] 뒷말 뒷말</pre> | rowspan="2" | '''(입력하지 않음)''': 블록(block)이 아닌 인라인(inline)으로 나타납니다. '설명'이 나타나지 않습니다. |- | 앞말 앞말 [[파일:Rev Error.png|파일 설명]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Rev Error.png|테두리|파일 설명]] 뒷말 뒷말</pre> | rowspan="2" | '''테두리'''(border): 위의 '(입력하지 않음)'과 동일하지만, 1px 회색 테두리가 같이 나타납니다. (리브레 위키에서는 테두리가 나타나지 않습니다.) |- | 앞말 앞말 [[파일:Rev Error.png|테두리|파일 설명]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Rev Error.png|프레임없음|파일 설명]] 뒷말 뒷말</pre> | rowspan="2" | '''프레임없음'''(frameless): 위의 '(입력하지 않음)'과 동일하지만, 크기가 자동적으로 조절됩니다. |- | 앞말 앞말 [[파일:Rev Error.png|프레임없음|파일 설명]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Rev Error.png|프레임없음|테두리|파일 설명]] 뒷말 뒷말</pre> | rowspan="2" | '''프레임없음 & 테두리'''(frameless & border): 위의 '프레임없음'과 동일하지만, 1px 회색 테두리가 같이 나타납니다. (리브레 위키에서는 테두리가 나타나지 않습니다.) |- | 앞말 앞말 [[파일:Rev Error.png|프레임없음|테두리|파일 설명]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Rev Error.png|프레임|파일 설명]] 뒷말 뒷말</pre> | rowspan="2" | '''프레임'''(frame): 우측 정렬된 블록(block)으로 설정되며, '설명'이 파일 밑에 나타납니다. |- | 앞말 앞말 [[파일:Rev Error.png|프레임|파일 설명]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Rev Error.png|섬네일|파일 설명]] 뒷말 뒷말</pre> | rowspan="2" | '''섬네일'''(thumb/thumbnail): 위의 '프레임'과 동일하지만, 크기가 자동적으로 조절됩니다. |- | 앞말 앞말 [[파일:Rev Error.png|섬네일|파일 설명]] 뒷말 뒷말 |- |} ; 가로정렬 : 파일의 위치(가로)를 설정합니다. : {| class="wikitable" |- ! 입력 ! rowspan="2" | 설명 |- ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''(입력하지 않음)''': 블록(block)이 아닌 인라인(inline)으로 나타납니다. |- | 앞말 앞말 [[파일:Ledibug.png|40px]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|없음|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''없음''': 블록(block)도 인라인(inline)으로도 나타나지 않습니다. |- | 앞말 앞말 [[파일:Ledibug.png|없음|40px]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:Ledibug.png|왼쪽|40px]]</pre> | rowspan="2" | '''왼쪽''': 좌측 정렬된 블록(block)으로 설정됩니다. |- | 앞말 앞말 [[파일:Ledibug.png|왼쪽|40px]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|가운데|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''가운데''': 중앙 정렬된 블록(block)으로 설정됩니다. |- | 앞말 앞말 [[파일:Ledibug.png|가운데|40px]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|오른쪽|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''오른쪽''': 우측 정렬된 블록(block)으로 설정됩니다. (섬네일과 프레임의 기본값) |- | 앞말 앞말 [[파일:Ledibug.png|오른쪽|40px]] 뒷말 뒷말 |- |} ; 세로정렬 : 파일의 위치(세로)를 설정합니다. 파일이 인라인(inline)으로 나타날 때에만 사용할 수 있습니다. : 높이 차이를 보여주기 위해 결과에는 윗줄, 밑줄 또는 첨자를 추가했습니다. : {| class="wikitable" |-v | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''(입력하지 않음)''': 기본값인 '중간'과 동일합니다. |- | 앞말 앞말 [[파일:Ledibug.png|40px]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|위|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''위'''(top), '''글자위'''(text-top): 글자 윗줄에 맞춰 정렬됩니다. |- | <span style="text-decoration: overline;">앞말 앞말 [[파일:Ledibug.png|위|40px]] 뒷말 뒷말</span> |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|위첨자|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''위첨자'''(super): 윗첨자의 밑줄에 맞춰 정렬됩니다. |- | 앞말 앞말<sup><u>위첨자</u></sup> [[파일:Ledibug.png|위첨자|40px]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|밑줄|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''밑줄'''(baseline): 글자의 밑줄에 맞춰 정렬됩니다. |- | <u>앞말 앞말 [[파일:Ledibug.png|밑줄|40px]] 뒷말 뒷말</u> |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|아래첨자|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''아래첨자'''(sub): 아래첨자의 밑줄에 맞춰 정렬됩니다. |- | 앞말 앞말<sub><u>아래첨자</u></sub> [[파일:Ledibug.png|아래첨자|40px]] 뒷말 뒷말 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|중간|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''중간'''(middle): 외부 칸의중간에 맞춰 정렬됩니다. 외부 칸이 없으면 글자의 중간에 맞춥니다. |- | <span style="text-decoration: overline;"><u>앞말 앞말 [[파일:Ledibug.png|중간|40px]] 뒷말 뒷말</u></span> |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">앞말 앞말 [[파일:Ledibug.png|아래|40px]] 뒷말 뒷말</pre> | rowspan="2" | '''아래'''(bottom), '''글자아래'''(text-bottom): 글자 밑줄에 맞춰 정렬됩니다. |- | <u>앞말 앞말 [[파일:Ledibug.png|아래|40px]] 뒷말 뒷말</u> |- |} ; 크기 : 파일의 크기를 설정합니다. '프레임'(frame)으로 설정하면 크기를 조절할 수 없습니다. : {| class="wikitable" |- ! 입력 ! 결과 ! 설명 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:Ledibug.png|30px]]</pre> | [[파일:Ledibug.png|30px]] | '''{가로}px''': 가로 크기가 고정되며, 세로는 그에 비례하여 바뀝니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:Ledibug.png|x50px]]</pre> | [[파일:Ledibug.png|x50px]] | '''x{세로}px''': 세로 크기가 고정되며, 가로는 그에 비례하여 바뀝니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:Ledibug.png|30x50px]]</pre> | [[파일:Ledibug.png|30x50px]] | '''{가로}x{세로}px''': 입력된 값에 알맞게 크기가 바뀝니다. svg파일만 원하는 크기로 설정할 수 있으며, 그 외 파일은 원래 비율을 유지하면서 입력된 값에 최대한 가까운 크기로 나타납니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:Ledibug.png|섬네일|upright=0.5]]</pre> | [[파일:Ledibug.png|섬네일|upright=0.5]] | '''upright=''': '섬네일' 또는 '프레임없음'에서만 사용할 수 있는 변수로, 파일의 배율을 설정합니다. 이 방식을 이용하여 '섬네일' 또는 '프레임없음'으로 설정한 파일의 크기를 키울 수 있습니다. ({가로}x{세로}px 방식으로는 불가능) |- |} ; 설명 : 앞서 설명했다시피, '섬네일' 또는 '프레임'으로 설정해야 파일 밑에 설명이 나타납니다. ; 링크(link) : 파일에 걸 링크를 설정합니다. 링크를 설정하지 않으면, 해당 파일 문서로 링크됩니다. : '테두리' 요소와 함께 사용할 수 없습니다. : {| class="wikitable" |- ! 입력 ! 결과 ! 설명 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:ㄴㅁㅇㄹ.png|150px|link=리브레 위키:공인 캐릭터]]</pre> | [[파일:ㄴㅁㅇㄹ.png|150px|link=리브레 위키:공인 캐릭터]] | '''내부링크''': 리브레 위키에 있는 문서로 링크할 때에는 'link=' 다음에 해당 문서의 이름을 입력합니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:ㄴㅁㅇㄹ.png|150px|link=https://librewiki.net/wiki/]]</pre> | [[파일:ㄴㅁㅇㄹ.png|150px|link=https://librewiki.net/wiki/]] | '''외부링크''': 다른 사이트로로 링크할 때에는 'link=' 다음에 해당 사이트의 주소를 입력합니다. |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;">[[파일:ㄴㅁㅇㄹ.png|150px|link=]]</pre> | [[파일:ㄴㅁㅇㄹ.png|150px|link=]] | '''링크 없음''': 'link=' 다음에 아무것도 입력하지 않으면, 파일에 링크가 걸리지 않아 클릭할 수 없습니다. |- |} ; 대체 텍스트(alt) : [[대체 텍스트]]는 시각 장애인이 화면의 내용을 읽어주는 소프트웨어로 문서를 이해하거나 검색 엔진이 자료를 찾아 정리하는 데 도움을 주는 텍스트로, 일반적으로는 보이지 않습니다. 따라서 이해가 가능하도록 적는 것이 좋으며, 장식적 요소 등 설명의 의미를 갖지 못할 경우에는 적지 않는 것이 적합한 경우도 있습니다. : {| class="wikitable" |- ! 입력 ! 결과 ! 설명 |- | <div style="background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"><nowiki>[[파일:Aggropteryx-1.gif|150px|alt=앉은 채 부리로 </nowiki><br /><nowiki>무언가를 씹는 깃털공룡 형태의 리브레 위키 공인 캐릭터.]]</nowiki></div> | [[파일:Aggropteryx-1.gif|150px|alt=앉은 채 부리로 무언가를 씹는 깃털공룡 형태의 리브레 위키 공인 캐릭터.]] | 앞서 설명했다시피 대체 텍스트는 화면에 표시되지 않습니다. |- |} ; 페이지(page) : pdf 파일을 문서에 넣으면 첫 번째 장이 나타납니다. 위 변수를 사용하면 원하는 페이지를 나타나게 할 수 있습니다. ; 언어(lang) : svg 파일에만 적용할 수 있으며, svg 파일의 systemLanguage에 대응합니다. ; 클래스(class) : CSS의 class를 부여합니다. ==== 이미지 안에 링크를 여러 개 넣기(imagemap) ==== 한 개의 이미지에 여러 개의 링크를 넣을 때에는 아래와 같이 <nowiki><imagelink></nowiki> 태그를 사용하시면 됩니다. <imagemap> Image:NY-6.png|thumb|center|400px|alt=(이미지가 나오지 않을 때 보여주는 대체 문구입니다.) | [[마스코트]] 모음 poly 80 50 80 230 246 234 236 50 [[리브렌]] poly 0 240 180 260 196 319 207 450 0 450 [[리브라]] poly 442 36 361 108 372 282 500 313 500 35 [[리디버그]] rect 200 300 265 360 [[리디버그 볶음밥]] </imagemap> 이 이미지에는 [[리브렌]], [[리브라]], [[리디버그]], [[리디버그 볶음밥]] 총 4개의 링크가 있습니다. <pre> <imagemap> Image:NY-6.png|thumb|center|400px|alt=(이미지가 나오지 않을 때 보여주는 대체 문구입니다.) |[[마스코트]] 모음 poly 80 50 80 230 246 234 236 50 [[리브렌]] poly 0 240 190 240 196 319 207 450 0 450 [[리브라]] poly 442 36 361 108 372 282 500 313 500 35 [[리디버그]] rect 200 300 265 360 [[리디버그 볶음밥]] </imagemap> </pre> 위 링크는 이렇게 구성되어 있습니다. 이 구조를 설명하자면 <pre> <imagemap> Image:(이미지)|섬네일(선택)|(정렬)|(크기)|alt=(이미지가 나오지 않을 때 보여주는 대체 문구입니다.) |(설명) poly 좌표1(x) 좌표1(y) 좌표2(x) 좌표2(y) 좌표3(x) 좌표3(y) ...... [[문서]] rect 좌표1(x) 좌표1(y) 좌표2(x) 좌표2(y) [[문서]] </imagemap> </pre> *이미지 : 파일:xxx.jpg 라는 파일에서 xxx.jpg를 의미합니다. *섬네일 : 섬네일 형식으로 표현하려면 입력합니다. *정렬 : 필요하다면, 이미지의 정렬을 선택합니다. 왼쪽, 가운데, 오른쪽이 있습니다. *크기 : 이미지가 표시될 크기를 선택합니다. 픽셀 단위로 500px 처럼 표현합니다. *alt= 뒤의 내용 : 이미지가 표시되지 않으면 대신 나오는 문구입니다. 일반적으로 잘 뜨지 않습니다. *설명 : 이 그림을 설명하는 내용을 적으면 됩니다. 이 문구 '''전체'''를 <code><nowiki>[[어떤 문서]]</nowiki></code>로 감싸면 안됩니다. 만약 전체를 감쌀 경우, 다음 링크 이전까지의 텍스트가 "전부 이미지의 링크"로 처리되는 문제가 발생합니다. *poly (좌표1, 좌표2, .... 좌표n)[[문서]] : polygon(다각형) 형태로 표현되는 링크 입니다. 입력한 값들을 픽셀형태의 좌표로 인식한 뒤, 그것들을 선으로 이어서, 그 안쪽을 클릭하면 문서로 넘어갈수 있게 해줍니다. *rect (좌표1, 좌표2) [[문서]] : rectangle(직사각형) 형태로 표현됩니다. 두 점을 좌표로 입력받아서 한점은 왼쪽 위, 한점은 오른쪽 아래의 좌표로 인식해서, 그 안쪽을 클릭하면 문서로 넘어갈수 있게 해줍니다. *circle (좌표, 반지름) [[문서]] : circle (원) 형태로 형태로 표현됩니다. 세 값을 입력 받아서 앞의 두값은 x y 좌표, 마지막 값은 반지름 입니다. poly, rect, circle에서의 단위는 픽셀이며, 좌표 기준은 좌측 상단입니다. *default [[문서]] : "위에서 설정하지 않은 나머지 영역"에 대한 문서 링크를 설정합니다. 여기에 필요한 좌표값은 다음과 같은 방법으로 확인 가능합니다. 우선 그림판을 이용해서 좌표를 확인할 수 있습니다. 링크를 달고자 하는 해당 이미지 파일을 받아서 그림판으로 여시고, 선택이나 그리기 툴로 그림위에 갖다대면, 그림판 왼쪽아래에 ╋ 123, 45 px 라고 뜨게됩니다. 그 값이 좌표(x,y)이므로, 편집할때 사용하시면 됩니다. 그보다 더 간단한 방법은 [https://www.image-map.net/ Image-map] 웹페이지를 이용해서 이미지를 올린 다음에 poly, rect, circ 속성 중 하나를 고르고 이미지 위에 마우스로 표시할 수 있습니다. 이후에 Show me the codes 버튼을 누르면 픽셀값이 정확하게 출력되는 것을 알 수 있습니다. === 영상 넣기 === ; 유튜브 영상 : {{틀|YouTube}}을 <code><nowiki>{{YouTube|동영상ID|너비|높이|정렬|설명}}</nowiki></code>과 같이 사용합니다. :* '''동영상ID''' :*: 유튜브 영상의 주소에서 v= 다음 부분입니다. (예를 들어 '''{{외부링크|https://www.youtube.com/watch?v{{=}}1U2DKKqxHgE}}'''의 동영상 ID는 '''1U2DKKqxHgE'''입니다.) :* '''너비'''와 '''높이''' :*: 각각 영상의 너비와 높이를 설정합니다. 넣지 않으면 기본 크기로 설정됩니다. :* '''정렬''' :*: 영상이 정렬되는 방향을 입력합니다. left(기본), right, center가 있습니다. :* '''설명''' :*: 영상에 대한 설명을 넣습니다. 영상 아래에 나타납니다. : {| class="wikitable" ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> {{youtube|1U2DKKqxHgE|300px|200px}} </pre> | {{youtube|1U2DKKqxHgE|300px|200px}} |- |} : 더 자세한 예시는 [[틀:YouTube]]를 참고하세요. ; 카카오TV : {{틀|카카오TV}}를 <code><nowiki>{{카카오TV|동영상ID|너비|높이|정렬|설명}}</nowiki></code>과 같이 사용합니다. :* '''동영상ID''' :: 카카오TV 영상의 주소에서 '''cliplink/'''의 다음에 오는 숫자입니다. (예를 들어 '''{{URL|https://tv.kakao.com/channel/2653435/cliplink/397436050}}'''의 동영상 ID는 '''397436050'''입니다.) :* '''너비''', '''높이''', '''정렬''', '''설명''' :: 앞서 설명한 {{틀|YouTube}}와 쓰임이 같습니다. : {| class="wikitable" ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> {{카카오TV|397436050|300px|200px}} </pre> | {{카카오TV|397436050|300px|200px}} |- |} : 더 자세한 예시는 [[틀:카카오TV]]를 참고하세요. === 주석(Annotation) === 문서를 읽은 때는 보이지 않고 편집 시에만 보이는 주석을 달려면, 주석을 넣을 곳에 <code><nowiki><!-- 주석내용 --></nowiki></code>를 입력합니다. [[HTML]]에서 사용하는 주석과 문법이 같지만 HTML에서 사용하는 주석과는 달리, 브라우저에서 소스 보기를 해도 표시되지 않으며 오로지 편집 창에<!--no-->서만 보인다는 특징이 있습니다. {| class="wikitable" ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> <!-- 보이지 않는 주석 -->보이는 내용 </pre> | <!-- 보이지 않는 주석 -->보이는 내용 |- |} === 위키 문법 무시하기 === 내용의 문자가 위키 문법과 겹쳐 원하는 내용이 제대로 표시되지 않는다면 <code><nowiki><nowiki></nowiki>위키 문법이 무시될 부분<nowiki></nowiki></nowiki></code>으로 일부분에서 위키 문법을 무시하도록 할 수 있습니다. {| class="wikitable" ! 입력 ! 결과 |- | <pre style="white-space: pre-wrap; background: #E0E0E03F; border: none; border-radius: 0; margin: 0; padding: 1em;"> * 위에 있는 건 목록으로 표시되지만, <nowiki><nowiki></nowiki>*<nowiki></nowiki></nowiki> 아래에 있는 건 별표(아스테리스크)로 나타남. </pre> | * 위에 있는 건 목록으로 표시되지만, <nowiki>*</nowiki> 아래에 있는 건 별표(아스테리스크)로 나타남. |- |} === 내용 숨기기/펼치기 === [[틀:숨기기|숨기기 틀]]을 이용하면 됩니다. 자세한 이용방법은 각 항목의 틀 설명문서를 참조하세요. 요약: 이음위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 이음위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요. 또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요! 취소 편집 도움말 (새 창에서 열림) 이 문서는 다음의 숨은 분류 3개에 속해 있습니다: 분류:TemplateStyles 오류가 있는 문서 분류:깨진 파일 링크가 포함된 문서 분류:유튜브 영상이 포함된 문서