'''{{{+3 위키문법 정리용 개인페이지}}}'''

[[목차]]

== 문서 링크에 색깔 넣기 ==
{{{
[문서명|<span style="color:#글씨색">링크 표시명]
}}}

[draconianLady(어딘가의 초차원 오픈 카톡방)|<span style="color:#004181">draconianLady]

== 글자 그라데이션 ==
{{{
{{{#!html
<div style="display: inline; color: transparent; background: text linear-gradient(to 방향, #색상1, #색상2)">밈미밈미밈미밈미밈미밈미밈미밈미밈미</div>
}}}
}}}

{{{#!html
<div style="display: inline; color: transparent; background: text linear-gradient(to right, #000000, #ffffff)">밈미밈미밈미밈미밈미밈미밈미밈미밈미</div>
}}}

== 글상자 만들기 ==
{{{
[[HTML(<div style="display: inline-block; background: #상자 색깔; border-radius: 상자 모서리 둥글기px; height: 상자 높이px; width: 상자 너비px; text-align:center;"><span style="display: block; color:#글자 색깔; font-size: 글자 크기px;">글자</div></span>)]]
}}}

[[HTML(<div style="display: inline-block; background: #000000; border-radius: 8px; height: 20px; width: 100px; text-align:center;"><span style="display: block; color:#ffffff; font-size: 12px;">밈밈밈미</div></span>)]]

== 표 내부에서 개행시 생기는 여백 없애기 ==
|| 이렇게 표 내부에서
쌩으로 엔터를 치면
표 아래에 공백이 생깁니다 ||

||이렇게 하면[[br]]공백이[[br]]안생겨요||

{{{
||내용[[br]]내용[[br]]내용||
}}}

== 모바일로 볼때 이미지에 외부이미지 문구 없애기 ==
{{{
[[html(<img src="이미지 주소" width="이미지 크기">)]]
}}}

{{{#!folding 이미지 보기
[[html(<img src="https://i.postimg.cc/LXt1KTnz/image.jpg" width="500px">)]]
}}}

근데 이러면 이미지 크기를 조정했을때 모바일 환경에서 가로 스크롤이 생기는 경우가 있음
이건 밑에 문법을 쓰면 해결됨

== 표 안에 이미지 여백 없애기 ==
{{{
||<table width=표 크기> {{{#!wiki style="margin: -14px -6px"
[[html(<img src="이미지 주소" width="100%">)]]}}} ||
}}}

||<table width=500px><table bordercolor=#ff0000> {{{#!wiki style="margin: -14px -6px"
[[html(<img src="https://i.postimg.cc/8kYyzk5s/image.gif" width="100%">)]]}}} ||

(빨간 테두리는 표 확인용으로 넣은것)

== html에서 details summary 안에 동영상 임베드하기 ==
{{{
||<bordercolor=#ffffff><#ffffff> {{{#!html
<details>
	<summary>폴딩 제목</summary>
}}}
[[media(동영상 링크)]] ||
}}}
||<bordercolor=#ffffff><#ffffff> {{{#!html
<details>
	<summary>CLICK!</summary>
}}}
[[media(https://www.youtube.com/watch?v=_4iZlq9scck)]] ||

표 문법 안에 넣는 이유: 그래야 문단 중간에서 정상작동함(안쓰면 문단 전체가 통으로 접힘)
방법 찾아주신 사랑주 감사합니다

== 배경에 이미지 넣기 ==
{{{
{{{#!html
<div style="background-image: url('이미지 주소'); background-size: contain; background-repeat: no-repeat; height: 높이px; width: 너비px;">
내용
</div>
}}}
}}}

{{{#!html
<div style="background-image: url('https://i.postimg.cc/pTJZv8Tn/2ff90f02231c9115e38868ba4b51a88f.jpg'); background-size: contain; background-repeat: no-repeat; height: 200px; width: 200px;">
밈미<br>밈<br><br><br>밈미미미미미미ㅣ미미밈ㅁ미
</div>
}}}

== 연습장 ==
{{{#!html
<details>
<summary style="padding: 20px; font-size: 1.5em; cursor: pointer;"><b>Party</b></summary>
<div style="width: 100%; position: relative; display: flex; justify-content: center; min-height: 300px;">
	<!-- 인덱스 -->
	<details style="display: inline-block;">
		<!-- 인덱스 숫자(클릭하면 열고 닫는 부분) -->
		<summary style="line-height: 40px; box-sizing: content-box; width: 150px; background-color: navy; color: silver; border: 1px solid white; font-weight: bold; padding: 20px; border-radius: 15px; text-align: center; cursor: pointer;"><i>1</i></summary>
		<!-- 인덱스 내용(클릭하면 보이는 부분) -->
		<div style="width: 50%; left: 0; position: absolute; min-height: 300px; border: 5px solid navy; box-sizing: border-box; border-radius: 15px; padding: 10px; background: white;">
<div style="display: inline-block; padding: 3px 20px; border: 2px solid black; border-radius: 30px; text-align: center; width: 300px; margin-bottom: 10px;">Resistance</div>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 10px;">
        <tr>
<td style="border: 2px solid black; padding: 3px; text-align: center;">1</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">2</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">3</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">4</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">5</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">6</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">7</td>
        </tr>
        <tr>
<td style="border: 2px solid black; padding: 3px; text-align: center;">1</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">2</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">3</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">4</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">5</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">6</td>
<td style="border: 2px solid black; padding: 3px; text-align: center;">7</td>
        </tr>
</table>
<div style="display: inline-block; padding: 3px 20px; border: 2px solid black; border-radius: 30px; text-align: center; width: 300px; margin-bottom: 10px;">Unique Skill</div>
<details style="width: 100%; border: 2px solid black; padding: 5px 15px; margin-bottom: 10px;">
<summary style="text-align: left; cursor: pointer;">밈미의 축복</summary>
<div style="border-top: 1px solid grey; margin: 5px 0px">
파티에 밈미가 있을시 공격력 상승
</div>
</details>
<div style="display: inline-block; padding: 3px 20px; border: 2px solid black; border-radius: 30px; text-align: center; width: 300px; margin-bottom: 10px;">Skills</div>
<details style="width: 100%; border: 2px solid black; padding: 5px 15px; margin-bottom: 5px;">
<summary style="text-align: left; cursor: pointer;">밈미 돌격</summary>
<div style="border-top: 1px solid grey; margin: 5px 0px">
적 1체에게 특대위력 밈미속성 공격
</div>
</details>
<details style="width: 100%; border: 2px solid black; padding: 5px 15px; margin-bottom: 10px;">
<summary style="text-align: left; cursor: pointer;">밈미 폭탄</summary>
<div style="border-top: 1px solid grey; margin: 5px 0px">
적 전체에게 특대위력 밈미속성 공격
</div>
</details>
</div>
	</details>
	<!-- 위의 인덱스 부분을 원하는 갯수 만큼 반복하면 쭉쭉 늘어나요. 굳이 숫자가 아니라 다른 내용물로 해도 되겠지요? -->
	<details style="display: inline-block;">
		<!-- 인덱스 숫자(클릭하면 열고 닫는 부분) -->
		<summary style="line-height: 40px; box-sizing: content-box; width: 150px; background-color: navy; color: silver; border: 1px solid white; font-weight: bold; padding: 20px; border-radius: 15px; text-align: center; cursor: pointer;"><i>2</i></summary>
		<!-- 인덱스 내용(클릭하면 보이는 부분) -->
		<div style="width: 50%; left: 80px; position: absolute; min-height: 300px; border: 5px solid navy; box-sizing: border-box; border-radius: 15px; padding: 10px; background: white;">2번째</div>
	</details>
	<details style="display: inline-block;">
		<!-- 인덱스 숫자(클릭하면 열고 닫는 부분) -->
		<summary style="line-height: 40px; box-sizing: content-box; width: 150px; background-color: navy; color: silver; border: 1px solid white; font-weight: bold; padding: 20px; border-radius: 15px; text-align: center; cursor: pointer;"><i>3</i></summary>
		<!-- 인덱스 내용(클릭하면 보이는 부분) -->
		<div style="width: 50%; right: 180px; position: absolute; min-height: 300px; border: 5px solid navy; box-sizing: border-box; border-radius: 15px; padding: 10px; background: white;">3번째</div>
	</details>
	<details style="display: inline-block;">
		<!-- 인덱스 숫자(클릭하면 열고 닫는 부분) -->
		<summary style="line-height: 40px; box-sizing: content-box; width: 150px; background-color: navy; color: silver; border: 1px solid white; font-weight: bold; padding: 20px; border-radius: 15px; text-align: center; cursor: pointer;"><i>4</i></summary>
		<!-- 인덱스 내용(클릭하면 보이는 부분) -->
		<div style="width: 50%; right: 0; position: absolute; min-height: 300px; border: 5px solid navy; box-sizing: border-box; border-radius: 15px; padding: 10px; background: white;">4번째</div>
	</details>
</div>
</details>
}}}