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

2022년 8월 5일 (금) 17:43 판

김찬
관련 문서

[ 펼치기 · 접기 ]

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

𝔞𝔟𝔠𝔡𝔢𝔣𝔤𝔥𝔦𝔧𝔨𝔩𝔪𝔫𝔬𝔭𝔮𝔯𝔰𝔱𝔲𝔳𝔴𝔵𝔶𝔷𝔄𝔅ℭ𝔇𝔈𝔉𝔊ℌℑ𝔍𝔎𝔏𝔐𝔑𝔒𝔓𝔔ℜ𝔖𝔗𝔘𝔙𝔚𝔛𝔜ℨ0123456789 𝖆𝖇𝖈𝖉𝖊𝖋𝖌𝖍𝖎𝖏𝖐𝖑𝖒𝖓𝖔𝖕𝖖𝖗𝖘𝖙𝖚𝖛𝖜𝖝𝖞𝖟𝕬𝕭𝕮𝕯𝕰𝕱𝕲𝕳𝕴𝕵𝕶𝕷𝕸𝕹𝕺𝕻𝕼𝕽𝕾𝕿𝖀𝖁𝖂𝖃𝖄𝖅0123456789

유용한/자주 사용하는 틀

팁

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

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

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

이미지의 매개 변수에 link=를 걸고 아무것도 작성하지 않으면 된다. 예를 들어 [[파일:Seinel Icon.png|30픽셀|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>
이렇게 된다. → 무지개색 총공격이다!

링크에 마우스를 올리면 나타나는 밑줄을 없애는 법

만약 제이위키를 링크하려고 한다면, [[제이위키|<div style="display: inline-block;">제이위키</div>]] 이렇게 링크 텍스트를 div로 묶고 display를 inline-block으로 입력하면 된다. div의 block 속성을 그대로 이용하고 싶다면 간단하게 width를 100%로 추가로 입력하면 된다. 그러면 이렇게

제이위키

링크 위에 마우스를 올려도 밑줄이 나타나지 않는다. 주로 텍스트가 포함된 버튼 형식의 링크(ex: 틀:천라수성)를 만들 때 활용하기 좋다.

원래는 text-decoration 속성만 none으로 입력하면 되는데 어째서인지 미디어위키에서는 안 먹힌다...

@@ 41번째 줄: / 41번째 줄: @@
 이렇게 입력하면 → <nowiki><span style="background: linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple); -webkit-background-clip: text; color: transparent; font-size: 14pt;">'''무지개색 총공격이다!'''</span></nowiki><br>
 이렇게 된다. → <span style="background: linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple); -webkit-background-clip: text; color: transparent; font-size: 14pt;">'''무지개색 총공격이다!'''</span>
+=== 링크에 마우스를 올리면 나타나는 밑줄을 없애는 법 ===
+만약 [[제이위키]]를 링크하려고 한다면, <nowiki>[[제이위키|<div style="display: inline-block;">제이위키</div>]]</nowiki> 이렇게 링크 텍스트를 div로 묶고 display를 inline-block으로 입력하면 된다. div의 block 속성을 그대로 이용하고 싶다면 간단하게 width를 100%로 추가로 입력하면 된다. 그러면 이렇게 [[제이위키|<div style="display: inline-block;">제이위키</div>]] 링크 위에 마우스를 올려도 밑줄이 나타나지 않는다. 주로 텍스트가 포함된 버튼 형식의 링크(ex: [[틀:천라수성]])를 만들 때 활용하기 좋다.
+원래는 text-decoration 속성만 none으로 입력하면 되는데 어째서인지 미디어위키에서는 안 먹힌다...