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

제이위키 로고.png 제이위키의 규정제이위키 2.0
기본방침 (문서 관리 방침 · 토론 관리 방침 · 이용자 관리 방침) · 편집지침 · 커뮤니티 가이드라인 · 동음이의 리다이렉트 요청
제이위키 로고.png 제이위키의 도움말
도움말 · 유저가이드 (기초문법 · 고급문법 · 정치 창작 팁 · 전쟁 창작 팁 · 판타지 창작 팁 · 언어 창작 팁 · 종교 창작 팁) · 권리침해
Jwiki white logo.pngEgongbang All White Logo.png
제이위키 유저가이드

Jwiki User Guide
[ 기초문법 ]
[ 고급문법 ]
[ 주제별팁 ]
에른스트의 아무튼 공방 즉, 공방제이위키의 인정단체이며, 틀 제작 및 보급, 관리하는 단체입니다. 또한, 같이 단체를 운영할 종업원을 항시 모집 중입니다.
신청은 에른스트의 담벼락에 남겨주십시오.

1 개별속성

1.1 속성 설정하기

Style에 사용되는 속성은 모두 HTMLCSS에서 파생된 것입니다. 따라서 각종 검색엔진을 통해 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>
그라데이션 방향 그라데이션 방향을 지정합니다.[1]
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]]
|}
에른 귀찮음.png 표 상하정렬을 설정합니다.
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:[두케] [모양][2] [색상]; ……"
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 (추가 바람) (추가 바람) 칸 내부의 여백를 설정합니다.[3][4]
style="…… padding:[크기]; ……"
margin (추가 바람) (추가 바람) 칸 외부의 여백를 설정합니다.[5][6]
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.2 속성 설정값 알기

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}}}로 된 첫 번째 변수의 내용으로 입력됩니다.

4 각주

  1. 기본값은 to right, 이며 to left, to top, to bottom 등이 가능합니다.
  2. none:없음 / solid:실선 / dashed: 점선 / dotted: 짧은 점선 / double: 더블라인
  3. 칸 테두리와 내용 사이의 여백
  4. padding-right, padding-top, padding-bottom, padding-left로 방향 별로 다른 값을 설정할 수 있다.
  5. 칸 테두리와 표 외부의 객체 사이의 여백
  6. margin-right, margin-top, margin-bottom, margin-left로 방향 별로 다른 값을 설정할 수 있다.