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

제이위키 유저가이드 Jwiki User Guide
[ 기초문법 ]	[ 고급문법 ]	[ 주제별팁 ]
기초문법 MediaWiki 1. 새문서 생성하기 MediaWiki 2. 목차 만들기 MediaWiki 3. 내용 작성하기 MediaWiki 4. 이미지 첨부하기 MediaWiki 5. 하이퍼링크 걸기 MediaWiki 6. 테이블 만들기 MediaWiki 7. 틀 활용하기 MediaWiki 8. 문서 분류하기 MediaWiki 9. 각주 달아주기 고급문법 MediaWiki I. style, div와 span MediaWiki II. if와 expr, switch MediaWiki III. 변수의 활용 주제별팁 공산1968 '정치' 문서 만들때 TIP '역사' 문서 만들때 TIP WARSAW '전쟁' 문서 만들때 TIP 리반 '국가' 문서 만들때 TIP Ernst '인물' 문서 만들때 TIP 주제 건의하기
에른스트의 아무튼 공방 즉, 공방은 제이위키의 비정식 단체이며, 틀 제작 및 보급, 관리하는 단체입니다. 또한, 같이 단체를 운영할 종업원을 항시 모집 중입니다. 신청은 에른스트의 담벼락에 남겨주십시오.

개별속성

속성 설정하기

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