편집토론문서 역사

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

시각위키텍스트
편집 요약 없음
편집 요약 없음
38번째 줄: 38번째 줄:
=== 텍스트에 그라데이션을 적용하는 법 ===
=== 텍스트에 그라데이션을 적용하는 법 ===
텍스트를 <nowiki><span></nowiki>으로 묶고 style에서 background로 그라데이션을 적용한 뒤, <span style="font-family: monospace;">-webkit-background-clip: text; color: transparent;</span>를 추가로 입력하면 된다. 전자는 그라데이션의 적용 범위를 텍스트로만 하는 것이고, 후자는 그라데이션이 적용된 배경이 보이도록 하기 위해 텍스트 자체 색상을 투명으로 만든 것이다.
텍스트를 <nowiki><span></nowiki>으로 묶고 style에서 background로 그라데이션을 적용한 뒤, <span style="font-family: monospace;">-webkit-background-clip: text; color: transparent;</span>를 추가로 입력하면 된다. 전자는 그라데이션의 적용 범위를 텍스트로만 하는 것이고, 후자는 그라데이션이 적용된 배경이 보이도록 하기 위해 텍스트 자체 색상을 투명으로 만든 것이다.
{|class="wikitable"
|-
!입력
!출력
|-
|<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>
|<span style="background: linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple); -webkit-background-clip: text; color: transparent; font-size: 14pt;">'''무지개색 총공격이다!'''</span>
|}
=== 하나의 링크 안에 이미지와 텍스트를 함께 넣는 법 ===
일반적으로는 하나의 링크 안에 이미지와 텍스트를 함께 넣을 수 없다. 예를 들어 <nowiki>[[제이위키|[[파일:제윜 로고2.svg|60px|link=]] 제이위키]]</nowiki> 이렇게 입력한다고 해도 [[제이위키|[[파일:제윜 로고2.svg|60px|link=]] 제이위키]] 이처럼 링크 자체가 인식되지 못하고 깨져 버린다.


이렇게 입력하면 → <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="font-family: monospace;"><nowiki>[[]]</nowiki></span>)가 아닌 대괄호 한 개, 즉 외부 링크로 사용하면 가능하다. '''단, 이때 파일에 <code>|link=</code>를 넣어서 반드시 원본 파일로 이동하는 링크를 없앨 것.'''
이렇게 된다. → <span style="background: linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple); -webkit-background-clip: text; color: transparent; font-size: 14pt;">'''무지개색 총공격이다!'''</span>
{|class="wikitable"
|-
!입력
!출력
|-
|<nowiki>[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜_로고2.svg|60px|link=]] 제이위키]</nowiki>
|[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜 로고2.svg|60px|link=]] 제이위키]
|}
여기서 외부 링크 표시를 숨기는 plainlinks 클래스까지 사용하면
{|class="wikitable"
|-
!입력
!출력
|-
|<nowiki><span class="plainlinks">[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜_로고2.svg|60px|link=]] 제이위키]</span></nowiki>
|<span class="plainlinks">[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜_로고2.svg|60px|link=]] 제이위키]</span>
|}
더 완벽하게 사용할 수 있다. 단점이라면 마우스를 위에 올렸을 때 나타나는 문서 미리보기나 제목은 뜨지 않는다는 것.

2022년 8월 9일 (화) 20:18 판

 하위 문서: 메모, 낙서

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

빈칸

유용한/자주 사용하는 틀

팁

모바일 기기의 화면비를 넘어가는 너비(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> 무지개색 총공격이다!

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

일반적으로는 하나의 링크 안에 이미지와 텍스트를 함께 넣을 수 없다. 예를 들어 [[제이위키|[[파일:제윜 로고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> 제이위키

더 완벽하게 사용할 수 있다. 단점이라면 마우스를 위에 올렸을 때 나타나는 문서 미리보기나 제목은 뜨지 않는다는 것.