편집토론문서 역사

김찬 연습장 (팁)

< 연습장:Kimchan
분류:
김찬 연습장
연습장
메모 낙서 노트 연구 팁 공부 모듈
틀 CSS Lua

화면비를 넘어가는 너비를 가진 테이블을 화면에서 넘어가지 않도록 대응하는 법

간단하다. 테이블의 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=]] 제이위키}}
입력
 
출력

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

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

[[파일:유튜브 아이콘.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;를 넣는다. 이때, 테이블의 전체 너비가 반드시 지정되어 있어야 한다. max-width, min-width 등의 가변 너비도 안 된다.

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

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

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

이 방법으로 테이블을 넣으면 테이블과 테이블 위아래 텍스트의 간격이 기존과 달라지는데, 때문에 테이블 style에 상하 margin을 12px(wikitable 기본 여백)씩 늘일 것을 권장한다.

입력
 
출력
* 리스트 안에서
{|class="wikitable"
|-
|그냥 쓰려고
|}
하면?
입력
 
출력
  • 리스트 안에서
그냥 쓰려고
하면?
입력
 
출력
* 리스트<table class="wikitable" style="margin: 12px 0px;"><td>안에서</td></table>테이블 쓰기
입력
 
출력
  • 리스트
    안에서
    테이블 쓰기

둥글지 않은 이미지를 둥글게 넣는 법

이미지를 div로 묶고, display를 inline-block으로 하여 이미지에 맞춘 다음, border-radius를 50%로 하여 div 자체를 둥글게 만든 뒤 overflow를 hidden으로 하여 둥근 div에서 이미지의 넘어가는 부분을 보이지 않게 가려 주면 된다.

입력 출력
<div style="display: inline-block; width: 150px; border-radius: 50%; overflow: hidden;">[[파일:서은우.jpg|link=]]</div>

1:1, 즉 정사각형이 아닌 이미지여도 가능하다. 이 경우 둥글게 만들면 원이 아니라 타원이 된다. div에 width와 height를 조절하여 강제로 정사각형(둥글게 만들면 원)으로 만들 수도 있는데, 원본 이미지의 가로 길이가 세로 길이보다 길 경우 잘린 원이 되어 버린다.

입력 출력
<div style="display: inline-block; width: 150px; border-radius: 50%; overflow: hidden;">[[파일:칠성고 4기 로고.png|link=]]</div>
<div style="display: inline-block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;">[[파일:칠성고 4기 로고.png|link=]]</div>
<div style="display: inline-block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;">[[파일:Venevollan.png|link=]]</div><!--- 파일:Venevollan.png처럼 세로가 가로보다 길면 정상적으로 둥글게 된다. --->

위처럼 세로가 가로보다 길면 정상적으로 둥글게 되더라도 이미지 위쪽만 보이고 아래쪽은 잘리게 되는데, 둥글게 만든 div 안쪽에서 이미지를 다시 한 번 새로운 div로 묶고, position을 relative로 한 뒤 top, right, bottom, left 등 위치 조정 속성을 이용해 보일 부분을 조절할 수도 있다.

입력 출력
<div style="display: inline-block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;"><div style="display: inline-block; position: relative; bottom: 30px;">[[파일:Venevollan.png|link=]]</div></div>
<div style="display: inline-block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;"><div style="display: inline-block; position: relative; bottom: 100px;">[[파일:Venevollan.png|link=]]</div></div>

편집창에서만 줄 바꾸기

문법상 한 줄에 모두 적어야 하지만 너무 많은 내용이 필요한 탓에 구분하기 어려울 때, 문법적으로는 여전히 한 줄이면서 편집창에서만 여러 줄로 정렬할 수 있다.

바로 <!--주석 기능-->을 사용하는 것이다. 

아무 문장이나 쓰기
 
아무<!--
-->문장이나<!--
-->쓰기
이 둘은 편집을 완료하고 문서를 볼 때 똑같이 보인다.

테이블의 여러 셀에 하나의 그라데이션 적용하기

간단하다. 하나의 셀이 아니라 테이블 전체의 style에 그라데이션을 입력하면 된다. 그리고 그라데이션을 적용하지 않을 셀의 style에만 원래 사용할 배경색을 입력하면 된다.

당연하지만 그라데이션을 적용할 셀에는 따로 배경색을 입력하면 안 된다. 헤더 셀(!)이라면 배경색을 일부러 투명(transparent)으로 해주면 해결된다.

입력 출력 
{|class="wikitable" style="width: 100%; text-align: center; background: linear-gradient(to right, #e6ffff, #fff6e6, #ffe6e6, #e6ffff, #e6e6ff);"
|-
|이||테이블||은||알록달록||합니다
|-
|colspan="5" style="background: white;"|여긴 미적용
|-
|colspan="2"|몇 개든
|-
|colspan="3"|상관 없습니다
|}
이 테이블 은 알록달록 합니다
여긴 미적용
몇 개든 상관 없습니다

각주 제목에 명칭 부여하기

각주를 입력하는 <ref> 태그에 group=""이라는 속성을 입력하면 된다. 예를 들어 <ref group="스포일러">스포일러인 내용</ref> 이렇게 입력하면 [스포일러 1] 이런 각주가 생성된다. 단, 이렇게 하였을 경우 {{각주}} 틀에 group 변수로 똑같은 것을 입력해 주어야 한다. 즉 group="스포일러"를 입력했다면 {{각주|group=스포일러}}도 함께 입력해 주어야 한다.

문단 부분 편집을 저장하고 앵커 띄우지 않기

제이위키에서는 문단 부분 편집을 저장하면 해당 문단으로 앵커가 걸린다. 이때 편집하는 문단 문법, 즉 등호의 맨앞이나 뒤에 주석 문법(<!-- -->)만 넣어 주면 된다. 굳이 어떤 주석을 작성할 필요는 없고, 그냥 저 문법만 넣어도 된다.

단, 이렇게 하면 편집할 때 문단 강조가 보이지 않는다. 1단계 문단은 글씨 크기가 커지거나, 그 하위 문단은 글씨가 굵어지는 등.

문서의 보이는 제목을 바꾸거나 꾸미기

[월간공방] {{보일제목}}을 소개합니다.

미디어위키 문법의 특수 변수 중 하나인 {{보일제목}}이나 {{DISPLAYTITLE}}을 사용하면 된다. 틀을 넣는 것처럼 중괄호 두 쌍 안에 둘 중 하나를 넣고, 콜론(:)을 붙인 뒤 그 뒤에 보일 제목을 입력하면 된다. 예를 들어 문서 아무 위치에나 {{보일제목:문서 제목}}을 넣으면 그 문서의 제목은 문서 제목으로 보이게 된다.

보일 제목만 바뀌는 것이므로 문서 이동처럼 실제 시스템상 제목이 바뀌는 게 아니다. 따라서 다른 문서에서 링크하려면 보이는 제목이 아니라 원래 제목을 입력해야 한다. 원래 제목은 편집창이나 문서 역사를 들어가면 볼 수 있다.

보일 제목 안에는 간단한 문법도 적용된다. 적용이 되는 문법과 안 되는 문법에 대해서는 연습장:Kimchan/연구 문서의 보일제목 문단 참고.

화면을 꽉 채우는 div 만드는 법

style에 position: fixed; top: 0%; right: 0%; width: 100%; height: 100%;를 넣으면 된다. fixed는 화면의 어느 한 곳에 요소를 고정시키는 문법이다. 여기에 top과 right를 0%로 하여 한쪽 구석에 몰아넣고, 너비와 높이를 100%로 만드는 원리다.

이렇게 해도 편집창이나 검색창은 div보다 위에 남게 되는데, z-index에 아무 큰 숫자(ex: 99999)를 추가로 입력해 주면 검색창과 편집창도 사라진다. 편집 미리보기에서 사용해 버릴 경우 편집을 포기하고 뒤로가야 하므로 각별히 주의할 것. z-index는 디자인과 기능을 전부 마친 후 저장 직전 마지막에 넣어 주자.

저런 화면 가리는 효과를 만드실 때는
반드시 이 효과가 진행되는 도중에 끌 수 있는 버튼을 어딘가에 만들어두셔야합니다
모니터링(운영자)

다만 이 문법은 문서의 가독성을 넘어 페이지 자체를 해칠 수 있으므로 조심스럽게 사용해야 한다. 

<div style="position: fixed; top: 0%; right: 0%; width: 100%; height: 100%; z-index: 99999;"></div>

한 번의 클릭으로 요소 안의 내용 전부를 선택하게 하는 법

주로 <pre> 태그로 만든 템플릿 등을 쉽게 복사해 가도록 만들기에 유용하다.

방법은 간단하다. style 안에 user-select: all;을 넣어 주기만 하면 된다. 이렇게 하면 그 요소의 어디를 클릭해도 요소 안 내용이 전부 선택된다.

문법 결과 
<div style="border: 1px solid black; padding: 1em;">여기는 연습장이지만 꿀팁들을 주고 있습니다<br>검은 박스 안을 클릭해 보시겠어요?</div>
여기는 연습장이지만 꿀팁들을 주고 있습니다
검은 박스 안을 클릭해 보시겠어요?
<div style="border: 1px solid black; padding: 1em; user-select: all;">여기는 연습장이지만 꿀팁들을 주고 있습니다<br>검은 박스 안을 클릭해 보시겠어요?</div>
여기는 연습장이지만 꿀팁들을 주고 있습니다
검은 박스 안을 클릭해 보시겠어요?

그라데이션 문법으로 배경색 명도를 조절하는 법

그라데이션 문법은 둘 이상 겹칠 수 있고, 이때 색깔에 투명도를 입힐 수 있는 rgba()를 쓸 수 있다. 이를 이용해 위로 오는 그라데이션에 흰색이나 검은색을 적절한 투명도로 깔면 아래에 오는 배경색의 명도를 조절할 수 있다.

문법 결과
아래 문법은 모두 style="" 안에 작성
background: red;
일반적인 빨간 배경색 
background: linear-gradient(red, red);
그라데이션으로 표현한 빨간 배경색 
background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
투명도 50%의 흰 배경색
-
background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), linear-gradient(red, red);
반투명을 먼저 적어야 위로 깔림 
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), linear-gradient(red, red);
투명도 50%의 검은 배경색 
background: linear-gradient(to right, rgba(0, 0, 0, .5), transparent, transparent, rgba(0, 0, 0, .5)), linear-gradient(red, red);
부분적으로 효과를 주는 것도 가능, 효과를 주지 않을 부분은 투명색(transparent)으로 처리

사이트 배경에만 깔리는 div 만드는 법

18번 팁과 방법은 유사하지만, 이때는 div가 배경에만 깔릴 수 있도록 z-index 값을 -3으로 입력해 주어야 한다. 

<div style="position: fixed; top: 0%; right: 0%; width: 100%; height: 100%; z-index: -3;"></div>

여기에 자신이 원하는 대로 배경색을 넣거나 배경 이미지를 넣을 수 있다. 이를 잘 활용한 예시로 오펜시브 확장 유니버스와 ZEROCELL이 있다.

물론 이렇게 문서를 꾸며도 본문 양옆에 빈공간이 보이는 PC에서만 확인할 수 있고 본문이 화면을 꽉 채우는 모바일에서는 의미가 없다...

  1. ↑ 스포일러인 내용
  1. ↑ 미리보기가 아닌 제목을 띄우려면 title=""로 사용할 수는 있다.
이 문서의 내용 중 전체 또는 일부는 연습장:Kimchan 문서의 401084판에서 가져왔습니다. 문서 역사 보러가기