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

시각위키텍스트

2021년 4월 5일 (월) 19:47 판 (원본 보기) Ernst (토론 | 기여) (→‎속성 설정하기) ← 이전 편집		2023년 5월 15일 (월) 21:46 기준 최신판 (원본 보기) Kimchan (토론 | 기여) 편집 요약 없음
(사용자 3명의 중간 판 44개는 보이지 않습니다)
1번째 줄:		1번째 줄:
	[[분류:제이위키 유저가이드]]		[[분류:제이위키 유저가이드]]
	{{제이위키}}		{{제이위키}}
			{{유저가이드}}
	<div>__TOC__</div>		<div>__TOC__</div>
	{{유저가이드}}		=='''개별 속성'''==
	=='''개별속성'''==
	===속성 설정하기===		===속성 설정하기===
			Style에 사용되는 속성은 모두 [https://ko.wikipedia.org/wiki/HTML HTML]과 [https://ko.wikipedia.org/wiki/CSS CSS]에서 파생된 것입니다. 따라서 각종 검색엔진을 통해 HTML, CSS 속성 위주로 탐색할 수 있습니다. <ins>아래의 속성 유형도 {{글씨 색|red|검색}}을 통해 다양한 기능을 추가로 살펴볼 수 있습니다.</ins> 나아가 인터넷을 통해 원하는 설정의 속성을 찾을 수 있을 것입니다.
	{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;"		{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;"
	|+ style="text-align:left" | > 색상		|+ style="text-align:left" | > 색상
12번째 줄:		14번째 줄:
	! style="width: 20%; background:#880E4F; color:white;" | 텍스트 설명		! style="width: 20%; background:#880E4F; color:white;" | 텍스트 설명
	|-		|-
	|  style="height:3em;" | color		|  rowspan="2" style="height:3em;" | color
	| <nowiki><span style="color:orange;"> 오렌지 </span></nowiki>		| <nowiki><span style="color:orange;"> 오렌지 </span></nowiki>
	| <span style="color:orange;">오렌지</span>		| <span style="color:orange;">오렌지</span>
	| '''글자색'''을 설정합니다.		| '''글자색'''을 설정합니다.
	|-		|-
	|  style="height:3em;" | background-color		| colspan="3" | style="{{글씨 색|lightgrey|……}} color:{{글씨 색|gray|[색상]}}; {{글씨 색|lightgrey|……}}"
			|-
			|  rowspan="2" style="height:3em;" | background-color
	| <nowiki><span style="background-color:orange;"> 오렌지 </span></nowiki>		| <nowiki><span style="background-color:orange;"> 오렌지 </span></nowiki>
	| <span style="background-color:orange;"> 오렌지 </span>		| <span style="background-color:orange;"> 오렌지 </span>
	| '''배경색'''을 설정합니다.		| '''배경색'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} background-color:{{글씨 색|gray|[색상]}}; {{글씨 색|lightgrey|……}}"
	|-		|-
	| colspan="4" style="background:#ffe0f1; font-size:90%;text-align:left;padding-left:35px;" | '''↓ background-image'''		| colspan="4" style="background:#ffe0f1; font-size:90%;text-align:left;padding-left:35px;" | '''↓ background-image'''
	|-		|-
	|  style="height:3em;" | linear-gradient		|  rowspan="2" style="height:3em;" | linear-gradient
	| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:linear-gradient(to right, #000, #fff);"> 그라데이션 </span></nowiki>{{개행 금지 끝}}</div>		| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:linear-gradient(to right, #000, yellow, #fff);"> 그라데이션 </span></nowiki>{{개행 금지 끝}}</div>
	| <span style="background-image:linear-gradient(to right, #000, #fff);"> 그라데이션 </span>		| <span style="background-image:linear-gradient(to right, #000, yellow, #fff);"> 선형 그라데이션 </span>
	| '''선형 그라데이션'''을 설정합니다.		| '''선형 그라데이션'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} background-image:linear-gradient({{글씨 색|gray|[방향 or 각도]}}, {{글씨 색|gray|[색상1] [색상1 위치]}}, {{글씨 색|gray|[색상2] [색상2 위치]}}, {{글씨 색|lightgrey|……}}); {{글씨 색|lightgrey|……}}"
	|-		|-
	|  style="height:3em;" | linear-gradient [방향]		|  style="height:3em;" | linear-gradient [방향]
	| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:linear-gradient(</nowiki>'''{{글씨 색|red|to top,}}'''<nowiki> #000, #fff);"> 그라데이션 </span></nowiki>{{개행 금지 끝}}</div>		| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:linear-gradient(</nowiki>'''{{글씨 색|red|to top,}}'''<nowiki> #000, #fff);"> 그라데이션 방향 </span></nowiki>{{개행 금지 끝}}</div>
	| <span style="background-image:linear-gradient(to top, #000, #fff);"> 그라데이션 </span>		| <span style="background-image:linear-gradient(to top, #000, #fff);"> 그라데이션 방향 </span>
	| '''그라데이션 방향'''을 지정합니다.<ref>기본값은 to right, 이며 to left, to top, to bottom 등이 가능합니다.</ref>		| '''그라데이션 방향'''을 지정합니다.<ref>기본값은 to right, 이며 to left, to top, to bottom 등이 가능합니다.</ref>
	|-		|-
	|  style="height:3em;" | linear-gradient [방향]		|  style="height:3em;" | linear-gradient [각도]
	| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:linear-gradient(</nowiki>'''{{글씨 색|red|45deg,}}'''<nowiki> #000, #fff);"> 그라데이션 </span></nowiki>{{개행 금지 끝}}</div>		| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:linear-gradient(</nowiki>'''{{글씨 색|red|45deg,}}'''<nowiki> #000, #fff);"> 그라데이션 각도 </span></nowiki>{{개행 금지 끝}}</div>
	| <span style="background-image:linear-gradient(45deg, #000, #fff);"> 그라데이션 </span>		| <span style="background-image:linear-gradient(45deg, #000, #fff);"> 그라데이션 각도 </span>
	| '''그라데이션 각도'''를 지정합니다.		| '''그라데이션 각도'''를 지정합니다.
	|-		|-
	|  style="height:3em;" | linear-gradient [위치]		|  style="height:3em;" | linear-gradient [위치]
	| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:linear-gradient(to right, gray </nowiki>'''{{글씨 색|red|50%}}'''<nowiki>, gold </nowiki>'''{{글씨 색|red|50%}}'''<nowiki>);"> 그라데이션 </span></nowiki>{{개행 금지 끝}}</div>		| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:linear-gradient(to right, gray </nowiki>'''{{글씨 색|red|50%}}'''<nowiki>, gold </nowiki>'''{{글씨 색|red|80%}}'''<nowiki>);"> 그라데이션 위치 </span></nowiki>{{개행 금지 끝}}</div>
	| <span style="background-image:linear-gradient(to right, gray 50%, gold 50%);"> 그라데이션 </span>		| <span style="background-image:linear-gradient(to right, gray 50%, gold 80%);"> 그라데이션 위치 </span>
	| '''그라데이션 색상 위치'''를 지정합니다.		| '''색상 위치'''를 지정합니다.
			|-
			|  style="height:3em;" | repeating-linear-gradient
			| <div style="width:290pt;overflow: auto;margin:0px -9px -5px;padding:0px 12px 3px;">{{개행 금지 시작}}<nowiki><span style="background-image:repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%);"> 반복 그라데이션 </span></nowiki>{{개행 금지 끝}}</div>
			| <span style="background-image:repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%);"> 반복 그라데이션 </span>
			| '''그라데이션'''을 반복합니다.
			|-
			|}
			{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;"
			|+ style="text-align:left" | > 정렬
			! style="width: 20%; background:#880E4F; color:white;" | 속성 명칭
			! style="width: 40%; background:#880E4F; color:white;" | 입력한 내용
			! style="width: 20%; background:#880E4F; color:white;" | 화면에 표시되는 내용
			! style="width: 20%; background:#880E4F; color:white;" | 텍스트 설명
			|-
			|  rowspan="2" style="height:3em;" | text-align
			| style="text-align:left;" | <nowiki>{| style="text-align:right;" </nowiki><br/><nowiki>| 오른쪽 </nowiki><br/><nowiki>|}</nowiki>
			| style="text-align:right;" | 오른쪽
			| '''글자정렬'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} text-align:{{글씨 색|gray|[위치]}}; {{글씨 색|lightgrey|……}}"
			|-
			|  rowspan="2" style="height:3em;" | align
			| (추가 바람)
			| (추가 바람)
			| '''표 좌우정렬'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} align:{{글씨 색|gray|[위치]}}; {{글씨 색|lightgrey|……}}"
			|-
			|  rowspan="2" style="height:3em;" | vertical-align
			|  style="text-align:left;" | <nowiki>{|</nowiki><br/><nowiki>| style="vertical-align:bottom;" | [[파일:에른 귀찮음.png|50px]]</nowiki><br/><nowiki>|}</nowiki>
			|  style="vertical-align:bottom;" | [[파일:에른 귀찮음.png|50px]]
			| '''표 상하정렬'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} vertical-align:{{글씨 색|gray|[위치]}}; {{글씨 색|lightgrey|……}}"
			|-
			|}
			{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;"
			|+ style="text-align:left" | > 크기
			! style="width: 20%; background:#880E4F; color:white;" | 속성 명칭
			! style="width: 40%; background:#880E4F; color:white;" | 입력한 내용
			! style="width: 20%; background:#880E4F; color:white;" | 화면에 표시되는 내용
			! style="width: 20%; background:#880E4F; color:white;" | 텍스트 설명
			|-
			|  rowspan="2" style="height:3em;" | font-size
			| <nowiki><span style="font-size:15pt;"> 15pt </span></nowiki>
			| <span style="font-size:15pt;"> 15pt </span>
			| '''글자크기'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} font-size:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"
			|-
			| rowspan="2" style="height:3em;" | width
			| <nowiki>{| style="width:80px;" | ~ </nowiki>
			|
			| 표와 칸의 '''폭'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} width:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"
			|-
			| rowspan="2" style="height:3em;" | height
			| <nowiki>{| style="height:3em;" | ~ </nowiki>
			|
			| 표와 칸의 '''높이'''를 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} height:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"
			|-
			|}
			{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;"
			|+ style="text-align:left" | > 테두리
			! style="width: 20%; background:#880E4F; color:white;" | 속성 명칭
			! style="width: 40%; background:#880E4F; color:white;" | 입력한 내용
			! style="width: 20%; background:#880E4F; color:white;" | 화면에 표시되는 내용
			! style="width: 20%; background:#880E4F; color:white;" | 텍스트 설명
			|-
			|  rowspan="3" style="height:3em;" | border
			| <nowiki><span style="border: 1px solid orange;"> orange </span></nowiki>
			| <span style="border: 1px solid orange;"> orange </span>
			| rowspan="2" | 글자나 표의 '''테두리'''를 설정합니다.
			|-
			| <nowiki><span style="border: 1px dashed orange;"> dashed </span></nowiki>
			| <span style="border: 1px dashed orange;"> dashed </span>
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} border:{{글씨 색|gray|[두케]}} {{글씨 색|gray|[모양]}}<ref>none:없음 / solid:실선 / dashed: 점선 / dotted: 짧은 점선 / double: 더블라인</ref> {{글씨 색|gray|[색상]}}; {{글씨 색|lightgrey|……}}"
			|-
			|  rowspan="2" style="height:3em;" | border-radius
			| <nowiki><span style="border: 1px solid orange;</nowiki><br/><nowiki>border-radius:20%;"> 둥근상자 </span></nowiki>
			| <span style="border: 1px solid orange; border-radius:20%;"> 둥근상자 </span>
			| '''모서리'''의 둥글게 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} border-radius:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"
			|-
			|}
			{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;"
			|+ style="text-align:left" | > 투명도
			! style="width: 20%; background:#880E4F; color:white;" | 속성 명칭
			! style="width: 40%; background:#880E4F; color:white;" | 입력한 내용
			! style="width: 20%; background:#880E4F; color:white;" | 화면에 표시되는 내용
			! style="width: 20%; background:#880E4F; color:white;" | 텍스트 설명
			|-
			|  rowspan="2" style="height:3em;" | opacity
			| <nowiki><span style="opacity:0.5"> 50% </span></nowiki>
			| <span style="opacity:0.5"> 50% </span>
			| '''투명도'''를 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} opacity:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"<br/>투명도 값은 0(투명) ~ 1(완전 불투명) 사이 값으로 결정됩니다.
	|-		|-
	|}		|}
			{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;"
			|+ style="text-align:left" | > 여백
			! style="width: 20%; background:#880E4F; color:white;" | 속성 명칭
			! style="width: 40%; background:#880E4F; color:white;" | 입력한 내용
			! style="width: 20%; background:#880E4F; color:white;" | 화면에 표시되는 내용
			! style="width: 20%; background:#880E4F; color:white;" | 텍스트 설명
			|-
			|  rowspan="2" style="height:3em;" | padding
			| <nowiki>(추가 바람)</nowiki>
			| (추가 바람)
			| 칸 내부의 '''여백'''를 설정합니다.<ref>칸 테두리와 내용 사이의 여백</ref><ref>padding-right, padding-top, padding-bottom, padding-left로 방향 별로 다른 값을 설정할 수 있다.</ref>
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} padding:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"
			|-
			|  rowspan="2" style="height:3em;" | margin
			| <nowiki>(추가 바람)</nowiki>
			| (추가 바람)
			| 칸 외부의 '''여백'''를 설정합니다.<ref>칸 테두리와 표 외부의 객체 사이의 여백</ref><ref>margin-right, margin-top, margin-bottom, margin-left로 방향 별로 다른 값을 설정할 수 있다.</ref>
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} margin:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"
			|-
			|  rowspan="2" style="height:3em;" | letter-spacing
			| <nowiki><span style="letter-spacing:5pt"> 5pt </span></nowiki>
			| <span style="letter-spacing:5pt"> 5pt </span>
			| '''자간'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} letter-spacing:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"
			|-
			|  rowspan="2" style="height:3em;" | line-height
			| <nowiki><span style="line-height:250%"> 250<br/>% </span></nowiki>
			| <span style="line-height:250%"> 250<br/>% </span>
			| '''행간'''을 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} line-height:{{글씨 색|gray|[크기]}}; {{글씨 색|lightgrey|……}}"
			|-
			|}
			{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;"
			|+ style="text-align:left" | > 스크롤바
			! style="width: 20%; background:#880E4F; color:white;" | 속성 명칭
			! style="width: 40%; background:#880E4F; color:white;" | 입력한 내용
			! style="width: 20%; background:#880E4F; color:white;" | 화면에 표시되는 내용
			! style="width: 20%; background:#880E4F; color:white;" | 텍스트 설명
			|-
			|  rowspan="2" style="height:3em;" | overflow
			| <nowiki>(추가 바람)</nowiki>
			| (추가 바람)
			| '''스크롤바'''를 설정합니다.
			|-
			| colspan="3" | style="{{글씨 색|lightgrey|……}} overflow:{{글씨 색|gray|[속성]}}; {{글씨 색|lightgrey|……}}"<br/>속성 값) hidden: 숨김 / auto: 지정된 width, height 값을 넘길 때 생성 / scroll: 항상 보임
			|-
			|}
			===속성 설정 값 알기===
	===div와 span===		===div와 span===
			<nowiki><div></nowiki>는 영단어 division의 약자로, 단어처럼 웹사이트에서 각각의 div 요소를 구분하고 적절히 배치함으로써 웹사이트의 레이아웃 중추를 담당하는 태그라고 볼 수 있습니다.
			div는 기본적으로 문서의 한 줄 전체를 차지하는 block 속성이며, 여기서 span과의 차이가 있습니다. span은 해당 태그가 작성된 부분에만 적용되는 inline 속성입니다. 물론 style 태그를 수정하여 div를 inline으로, span을 block으로 만들 수도 있습니다.
	=='''특수명령어'''==		=='''특수 명령어'''==
			위키 문법의 특수 명령어는 틀 끼워넣기와 같이 중괄호 두 쌍({{폰트|monospace|<nowiki>{{}}</nowiki>}})으로 사용합니다. 다만 명렁어의 이름이 샵({{폰트|monospace|<nowiki>#</nowiki>}})과 함께 맨앞에 부여되어야 합니다.
	===expr 함수===		===expr 함수===
			expr은 간단한 계산을 할 수 있는 함수로, 다음과 같이 사용합니다.
			<pre>{{ #expr : 계산식 }}</pre>
			{| class="wikitable" style="width: 100%;"
			! 연산자
			! 기능
			! style="width:50%" | 예제
			|-
			|rowspan="2" colspan="2" align="center"| -
			||<nowiki>{{#expr: 123456789012345}}</nowiki> = {{#expr: 123456789012345}}
			|-
			||<nowiki>{{#expr: 0.000001}}</nowiki> = {{#expr: 0.000001}}
			|-
			! ( )
			|| 괄호
			||<nowiki>{{#expr: (30 + 7) * 7 }}</nowiki> = {{#expr: (30 + 7) * 7 }}
			|-
			! +
			|| 양수 부호
			||{&#123;#expr: <code>+</code>30 * <code>+7</code>&#125;} = {{#expr: +30 * +7}}
			|-
			! -
			|| 음수 부호
			||{&#123;#expr: <code>-</code>30 * <code>-</code>7&#125;} = {{#expr: -30 * -7}}
			|-
			! not
			|| 부정문
			||<nowiki>{{#expr: not 0 * 7}}</nowiki> = {{#expr: not 0 * 7}}<br /><nowiki>{{#expr: not 30+7}}</nowiki> = {{#expr: not 30+7}}
			|-
			! *
			|| 곱셈
			||<nowiki>{{#expr: 30 * 7}}</nowiki> = {{#expr: 30 * 7}}
			|-
			! /
			|| 나눗셈
			||<nowiki>{{#expr: 30 / 7}}</nowiki> = {{#expr: 30 / 7}}
			|-
			! div
			|| 나눗셈. '''/'''과 같음
			||<nowiki>{{#expr:&#160;30&#160;div&#160;7}}</nowiki>&#160;=&#160;{{#expr: 30 div 7}}<br /><nowiki>{{#expr: 5 div 2 * 2 + 5 mod 2}}</nowiki> = {{#expr: 5 div 2 * 2 + 5 mod 2}}
			|-
			! mod
			|| 정수 나눗셈을 한 나머지를 구합니다.
			'''주의: 다른 프로그래밍 언어와 작동 방식이 다릅니다.'''
			||<nowiki>{{#expr: 30 mod 7}}</nowiki> = {{#expr: 30 mod 7}}<br />{&#123;#expr: <code>-</code>8 mod <code>-</code>3&#125;} = {{#expr: -8 mod -3}}<br />{&#123;#expr: <code>-</code>8 mod <code>+</code>3&#125;} = {{#expr: -8 mod +3}}<br /><nowiki>{{#expr: 8 mod 2.7}}</nowiki> = {{#expr: 8 mod 2.7}}<br /><nowiki>{{#expr: 8 mod 3.2}}</nowiki> = {{#expr: 8 mod 3.2}}<br /><nowiki>{{#expr: 8.9 mod 3}}</nowiki> = {{#expr: 8.9 mod 3}}
			|-
			! <code>+</code>
			|| 덧셈
			|| {&#123;#expr: 30 <code>+</code> 7&#125;} = {{#expr: 30 + 7}}
			|-
			! <code>-</code>
			|| 뺄셈
			|| {&#123;#expr: 30 <code>-</code> 7&#125;} = {{#expr: 30 - 7}}
			|-
			! round
			|| 반올림 계산을 합니다.
			||<nowiki>{{#expr: 30 / 7 round 3}}</nowiki> = {{#expr: 30 / 7 round 3}}<br /><nowiki>{{#expr: 30 / 7 round 0}}</nowiki> = {{#expr: 30 / 7 round 0}}<br /><nowiki>{{#expr: 3456 round -2}}</nowiki> = {{#expr: 3456 round -2}}
			|-
			! =
			|| 등호
			||<nowiki>{{#expr: 30 = 7}}</nowiki> = {{#expr: 30 = 7}}
			|-
			! &lt;&gt;
			|| 부등호. 다를 경우에 true=1, 같을 경우에 false=0이 나옵니다.
			||<nowiki>{{#expr: 30 &lt;&gt; 7}}</nowiki> = {{#expr: 30 <> 7}}
			|-
			!| !=
			|| 부등호. &lt;&gt;와 같습니다.
			||<nowiki>{{#expr: 1 != 0}}</nowiki> = {{#expr: 1 != 0}}
			|-
			! &lt;
			|| 작다
			||<nowiki>{{#expr: 30 &lt; 7}}</nowiki> = {{#expr: 30 < 7}}
			|-
			! &gt;
			|| 크다
			||<nowiki>{{#expr: 30 &gt; 7}}</nowiki> = {{#expr: 30 > 7}}
			|-
			! &lt;=
			|| 작거나 같다
			||<nowiki>{{#expr: 30 &lt;= 7}}</nowiki> = {{#expr: 30 <= 7}}
			|-
			! &gt;=
			|| 크거나 같다
			||<nowiki>{{#expr: 30 &gt;= 7}}</nowiki> = {{#expr: 30 >= 7}}
			|-
			! and
			|| Logical AND
			||<nowiki>{{#expr: 4&lt;5 and 4 mod 2}}</nowiki> = {{#expr: 4<5 and 4 mod 2}}
			|-
			! or
			|| Logical OR
			||<nowiki>{{#expr: 4&lt;5 or 4 mod 2}}</nowiki> = {{#expr: 4<5 or 4 mod 2}}
			|}
	===if 함수===		===if 함수===
			if는 논리 연산자에서 if-then-else에 해당하는 함수입니다. 다음과 같이 사용합니다.
			<pre>{{ #if : [조건 문자열] | [조건이 참이면 출력될 문장] | [조건이 거짓이면 출력될 문장] }}</pre>
			조건 문자열의 참/거짓 판단은 '''조건 문자열이 비어 있으냐'''입니다. 즉, 조건 문자열이 비어 있지 않을 때 참, 조건 문자열이 비어 있을 때 거짓으로 인식합니다.
			조건이 거짓일 때 출력될 문장은 생략할 수 있습니다. 이때는 조건이 거짓일 때 빈 문장으로만 출력됩니다.
			===ifeq 함수===
			두 문자열을 비교하여 같은지 다른지를 판단하는 함수입니다.
			<pre>{{ #ifeq : [문자열 1] | [문자열 2] | 같을 경우 | 다를 경우 }}</pre>
			===ifexist 함수===
			<pre>{{ #ifexist : 문서 이름 | 문서가 있을 때 | 문서가 없을 때 }}</pre>
	===switch 함수===		===switch 함수===
			어떤 값에 대하여 함수에 지정된 특정한 값과 동일하면 이에 대응하는 결과값을 출력하는 함수입니다. 다음과 같이 사용합니다.
			<pre>{{ #switch : [비교할 값]
			| [값 1] = [결과 1]
			| [값 2] = [결과 2]
			| ...
			| [값 n] = [결과 n]
			| 기본값 }}</pre>
	=='''고급틀 제작'''==		즉, [비교할 값]이 [값 1]과 같으면 그 결과로 [결과 1]을 출력하고, [값 2]와 같으면 [결과 2]를 출력하는 방식입니다. 가장 마지막의 기본값은 비교할 값이 함수에 있는 그 어떤 값과도 같지 않을 때 출력됩니다.
			=='''고급 틀 제작'''==
	===변수의 이해===		===변수의 이해===
	===변수틀의 기초===		변수란 틀을 다른 문서에 끼워넣기 할 때 편집자가 변수에 해당하는 부분의 내용을 임의로 변경할 수 있는 값을 말합니다. 단순하게는 색을 바꾸는 정도에서, 테이블에 새로운 행을 추가하는 것도 가능합니다.
			당연히 변수로 지정되지 않은 부분의 내용은 끼워넣기 할 때 변경할 수 없습니다.
			===변수 틀의 기초===
			틀을 제작할 때 변수는 기본적으로 중괄호 세 쌍({{폰트|monospace|<nowiki>{{{변수}}}</nowiki>}})으로 생성합니다.
			<nowiki>{{{1}}}</nowiki> 이것이 변수의 가장 기본적인 형태입니다. 이렇게 중괄호 세 쌍 안의 내용에는 변수의 '''이름''' 또는 '''순서'''가 들어가게 됩니다. 숫자를 입력하면 변수의 '''순서'''를 의미하고, 그외에 숫자가 아닌 문자열을 입력하면 변수의 '''이름'''을 의미합니다.
			또한 변수의 이름 또는 순서 뒤에 파이프 문자({{폰트|monospace|<nowiki>|</nowiki>}})를 넣고 그 뒤에 변수의 기본값을 입력할 수 있습니다. 이 기본값은 해당 변수가 끼워넣기에서 사용되지 않았을 때 기본으로 출력됩니다. 예를 들어 {{폰트|monospace|이 변수는 <nowiki>{{{1|기본}}}</nowiki>입니다.}}와 같은 내용의 틀에서 변수를 사용하지 않고 끼워넣기만 했다면 {{폰트|monospace|이 변수는 기본입니다.}}와 같이 출력될 것입니다. 만약 파이프 문자만 넣고 그 뒤에 내용을 넣지 않으면 변수의 기본값은 공백이 됩니다.
			변수는 틀을 끼워넣기 할 때 틀 이름 뒤에 파이프 문자를 넣음으로써 사용하게 되는데, 이때 순서로 입력된 변수는 단순히 변수에 들어갈 내용만을 순서에 맞게 작성하면 됩니다. 다만 이름으로 된 변수는 해당 변수의 이름을 선언한 뒤 등호({{폰트|monospace|<nowiki>=</nowiki>}})를 넣고 그 뒤에 변수에 들어갈 내용을 작성해야 합니다. 예를 들어 "abc"라는 제목의 틀 안에 있는 {{폰트|monospace|<nowiki>{{{이름변수}}}</nowiki>}}라는 변수를 사용하기 위해서는 {{폰트|monospace|<nowiki>{{abc|이름변수=변수 내용}}</nowiki>}}처럼 입력해야 합니다.
			순서로 입력된 변수도 순서에 해당하는 숫자를 변수 이름처럼 사용할 수 있습니다. 예를 들어 내가 두 번째 변수는 사용하고 싶은데 첫 번째 변수는 사용하고 싶지 않을 때, 변수 이름처럼 {{폰트|monospace|<nowiki>2=변수 내용</nowiki>}}과 같이 사용 가능합니다.
			이름 변수와 숫자 변수는 서로 영향을 주지 않습니다. 다시 말해, 이름이 있는 변수는 순서로 된 변수의 순서에 영향을 주지 않는다는 말입니다. {{폰트|monospace|<nowiki>{{abc|이름변수=변수 내용|첫 변수}}</nowiki>}}과 같이 입력하면 "첫 변수"는 <nowiki>{{{1}}}</nowiki>로 된 첫 번째 변수의 내용으로 입력됩니다.
			=='''각주'''==

---

2023년 5월 15일 (월) 21:46 기준 최신판

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

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

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

개별 속성

속성 설정하기

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: 항상 보임

div와 span

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

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

특수 명령어

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

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

if 함수

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

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

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

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

ifeq 함수

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

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

ifexist 함수

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

switch 함수

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

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

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

고급 틀 제작

변수의 이해

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

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

변수 틀의 기초

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

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

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

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

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

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