연습장:Kimchan

분류:

김찬
관련 문서

[ 펼치기 · 접기 ]

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

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

빈칸

틀

유용한/자주 사용하는 틀

제작한 틀

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

팁

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

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

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

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

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

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

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

텍스트

텍스트를 <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>
테이블 쓰기

리스트

안에서

테이블 쓰기