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

2022년 9월 5일 (월) 17:53 판

상위 문서: 김찬
하위 문서: 메모, 낙서

김찬
관련 문서

[ 펼치기 · 접기 ]

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

빈칸

메모

counselor	상담사
note	…에 주목(주의)하다, (중요하거나 흥미로운 것을) 언급하다
resume	개요, 이력서
professional	전문적인
profile	옆얼굴, 개요
definitely	분명히, 틀림없이
candidate	후보자, 지원자
in person	직접
keep in mind	마음에 담아두다, 잊지 않고 있다
slang	속어, 은어
authentic	진짜인, 정확한
accomplishment	업적, 공적
look away	눈길을 돌리다, 외면하다
punctual	시간을 지키는(엄수하는)

틀

유용한/자주 사용하는 틀

제작한 틀

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

팁

모바일 기기의 화면비를 넘어가는 너비(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>	제이위키

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

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

[[파일:유튜브 아이콘.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>]]
출력	제이위키

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

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

@@ 5번째 줄: / 5번째 줄: @@
 {{목차}}
 == 빈칸 ==
+== 메모 ==
+{|class="wikitable"
+|-
+|<center>counselor</center>||상담사
+|-
+|<center>note</center>||…에 주목(주의)하다, (중요하거나 흥미로운 것을) 언급하다
+|-
+|<center>resume</center>||개요, 이력서
+|-
+|<center>professional</center>||전문적인
+|-
+|<center>profile</center>||옆얼굴, 개요
+|-
+|<center>definitely</center>||분명히, 틀림없이
+|-
+|<center>candidate</center>||후보자, 지원자
+|-
+|<center>in person</center>||직접
+|-
+|<center>keep in mind</center>||마음에 담아두다, 잊지 않고 있다
+|-
+|<center>slang</center>||속어, 은어
+|-
+|<center>authentic</center>||진짜인, 정확한
+|-
+|<center>accomplishment</center>||업적, 공적
+|-
+|<center>look away</center>||눈길을 돌리다, 외면하다
+|-
+|<center>punctual</center>||시간을 지키는(엄수하는)
+|}
 == 틀 ==