제이위키/유저가이드/고급문법

제이위키 유저가이드 JWIKI USER GUIDE

[ 기초 문법 ] 기초 문법 새 문서 생성하기 목차 만들기 내용 작성하기 이미지 첨부하기 하이퍼링크 걸기 테이블 만들기 틀 활용하기 문서 분류하기 각주 달아주기 [ 고급 문법 ] 고급 문법 개별 속성 특수 명령어 고급 틀 제작 [ 주제별 팁 ] 정치 주제 팁 전쟁 주제 팁 판타지 주제 팁 언어 주제 팁 종교 주제 팁

본 템플릿(틀)은 의 유저가이드에 관한 것으로, '에른스트의 아무튼 공방'의 일부임을 밝힙니다. '주제별 팁'을 신청하시려면 토론으로 남겨주세요. 신청자는 그 주제에 대한 팁을 마음껏 작성하실 수 잇습니다.

1 개별 속성

1.1 속성 설정하기

Style에 사용되는 속성은 모두 HTML과 CSS에서 파생된 것입니다. 따라서 각종 검색엔진을 통해 HTML, CSS 속성 위주로 탐색할 수 있습니다. 아래의 속성 유형도 검색을 통해 다양한 기능을 추가로 살펴볼 수 있습니다. 나아가 인터넷을 통해 원하는 설정의 속성을 찾을 수 있을 것입니다.

> 색상

속성 명칭	입력한 내용	화면에 표시되는 내용	텍스트 설명
color	<span style="color:orange;"> 오렌지 </span>	오렌지	글자색을 설정합니다.
	style="…… color:[색상]; ……"
background-color	<span style="background-color:orange;"> 오렌지 </span>	오렌지	배경색을 설정합니다.
	style="…… background-color:[색상]; ……"
↓ background-image
linear-gradient	<span style="background-image:linear-gradient(to right, #000, yellow, #fff);"> 그라데이션 </span>	선형 그라데이션	선형 그라데이션을 설정합니다.
	style="…… background-image:linear-gradient([방향 or 각도], [색상1] [색상1 위치], [색상2] [색상2 위치], ……); ……"
linear-gradient [방향]	<span style="background-image:linear-gradient(to top, #000, #fff);"> 그라데이션 방향 </span>	그라데이션 방향	그라데이션 방향을 지정합니다.
linear-gradient [각도]	<span style="background-image:linear-gradient(45deg, #000, #fff);"> 그라데이션 각도 </span>	그라데이션 각도	그라데이션 각도를 지정합니다.
linear-gradient [위치]	<span style="background-image:linear-gradient(to right, gray 50%, gold 80%);"> 그라데이션 위치 </span>	그라데이션 위치	색상 위치를 지정합니다.
repeating-linear-gradient	<span style="background-image:repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%);"> 반복 그라데이션 </span>	반복 그라데이션	그라데이션을 반복합니다.

> 정렬

속성 명칭	입력한 내용	화면에 표시되는 내용	텍스트 설명
text-align	{| style="text-align:right;" | 오른쪽 |}	오른쪽	글자정렬을 설정합니다.
	style="…… text-align:[위치]; ……"
align	(추가 바람)	(추가 바람)	표 좌우정렬을 설정합니다.
	style="…… align:[위치]; ……"
vertical-align	{| | style="vertical-align:bottom;" | [[파일:에른 귀찮음.png|50px]] |}		표 상하정렬을 설정합니다.
	style="…… vertical-align:[위치]; ……"

> 크기

속성 명칭	입력한 내용	화면에 표시되는 내용	텍스트 설명
font-size	<span style="font-size:15pt;"> 15pt </span>	15pt	글자크기을 설정합니다.
	style="…… font-size:[크기]; ……"
width	{| style="width:80px;" | ~		표와 칸의 폭을 설정합니다.
	style="…… width:[크기]; ……"
height	{| style="height:3em;" | ~		표와 칸의 높이를 설정합니다.
	style="…… height:[크기]; ……"

> 테두리

속성 명칭	입력한 내용	화면에 표시되는 내용	텍스트 설명
border	<span style="border: 1px solid orange;"> orange </span>	orange	글자나 표의 테두리를 설정합니다.
	<span style="border: 1px dashed orange;"> dashed </span>	dashed
	style="…… border:[두케] [모양] [색상]; ……"
border-radius	<span style="border: 1px solid orange; border-radius:20%;"> 둥근상자 </span>	둥근상자	모서리의 둥글게 설정합니다.
	style="…… border-radius:[크기]; ……"

> 투명도

속성 명칭	입력한 내용	화면에 표시되는 내용	텍스트 설명
opacity	<span style="opacity:0.5"> 50% </span>	50%	투명도를 설정합니다.
	style="…… opacity:[크기]; ……" 투명도 값은 0(투명) ~ 1(완전 불투명) 사이 값으로 결정됩니다.

> 여백

속성 명칭	입력한 내용	화면에 표시되는 내용	텍스트 설명
padding	(추가 바람)	(추가 바람)	칸 내부의 여백를 설정합니다.
	style="…… padding:[크기]; ……"
margin	(추가 바람)	(추가 바람)	칸 외부의 여백를 설정합니다.
	style="…… margin:[크기]; ……"
letter-spacing	<span style="letter-spacing:5pt"> 5pt </span>	5pt	자간을 설정합니다.
	style="…… letter-spacing:[크기]; ……"
line-height	<span style="line-height:250%"> 250<br/>% </span>	250 %	행간을 설정합니다.
	style="…… line-height:[크기]; ……"

> 스크롤바

속성 명칭	입력한 내용	화면에 표시되는 내용	텍스트 설명
overflow	(추가 바람)	(추가 바람)	스크롤바를 설정합니다.
	style="…… overflow:[속성]; ……" 속성 값) hidden: 숨김 / auto: 지정된 width, height 값을 넘길 때 생성 / scroll: 항상 보임

1.3 div와 span

<div>는 영단어 division의 약자로, 단어처럼 웹사이트에서 각각의 div 요소를 구분하고 적절히 배치함으로써 웹사이트의 레이아웃 중추를 담당하는 태그라고 볼 수 있습니다.

div는 기본적으로 문서의 한 줄 전체를 차지하는 block 속성이며, 여기서 span과의 차이가 있습니다. span은 해당 태그가 작성된 부분에만 적용되는 inline 속성입니다. 물론 style 태그를 수정하여 div를 inline으로, span을 block으로 만들 수도 있습니다.

2 특수 명령어

위키 문법의 특수 명령어는 틀 끼워넣기와 같이 중괄호 두 쌍({{}})으로 사용합니다. 다만 명렁어의 이름이 샵(#)과 함께 맨앞에 부여되어야 합니다.

2.1 expr 함수

expr은 간단한 계산을 할 수 있는 함수로, 다음과 같이 사용합니다.

{{ #expr : 계산식 }}

연산자	기능	예제
-		{{#expr: 123456789012345}} = 1.2345678901234E+14
		{{#expr: 0.000001}} = 1.0E-6
( )	괄호	{{#expr: (30 + 7) * 7 }} = 259
+	양수 부호	{{#expr: +30 * +7}} = 210
-	음수 부호	{{#expr: -30 * -7}} = 210
not	부정문	{{#expr: not 0 * 7}} = 7 {{#expr: not 30+7}} = 7
*	곱셈	{{#expr: 30 * 7}} = 210
/	나눗셈	{{#expr: 30 / 7}} = 4.2857142857143
div	나눗셈. /과 같음	{{#expr: 30 div 7}} = 4.2857142857143 {{#expr: 5 div 2 * 2 + 5 mod 2}} = 6
mod	정수 나눗셈을 한 나머지를 구합니다. 주의: 다른 프로그래밍 언어와 작동 방식이 다릅니다.	{{#expr: 30 mod 7}} = 2 {{#expr: -8 mod -3}} = -2 {{#expr: -8 mod +3}} = -2 {{#expr: 8 mod 2.7}} = 0 {{#expr: 8 mod 3.2}} = 2 {{#expr: 8.9 mod 3}} = 2
+	덧셈	{{#expr: 30 + 7}} = 37
-	뺄셈	{{#expr: 30 - 7}} = 23
round	반올림 계산을 합니다.	{{#expr: 30 / 7 round 3}} = 4.286 {{#expr: 30 / 7 round 0}} = 4 {{#expr: 3456 round -2}} = 3500
=	등호	{{#expr: 30 = 7}} = 0
<>	부등호. 다를 경우에 true=1, 같을 경우에 false=0이 나옵니다.	{{#expr: 30 <> 7}} = 1
!=	부등호. <>와 같습니다.	{{#expr: 1 != 0}} = 1
<	작다	{{#expr: 30 < 7}} = 0
>	크다	{{#expr: 30 > 7}} = 1
<=	작거나 같다	{{#expr: 30 <= 7}} = 0
>=	크거나 같다	{{#expr: 30 >= 7}} = 1
and	Logical AND	{{#expr: 4<5 and 4 mod 2}} = 0
or	Logical OR	{{#expr: 4<5 or 4 mod 2}} = 1

2.2 if 함수

if는 논리 연산자에서 if-then-else에 해당하는 함수입니다. 다음과 같이 사용합니다.

{{ #if : [조건 문자열] | [조건이 참이면 출력될 문장] | [조건이 거짓이면 출력될 문장] }}

조건 문자열의 참/거짓 판단은 조건 문자열이 비어 있으냐입니다. 즉, 조건 문자열이 비어 있지 않을 때 참, 조건 문자열이 비어 있을 때 거짓으로 인식합니다.

조건이 거짓일 때 출력될 문장은 생략할 수 있습니다. 이때는 조건이 거짓일 때 빈 문장으로만 출력됩니다.

2.3 ifeq 함수

두 문자열을 비교하여 같은지 다른지를 판단하는 함수입니다.

{{ #ifeq : [문자열 1] | [문자열 2] | 같을 경우 | 다를 경우 }}

2.4 ifexist 함수

{{ #ifexist : 문서 이름 | 문서가 있을 때 | 문서가 없을 때 }}

2.5 switch 함수

어떤 값에 대하여 함수에 지정된 특정한 값과 동일하면 이에 대응하는 결과값을 출력하는 함수입니다. 다음과 같이 사용합니다.

{{ #switch : [비교할 값]
| [값 1] = [결과 1]
| [값 2] = [결과 2]
| ...
| [값 n] = [결과 n]
| 기본값 }}

즉, [비교할 값]이 [값 1]과 같으면 그 결과로 [결과 1]을 출력하고, [값 2]와 같으면 [결과 2]를 출력하는 방식입니다. 가장 마지막의 기본값은 비교할 값이 함수에 있는 그 어떤 값과도 같지 않을 때 출력됩니다.

3 고급 틀 제작

3.1 변수의 이해

변수란 틀을 다른 문서에 끼워넣기 할 때 편집자가 변수에 해당하는 부분의 내용을 임의로 변경할 수 있는 값을 말합니다. 단순하게는 색을 바꾸는 정도에서, 테이블에 새로운 행을 추가하는 것도 가능합니다.

당연히 변수로 지정되지 않은 부분의 내용은 끼워넣기 할 때 변경할 수 없습니다.

3.2 변수 틀의 기초

틀을 제작할 때 변수는 기본적으로 중괄호 세 쌍({{{변수}}})으로 생성합니다.

{{{1}}} 이것이 변수의 가장 기본적인 형태입니다. 이렇게 중괄호 세 쌍 안의 내용에는 변수의 이름 또는 순서가 들어가게 됩니다. 숫자를 입력하면 변수의 순서를 의미하고, 그외에 숫자가 아닌 문자열을 입력하면 변수의 이름을 의미합니다.

또한 변수의 이름 또는 순서 뒤에 파이프 문자(|)를 넣고 그 뒤에 변수의 기본값을 입력할 수 있습니다. 이 기본값은 해당 변수가 끼워넣기에서 사용되지 않았을 때 기본으로 출력됩니다. 예를 들어 이 변수는 {{{1|기본}}}입니다.와 같은 내용의 틀에서 변수를 사용하지 않고 끼워넣기만 했다면 이 변수는 기본입니다.와 같이 출력될 것입니다. 만약 파이프 문자만 넣고 그 뒤에 내용을 넣지 않으면 변수의 기본값은 공백이 됩니다.

변수는 틀을 끼워넣기 할 때 틀 이름 뒤에 파이프 문자를 넣음으로써 사용하게 되는데, 이때 순서로 입력된 변수는 단순히 변수에 들어갈 내용만을 순서에 맞게 작성하면 됩니다. 다만 이름으로 된 변수는 해당 변수의 이름을 선언한 뒤 등호(=)를 넣고 그 뒤에 변수에 들어갈 내용을 작성해야 합니다. 예를 들어 "abc"라는 제목의 틀 안에 있는 {{{이름변수}}}라는 변수를 사용하기 위해서는 {{abc|이름변수=변수 내용}}처럼 입력해야 합니다.

순서로 입력된 변수도 순서에 해당하는 숫자를 변수 이름처럼 사용할 수 있습니다. 예를 들어 내가 두 번째 변수는 사용하고 싶은데 첫 번째 변수는 사용하고 싶지 않을 때, 변수 이름처럼 2=변수 내용과 같이 사용 가능합니다.

이름 변수와 숫자 변수는 서로 영향을 주지 않습니다. 다시 말해, 이름이 있는 변수는 순서로 된 변수의 순서에 영향을 주지 않는다는 말입니다. {{abc|이름변수=변수 내용|첫 변수}}과 같이 입력하면 "첫 변수"는 {{{1}}}로 된 첫 번째 변수의 내용으로 입력됩니다.