| 김찬 연습장 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
자주·유용하게 활용할 여지가 있거나 실제로 활용되고 있는 팁은 ★ 표시.
화면비를 넘어가는 너비를 가진 테이블을 화면에서 넘어가지 않도록 대응하는 법
간단하다. 테이블의 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를 퍼센트로 지정하면 이미지를 퍼센트 단위로 첨부할 수 있다.
유튜브
22번 팁과 마찬가지로 {{#css}} 특수 명령문을 쓴다. 아래 방법대로만 따라하면 되니 걱정하지는 말라.
우선 당연하게도 유튜브 영상이 문서에 사용되어 있어야 한다. 그리고 다음의 두 가지 방법을 이용할 수 있다.
{{YouTube|동영상ID}}
[ 첫 번째 방법 ]
[ 두 번째 방법 ]
|
뒤늦게 말하는 거지만, 사실 필자가 틀:유튜브에 이미 이 구문을 적용해 두어서 여러분은 틀에서 변수만 사용하면 된다. 이 팁 설명은 원리 설명으로만 알아둬줬으면 좋겠다.
{{YouTube|a_k-dCgubFo|width=100%|height=100px}}
|
{{YouTube|dZt7nRBgy9g|width=50%|height=50px}}
|
행마다 셀 개수가 다른 테이블을 정렬하는 법★
테이블의 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 | ||||||||
| 모두 합칠 땐 최소공배수를 | |||||||||||
혹은 개수가 혼자 다른 열에 {{TIT}} 틀을 사용하는 방법도 있다. 이 방법은 테이블의 너비를 반드시 지정하지는 않아도 된다는 장점이 있다.
| 1 | ||||||
| 2 | 둘 | |||||
| ||||||
| 4 | 넷 | 四 | 사 | |||
접기 문법 글자를 바꾸는 법
커스텀 접기가 아닌 미디어위키 기본 접기 문법의 펼치기와 접기 글자를 바꾸는 법이다.
문법이 사용된 태그에 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>테이블 쓰기 |
|
혹은 HTML의 <table> 태그가 너무 복잡하다면 반대로 리스트를 HTML의 <ul>, <li> 태그로 이용할 수 있다.
<ul><li>이렇게 하면
{|class="wikitable"
|-
|리스트||안에서도||테이블
|}
쓸 수 있어요</li></ul>
- 이렇게 하면
쓸 수 있어요리스트 안에서도 테이블
둥글지 않은 이미지를 둥글게 넣는 법
이미지를 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()를 쓸 수 있다. 이를 이용해 위로 오는 그라데이션에 흰색이나 검은색을 적절한 투명도로 깔면 아래에 오는 배경색의 명도를 조절할 수 있다.
| 문법 | 결과 |
|---|---|
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에서만 확인할 수 있고 본문이 화면을 꽉 채우는 모바일에서는 의미가 없다...
테이블 rowgroup 유사하게 구현하는 법
여기서 rowgroup이란 테이블(=표)에서 세로로 같은 줄에 있는 셀들에 일괄적으로 적용하는 스타일을 말한다. 예를 들어 인물 프로필 표에서 대부분의 디자인은 좌측 세로 열들에 항목을 나타내고, 우측 세로 열들에 그 항목에 대한 설명을 적어넣을 것이다. 여기서 좌측 세로 열들에 배경 색이나 기타 꾸밈이 들어가 있다면, 이 스타일을 각 셀에 하나하나 입력하는 것이 아니라 스타일을 한 번만 입력하는 것으로 세로 열 전부에 같은 효과를 내게 할 수 있다.
이 방법은 미디어위키의 특수명령문 {{#css:}}를 사용한다. 어려울 것 같지만 걱정하지 말고 따라오라. 쉽다곤 안 함
1.
보통 가장 기본적인 인물 프로필 표는 이렇게 만들어진다.
{|class="wikitable" style="width: 350px;"
|-
!colspan="2" style="background: navy; color: white;"|{{++1|이름}}<br>Name
|-
|colspan="2"|{{nmi|빈 이미지}}
|-
!style="width: 30%; background: navy; color: white;"|별명
|■■
|-
!style="background: navy; color: white;"|성별
|■■
|-
!style="background: navy; color: white;"|나이
|■■
|-
!style="background: navy; color: white;"|신체
|■■
|}
| 이름 Name | |
|---|---|
 | |
| 별명 | ■■ |
| 성별 | ■■ |
| 나이 | ■■ |
| 신체 | ■■ |
'항목을 나타내는 좌측 세로 열'에는 기본적으로 navy의 배경 색과 white의 글씨 색이 적용되어 있다.
2.
이제 테이블의 클래스에 wikitable 외에 추가로 하나를 입력한다. 클래스의 이름은 아무거나 상관이 없고 커스텀 접기를 할 때처럼 자신이 아무거나 임의로 정하면 된다. wikitable에서 반드시 띄어쓰기를 하고 작성하자.
{|class="wikitable example-for-rowgroup-table" style="width: 350px;"
|-
!colspan="2" style="background: navy; color: white;"|{{++1|이름}}<br>Name
|-
|colspan="2"|{{nmi|빈 이미지}}
|-
!style="width: 30%; background: navy; color: white;"|별명
|■■
|-
!style="background: navy; color: white;"|성별
|■■
|-
!style="background: navy; color: white;"|나이
|■■
|-
!style="background: navy; color: white;"|신체
|■■
|}
| 이름 Name | |
|---|---|
| |
| 별명 | ■■ |
| 성별 | ■■ |
| 나이 | ■■ |
| 신체 | ■■ |
3.
그리고 문서의 아무 위치에나 {{#css:}}를 사용한다. 아래처럼 입력.
{{#css: table.example-for-rowgroup-table tr th:first-child, table.example-for-rowgroup-table tr td:first-child { background: navy!important; color: white!important; } }}
위 구문을 해석하자면, "example-for-rowgroup-table라는 클래스를 가진 테이블 안의 요소들 중 <tr>(=|-) 안에 있는 <th>(=!) 또는 <td>(=|) 가운데 가장 처음 오는 것들에 이 스타일을 적용한다."이다. 각 스타일 뒤에 있는 !important는 이 스타일을 가장 우선한다는 강조 내용이다.
4.
이제 다시 표로 돌아오자. 우리는 표에서 '항목을 나타내는 좌측 세로 열들' 하나하나에 모두 스타일을 적용해 주었다. 이제 그 style=""을 전부 지운다. style=""이 남아 있으면 {{#css:}}에 작성한 스타일보다 우선되어서 제대로 나타나지 않기 때문이다.
{{#css: table.example-for-rowgroup-table tr th:first-child, table.example-for-rowgroup-table tr td:first-child { background: navy!important; color: white!important; } }}
{|class="wikitable example-for-rowgroup-table" style="width: 350px;"
|-
!colspan="2"|{{++1|이름}}<br>Name
|-
|colspan="2"|{{nmi|빈 이미지}}
|-
!style="width: 30%;"|별명
|■■
|-
!성별
|■■
|-
!나이
|■■
|-
!신체
|■■
|}
| 이름 Name | |
|---|---|
| |
| 별명 | ■■ |
| 성별 | ■■ |
| 나이 | ■■ |
| 신체 | ■■ |
이처럼 스타일을 한 번만 입력하여 좌측 세로 열 전부에 같은 효과를 적용할 수 있다. width 등 개별적으로 스타일을 적용해야 할 때는 기존 문법처럼 style="" 안에 입력하면 된다. style=""에는 {{#css:}}에 적어넣은 속성들과 같은 속성만 사용하지 않으면 된다.
이미지의 높이를 조정하는 법★
미디어위키 문법으로 이미지를 삽입할 때 이미지의 크기는 반드시 너비만 조정이 가능하다. 하지만 나는 높이를 조정하고 싶은데, 너비와 높이의 비율이 1:1로 같은 이미지일 경우 상관이 없지만 그렇지 않을 경우 다소 난감할 것이다. 그때 이 방법을 참고할 수 있다.
ex) 높이 50px의 파일:Eipellus.png
[ 첫 번째 방법 ]
[ 두 번째 방법 ]
[ 세 번째 방법(권장) ]
| |||||||||||||||
수식에 링크 추가하는 법
원래 미디어위키의 TeX 문법에서 수식에 링크를 추가하려면 <math>\href{URL주소}{수식}</math> 이렇게 하면 된다.[2] 그런데 어떤 확장기능의 차이인지[3] 제이위키에서는 지원되지 않는다.
그렇다면 제이위키에서는 수식에 링크를 추가할 수 없는가? 그렇지 않다. 언제나 그랬듯이 우리는 답을 찾아낼 것이다.
제이위키에서 수식은 HTML 구조상 이미지의 형식으로(=<img> 태그로) 출력된다. 그렇다면 우리는 5번 팁을 복습할 필요가 있다. 우리는 이미지에 링크를 추가하는 다른 방법을 알고 있다. 수식으로 출력되는 이미지는 아무 링크도 없는 이미지이므로 위키 문법상으로 지원하는 [[파일:~~.png|link=URL주소]]가 아니라 [URL주소 [[파일:~~.png|link=]]] 이걸 활용하면 된다.
※ 아래 예시에서는 외부 링크 문법 [URL주소 출력] 대신 틀:외부링크숨김의 문법 {{exhide|URL주소|출력}}을 사용한다.
| 만유인력의 법칙 | |
|---|---|
| 문법 | {{exhide|type=wikip|만유인력의 법칙|<math>F=G{m_1m_2 \over r^2}</math>}}
|
| 결과 | |
| 오일러 항등식 | |
| 문법 | {{exhide|type=wikip|오일러 항등식|<math>e^{i\pi}+1=0</math>}}
|
| 결과 | |
비록 위키의 하이퍼링크처럼 수식의 색이 파란색(내부)이나 초록색(외부)으로 바뀌지는 않지만 이런 식으로 수식에 링크를 추가할 수 있다.
+
ㅇ? 이 팁을 쓰고 더 나중에야 깨달은 건데 사실 <math>\href{URL주소}{수식}</math> 이 문법을 지킬 필요 없이 그냥 원래 문법대로 [[링크|<math>수식</math>]] 이렇게 써도 된다. 예를 들어 [[링크|<math>f(x)=x</math>]] 이렇게 쓰면 이렇게 된다.
뻘짓
텍스트 균등 분할(정렬)하는 법
CSS의 많은 text-align 값 중에도 텍스트를 균등 분할하는 값은 없다. 하지만 우리는 다음의 방법으로 구현할 수 있다.
다음의 표에서 왼쪽 셀들을 균등 분할해 보겠다.
| 이름 | 김찬 |
|---|---|
| 별자리 | 전갈자리 |
| 제이위키 | D+1031 |
먼저 우리는 특수 명령문 {{#css}}를 사용할 것이다. 간편한 편집을 위해 가능한 표의 바로 앞이나 뒤에, 다음과 같이 입력한다.
{{#css: table.same-space-text td:first-child { text-align: justify; line-height: 0; font-weight: bold; background: var(--namu--table--th--background); } table.same-space-text td:first-child:before, table.same-space-text td:first-child:after { content: ''; display: inline-block; width: 100%; } }}
위 구문을 속성별로 하나하나 해석하자면 다음과 같다.
- table.same-space-text: class="same-space-text"를 가진 테이블이라는 뜻이다. 클래스의 이름은 임의로 아무거나 정하면 된다. 이 임의의 클래스가 없으면 문서 내 모든 표에 일괄 적용되기 때문에 꼭 필요하다.
- td:first-child: td는 파이프 문자(
|)로 쓰는 일반 셀이다. 왜 느낌표(!)로 쓰는 th가 아니냐면, 제이위키의 th는 자체적으로 text-align 값이 있기 때문에 특수 명령문의 값이 적용이 안 된다. - line-height: 0;: 이 속성이 없으면 셀 위아래에 여백이 생긴다.
- font-weight: bold; background: var(--namu--table--th--background);: 일반 셀인 td를 헤더 셀인 th처럼 보이게 하는 속성이다.
위 특수 명령문을 적용하여 표를 다시 만들어 보자.
{|class="wikitable same-space-text"{{#css: table.same-space-text td:first-child { text-align: justify; line-height: 0; font-weight: bold; background: var(--namu--table--th--background); } table.same-space-text td:first-child:before, table.same-space-text td:first-child:after { content: ''; display: inline-block; width: 100%; } }}
|-
|이 름
|김찬
|-
|별 자 리
|전갈자리
|-
|제 이 위 키
|D{{DDAY|2022|6|24}}
|}| 이 름 | 김찬 |
| 별 자 리 | 전갈자리 |
| 제 이 위 키 | D+1031 |
여기서 주의할 점은, 균등 분할이 적용되는 셀 안의 텍스트는 각 음절 사이에 공백을 넣어 띄워주어야 한다. 그래야 균등 분할이 적용된다.
수식에 색 넣는 법
\color{색상}수식 구문을 사용하면 된다. 이때 색상은 HTML에서 지정된 색상 키워드만 입력 가능하다.
| 입력 | 결과 |
|---|---|
<math>\color{blue}f(x)=x</math>
|
색상 키워드 외에 RGB 값으로도 입력하는 방법이 있다. \color[RGB]{R, G, B}수식 구문을 사용하면 된다. 이로써 더욱 다양한 색 입력이 가능해진다.
| 입력 | 결과 |
|---|---|
<math>\color[RGB]{0, 0, 255}f(x)=x</math>
|
![{\displaystyle \color [rgb]{0,0,1}f(x)=x}](https://en.wikipedia.org/api/rest_v1/media/math/render/svg/bb97effd5e1a0c00335ac111dac0fd0a80bb45d9)
헥스 코드로 입력하는 <codd>\color[HTML]{#RRGGBB}수식 구문도 있는데, 제이위키에서는 작동하지 않는다. 헥스 코드를 RGB로 변환하고 싶다면 틀:hex to rgb 참고.
다크 모드에서의 수식 색 전환을 방지하는 법
제이위키에서는 다크 모드가 켜지면 모든 수식의 색을 반전시키는 기능이 있다. 아마 주로 흰색 배경에서 주로 검은색으로 쓰여지는 수식이 다크 모드의 검은 배경에서는 보이지 않을 것이기 때문인 듯하다. 하지만 바로 위의 팁처럼 수식의 색을 강제로 지정하거나 이미 흰색 또는 검은색으로 고정된 배경에서도 수식은 강제로 색이 뒤바뀐다. (위의 팁에서도 수식이 라이트 모드에서는 파란색, 다크 모드에서는 노란색으로 보일 것이다.)
이를 방지하고자 한다면 수식 전체를 <span class="{{invert-img|class}}">수식</span>으로 감싸면 된다. 이러면 라이트 모드에서도 다크 모드에서도 지정한 색으로만 보인다. (색을 지정하지 않았으면 다크 모드에서도 라이트 모드처럼 검게 보인다.)
| 입력 | 결과 |
|---|---|
<span class="{{invert-img|class}}"><math>\color{red}f(x)=x</math></span>
|
이 수식은 빨간색이다. 직접 라이트 모드와 다크 모드를 오가며 비교해보자. |
각주
각주
|
|---|
각주
스포일러 |
|
