연습장:Kimchan: 두 판 사이의 차이

2022년 10월 19일 (수) 13:42 판

분류:

김찬
관련 문서

[ 펼치기 · 접기 ]

활동 (제이위키) · 사상 · 게임 · 파일 (아이펠루스)
자캐 · 여담 · 군복무 · 단문 (결말 이후의 이야기)
소속 단체	에른스트의 아무튼 공방 · 오펜시브 프로젝트 팀
창작 작품	세계관 프로젝트 [보기] (아이펠루스 · 우리는 죽음 속에 살고 있다 · 뒤편 · 아파란시아 · 프로젝트 옴니버스 · 프로젝트 사쿠라 · 초상세계 · 프로젝트 무협) · 슬래시 앤 서바이브 · 글로리 어게인 · 저승국 등
기여 작품	무도학당 · 칠성고등학교 · 퇴귀야담 · 벌레굴 등
주요 자캐	아릴렌 · 세이넬 아르젠베르크 · 사도원 · 서은우 등
관련 문서	연습장 · CSS · Lua · 분류 · 프로필
이 사용자와 관련한 세계관은 여기를, 생성한 틀은 여기를 참고하십시오.
KimChan

김찬 연습장
연습장
메모	낙서	노트		연구	팁		공부	모듈
틀			CSS			Lua

빈칸 편집 바로가기
이 구간은 문법 연습 등의 목적으로 사용됩니다.

빈칸

틀

유용한/자주 사용하는 틀

제작한 틀

자세한 내용은 분류:김찬/제작한 틀 문서를 참고하십시오.

팁

모바일 기기의 화면비를 넘어가는 너비(ex: 600px, 800px)를 가진 테이블을 모바일에서 넘어가지 않도록 대응하는 법

간단하다. 테이블의 width 속성을 max-width로 바꾸어 주면 된다. 단 주의할 점은, 테이블 내부의 콘텐츠가 설정한 max-width만큼이 될 정도로 충분한 분량을 차지하고 있어야 한다. 가장 쉬운 파훼법은 테이블 어느 곳에라도 모든 열이 병합된 행에 원본 크기가 큰 이미지를 첨부하면 된다. 혹은 틀:너비맞춤을 이용하는 방법도 있다.

이미지에 아무런 링크도 걸지 않았을 때 원본 이미지 보기로 이어지는 자동 링크를 없애는 법

이미지의 매개 변수에 link=를 걸고 아무것도 작성하지 않으면 된다. 예를 들어 [[파일:Seinel Icon.png|20픽셀|link=]] 이렇게 입력하면 이처럼 이미지 위에 마우스를 올려도 그 어떤 링크는커녕 원본 이미지 보기로 이어지는 자동 링크마저 없다.

순환 링크(문서가 같은 문서를 링크)나 테이블의 헤더 셀에서 강제 볼드체를 없애는 법

텍스트를 <span>으로 묶고 style에서 font-weight를 normal로 하면 된다. 틀:nobold로 간편하게 사용할 수 있다.

배경이 아닌 곳에 그라데이션을 적용하는 법

텍스트

텍스트를 <span>으로 묶고 style에서 background로 그라데이션을 적용한 뒤, -webkit-background-clip: text; color: transparent;를 추가로 입력하면 된다. 전자는 그라데이션의 적용 범위를 텍스트로만 하는 것이고, 후자는 그라데이션이 적용된 배경이 보이도록 하기 위해 텍스트 자체 색상을 투명으로 만든 것이다.

틀:그라데이션 글씨로 간편하게 사용할 수 있다.

입력	출력
<span style="background: linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple); -webkit-background-clip: text; color: transparent; font-size: 14pt;">'''무지개색 총공격이다!'''</span>	무지개색 총공격이다!
{{font-gradient\|linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple);\|{{fontsize\|14\|'''무지개색 총공격이다!'''}}}}	무지개색 총공격이다!

테두리

원리는 간단하다. 테두리를 투명(transparent)으로 적용한 뒤 배경 그라데이션을 테두리 안쪽 여백(padding)에서 흰색으로, 테두리(border)를 원하는 그라데이션으로 적용하면 된다. 문법은 다음과 같이 입력한다.

입력	출력
<div style="border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #fb0055, #ff9b00) border-box; border-radius:5px;">제이위키</div>	제이위키

하나의 링크 안에 이미지와 텍스트를 함께 넣는 법

일반적으로는 하나의 링크 안에 이미지와 텍스트를 함께 넣을 수 없다. 예를 들어 [[제이위키|[[파일:제윜 로고2.svg|60px|link=]] 제이위키]] 이렇게 입력한다고 해도 [[제이위키| 제이위키]] 이처럼 링크 자체가 인식되지 못하고 깨져 버린다.

그러나 링크를 제이위키 내부 링크(대괄호 두 개 [[]])가 아닌 대괄호 한 개, 즉 외부 링크로 사용하면 가능하다. 단, 이때 파일에 |link=를 넣어서 반드시 원본 파일로 이동하는 링크를 없앨 것.

입력	출력
[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜_로고2.svg\|60px\|link=]] 제이위키]	제이위키

여기서 외부 링크 표시를 숨기는 plainlinks 클래스까지 사용하면

입력	출력
<span class="plainlinks">[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜_로고2.svg\|60px\|link=]] 제이위키]</span>	제이위키
{{외부링크숨김\|https://jwiki.kr/wiki/index.php/제이위키\|[[파일:제윜_로고2.svg\|60px\|link=]] 제이위키}}
{{외부링크숨김\|type=jwiki\|제이위키\|[[파일:제윜_로고2.svg\|60px\|link=]] 제이위키}}

더 완벽하게 사용할 수 있다. 외부 링크를 사용하기 때문에 제이위키 내 문서가 아니라 어떤 링크에도 사용할 수 있고, 제이위키 내 문서로 통하는 링크라면 편집을 저장할 때 뜨는 간단한 덧셈뺄셈이 나오지 않는 것도 장점이라면 장점이다. 단점이라면 마우스를 위에 올렸을 때 나타나는 문서 미리보기나 제목은 뜨지 않고, 문서가 문서 자신을 링크해도 링크가 사라지며 볼드체로 바뀌지 않고 링크 그대로 남아 있다는 것.

외부 링크를 넣은 이미지에 외부 링크 아이콘을 띄우는 법

[[파일:유튜브 아이콘.png|20px|link=https://www.youtube.com/]] 이렇게 파일 link에 외부 링크를 넣으면 외부 링크로 통하는 이미지가 만들어지지만 외부 링크임을 나타내는 아이콘은 나타나지 않는다. 방법은 바로 위 문단과 비슷하다. 외부 링크 자체를 넣고 그 안에 링크를 없앤 이미지를 넣는 것.

입력	출력
[https://www.youtube.com/ [[파일:유튜브 아이콘.png\|20px\|link=]]]

링크에 마우스를 올릴 때 뜨는 밑줄 없애는 법

색상을 넣듯 링크 안쪽을 <div>로 묶고 display: inline-block으로 해주면 된다.

입력	출력
[[제이위키\|<div style="display: inline-block;">제이위키</div>]]	제이위키

버튼 디자인의 링크를 만들 때 응용하면 좋다.

입력	출력
[[제이위키\|<div style="display: inline-block; border: 1px solid #e1e8ed; border-radius: 3px; background: #f5f8fa; padding: 0px 2px;">제이위키</div>]]	제이위키

단 테이블 셀 안에서만 유효하고 그외에는 정상 작동하지 않는다. 여기에 [[제이위키|<div style="display: inline-block;">제이위키</div>]] 이렇게 입력하면

제이위키

이렇게 된다.

이미지를 퍼센트(%) 단위로 첨부하는 법

[[파일:~~~|100px]]처럼 문법 내에 있는 기능으로는 픽셀 단위로만 이미지를 첨부할 수 있다. 그러나 이 파일을 div로 묶고, display를 inline-block으로 해준 다음 div 자체에 width를 퍼센트로 지정하면 이미지를 퍼센트 단위로 첨부할 수 있다.

행마다 셀 개수가 다른 테이블을 정렬하는 법

테이블의 style에 table-layout: fixed;를 넣는다. 이때, 테이블의 전체 너비가 반드시 지정되어 있어야 한다.

이후 서로 다른 셀 개수끼리의 최소공배수를 구한 뒤 셀 개수에 곱해서 최소공배수가 되는 수만큼 셀을 가로로 합쳐 주면 된다.

예를 들어 위 3칸, 아래 4칸의 테이블을 만들려 할 경우 아래와 같이 입력한다.

{|class="wikitable" style="width: 300px; text-align: center; table-layout: fixed;"
|-
|colspan="4"|3
|colspan="4"|셋
|colspan="4"|三
|-
|colspan="3"|4
|colspan="3"|넷
|colspan="3"|四
|colspan="3"|four
|-
|colspan="12"|모두 합칠 땐 최소공배수를
|}

그럼 이런 표가 만들어진다.

3		셋		三
4	넷		四		four
모두 합칠 땐 최소공배수를

접기 문법 글자를 바꾸는 법

커스텀 접기가 아닌 미디어위키 기본 접기 문법의 펼치기와 접기 글자를 바꾸는 법이다.

문법이 사용된 태그에 data-expandtext=""와 data-collapsetext=""로 바꿀 수 있다. 전자가 펼치기, 후자가 접기다.

입력	출력
<span class="mw-collapsible mw-collapsed" data-expandtext="이것이 펼치기" data-collapsetext="이것이 접기">별 거 없는 내용</span>	별 거 없는 내용

리스트 안에 테이블을 넣는 법

*이나 #으로 동작하는 리스트에서는 엔터 한 번으로 리스트의 끝을 선언한다. 그렇기 때문에 반드시 새 줄에서 시작해야 하는 테이블은 리스트 안에서 사용할 수 없다.

그러나 미디어위키의 테이블 문법이 아닌 HTML 자체의 <table>, <tr>, <td> 등의 코드를 사용하여 테이블을 만들면 리스트 안에서도 테이블을 넣을 수 있다. 미디어위키에서는 일부 HTML 태그를 허용하기 때문에 가능한 일이다. 다만 순수 HTML로만 테이블을 만드는 것은 미디어위키 문법으로 만드는 것보다 복잡하고 방법도 상이하므로 숙지해야만 한다는 단점이 있다. 또한 테이블 태그를 모두 한 줄에서 작성해야만 한다. 엔터 후 새로운 문자열로 넘기면 태그 이후의 모든 내용이 리스트에 넣은 것처럼 들여써진다.

테이블 태그 기초
미디어위키 문법	대응하는 HTML 태그
{\|	<table>
\|+	<caption>
\|-	<tr>
\|	<td>
!	<th>
\|}	</table>

이 방법으로 테이블을 넣으면 테이블과 테이블 위아래 텍스트의 간격이 기존보다 넓어지는데, 때문에 테이블 style에 상하 margin을 5px씩 줄일 것을 권장한다.

입력

출력

* 리스트 안에서
{|
|-
|그냥 쓰려고
|}
하면?

리스트 안에서

그냥 쓰려고

하면?

* 리스트<table class="wikitable" style="margin: 5px 0px;"><tr><td>안에서</td></tr></table>테이블 쓰기

리스트
안에서
테이블 쓰기

@@ 150번째 줄: / 150번째 줄: @@
 예를 들어 위 3칸, 아래 4칸의 테이블을 만들려 할 경우 아래와 같이 입력한다.
-<pre>{|class="wikitable" style="width: 300px; text-align: center; table-layout: fixed;"
+ <nowiki>{|class="wikitable" style="width: 300px; text-align: center; </nowiki><span style="font-weight: bold;">table-layout: fixed;</span>"<nowiki>
 |-
 |colspan="4"|3
@@ 162번째 줄: / 162번째 줄: @@
 |-
 |colspan="12"|모두 합칠 땐 최소공배수를
-|}</pre>
+|}</nowiki>
 그럼 이런 표가 만들어진다.
@@ 179번째 줄: / 179번째 줄: @@
 |colspan="12"|모두 합칠 땐 최소공배수를
 |}
 === 접기 문법 글자를 바꾸는 법 ===
 커스텀 접기가 아닌 미디어위키 기본 접기 문법의 펼치기와 접기 글자를 바꾸는 법이다.