|
|
| (같은 사용자의 중간 판 76개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| {{namucat|김찬/연습장}} | | {{namucat|DISPLAYTITLE=김찬 연습장|김찬/연습장}}{{css|김찬}}{{댓글 금지}} |
| {{상위 문서2|김찬}} | | {{하위 문서2|메모|낙서|노트|연구|팁|공부|모듈}} |
| {{하위 문서2|메모|낙서|노트}} | |
| {{김찬}} | | {{김찬}} |
| {{김찬 연습장}} | | {{김찬 연습장}} |
| 8번째 줄: |
7번째 줄: |
| !style="background: black;"|{{c|white|빈칸 편집 바로가기}} | | !style="background: black;"|{{c|white|빈칸 편집 바로가기}} |
| |- | | |- |
| |<span class="plainlinks">[https://jwiki.kr/wiki/index.php?title=연습장:Kimchan&action=edit§ion=1 이 구간은 문법 연습 등의 목적으로 사용됩니다.]</span> | | |<span class="plainlinks" title="빈칸 편집 바로가기">[https://jwiki.kr/wiki/index.php?title=연습장:Kimchan&action=edit§ion=1 <div style="display: inline-block;">이 구간은 문법 연습 등의 목적으로 사용됩니다.</div>]</span> |
| {{MT끝}} | | {{MT끝}} |
| {{목차}}
| |
| == 빈칸 == | | == 빈칸 == |
| | <div style="display: none;">{{namucat|DISPLAYTITLE=김찬 연습장}}{{css|김찬}}</div> |
|
| |
|
| == 하위 연습장 == | | == 하위 연습장 == |
| 17번째 줄: |
16번째 줄: |
| * [[연습장:Kimchan/낙서]]: 문법 활용, 연습, 틀 제작 등 | | * [[연습장:Kimchan/낙서]]: 문법 활용, 연습, 틀 제작 등 |
| * [[연습장:Kimchan/노트]]: 잡설정 메모, 낙서 등 | | * [[연습장:Kimchan/노트]]: 잡설정 메모, 낙서 등 |
| | * [[연습장:Kimchan/연구]]: 위키 문법 및 기능과 시스템에 대한 연구 |
| | * [[연습장:Kimchan/팁]]: 위키 이용 및 편집에 있어 유용한 팁들 |
| | * [[연습장:Kimchan/공부]]: 대학 공부와 관련된 메모 |
| | * [[연습장:Kimchan/모듈]]: 루아 연습 및 모듈 테스트 |
| * [[틀:김찬 틀 연습장]]: 끼워넣기 등 틀 관련 문법 연습 및 테스트 | | * [[틀:김찬 틀 연습장]]: 끼워넣기 등 틀 관련 문법 연습 및 테스트 |
| | | * [[틀:김찬/styles.css]]: 틀 스타일 연습 및 테스트 |
| == 틀 ==
| | * [[모듈:kimchan]]: 루아 연습 및 모듈 테스트 |
| === 유용한/자주 사용하는 틀 ===
| |
| * [[틀:목차]]/[[틀:목차제거]]
| |
| * [[틀:각주]]
| |
| * [[틀:color]]=[[틀:c]]
| |
| * [[틀:글씨 크기]]=[[틀:fontsize]]=[[틀:fs]]
| |
| * [[틀:폰트]]
| |
| * [[틀:글 숨김]]/[[틀:글 숨김 끝]]
| |
| * [[틀:틀 링크2]]
| |
| * [[틀:인용문1]]
| |
| * [[틀:인용문3]]
| |
| * [[틀:구분선2]]
| |
| * [[틀:글씨 테두리]]=[[틀:border]]
| |
| * [[틀:네온 글씨]]=[[틀:neon]]
| |
| * [[틀:이미지 넣기]]=[[틀:image]]
| |
| * [[틀:비공식 설정]]
| |
| * [[틀:세계관 무관]] | |
| * [[틀:분류 바로가기]]/[[틀:분류앵커]]
| |
| * [[틀:글배경]]
| |
| * [[틀:날수]]
| |
| * [[틀:color-link]]=[[틀:colorlink]]=[[틀:cl]]
| |
| * [[틀:nobold]]
| |
| | |
| === [[:분류:김찬/제작한 틀|제작한 틀]] ===
| |
| {{상세 내용2|분류:김찬/제작한 틀}}
| |
| | |
| == 팁 ==
| |
| === {{anchor|팁1}}모바일 기기의 화면비를 넘어가는 너비(ex: 600px, 800px)를 가진 테이블을 모바일에서 넘어가지 않도록 대응하는 법 ===
| |
| 간단하다. 테이블의 width 속성을 max-width로 바꾸어 주면 된다. 단 주의할 점은, '''테이블 내부의 콘텐츠가 설정한 max-width만큼이 될 정도로 충분한 분량을 차지하고 있어야 한다.''' 가장 쉬운 파훼법은 테이블 어느 곳에라도 모든 열이 병합된 행에 원본 크기가 큰 이미지를 첨부하면 된다. 혹은 [[틀:너비맞춤]]을 이용하는 방법도 있다.
| |
| | |
| === {{anchor|팁2}}이미지에 아무런 링크도 걸지 않았을 때 원본 이미지 보기로 이어지는 자동 링크를 없애는 법 ===
| |
| 이미지의 매개 변수에 link=를 걸고 아무것도 작성하지 않으면 된다. 예를 들어 <span style="font-family: monospace;"><nowiki>[[파일:Seinel Icon.png|20픽셀|link=]]</nowiki></span> 이렇게 입력하면 [[파일:Seinel Icon.png|20픽셀|link=]] 이처럼 이미지 위에 마우스를 올려도 그 어떤 링크는커녕 원본 이미지 보기로 이어지는 자동 링크마저 없다.
| |
| | |
| === {{anchor|팁3}}순환 링크(문서가 같은 문서를 링크)나 테이블의 헤더 셀에서 강제 볼드체를 없애는 법 ===
| |
| 텍스트를 <nowiki><span></nowiki>으로 묶고 style에서 font-weight를 normal로 하면 된다. [[틀:nobold]]로 간편하게 사용할 수 있다.
| |
| | |
| === {{anchor|팁4}}배경이 아닌 곳에 그라데이션을 적용하는 법 ===
| |
| ==== 텍스트 ====
| |
| 텍스트를 <nowiki><span></nowiki>으로 묶고 style에서 background로 그라데이션을 적용한 뒤, <span style="font-family: monospace;">-webkit-background-clip: text; color: transparent;</span>를 추가로 입력하면 된다. 전자는 그라데이션의 적용 범위를 텍스트로만 하는 것이고, 후자는 그라데이션이 적용된 배경이 보이도록 하기 위해 텍스트 자체 색상을 투명으로 만든 것이다.
| |
| | |
| [[틀:그라데이션 글씨]]로 간편하게 사용할 수 있다.
| |
| | |
| {{코드 예제|id1=tip4-1-input|id2=tip4-1-output|입력=<!--
| |
| --><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>{{hr}}<nowiki>{{font-gradient|linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple);|{{fontsize|14|'''무지개색 총공격이다!'''}}}}</nowiki><!--
| |
| -->}}<table width="100%"><td><!--
| |
| --><span style="background: linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple); -webkit-background-clip: text; color: transparent; font-size: 14pt;">'''무지개색 총공격이다!'''</span><!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| ==== 테두리 ====
| |
| 원리는 간단하다. 테두리를 투명(transparent)으로 적용한 뒤 배경 그라데이션을 테두리 안쪽 여백(padding)에서 흰색으로, 테두리(border)를 원하는 그라데이션으로 적용하면 된다. 문법은 다음과 같이 입력한다.
| |
| | |
| {{코드 예제|id1=tip4-2-input|id2=tip4-2-output|입력=<!--
| |
| --><nowiki><div style="border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #fb0055, #ff9b00) border-box; border-radius:5px;">제이위키</div></nowiki><!--
| |
| -->}}<table width="100%"><td><!--
| |
| --><div style="border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #fb0055, #ff9b00) border-box; border-radius:5px;">제이위키</div><!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| === {{anchor|팁5}}하나의 링크 안에 이미지와 텍스트를 함께 넣는 법 ===
| |
| 일반적으로는 하나의 링크 안에 이미지와 텍스트를 함께 넣을 수 없다. 예를 들어 <nowiki>[[제이위키|[[파일:제윜 로고2.svg|60px|link=]] 제이위키]]</nowiki> 이렇게 입력한다고 해도 [[제이위키|[[파일:제윜 로고2.svg|60px|link=]] 제이위키]] 이처럼 링크 자체가 인식되지 못하고 깨져 버린다.
| |
| | |
| 그러나 링크를 제이위키 내부 링크(대괄호 두 개 <span style="font-family: monospace;"><nowiki>[[]]</nowiki></span>)가 아닌 대괄호 한 개, 즉 외부 링크로 사용하면 가능하다. '''단, 이때 파일에 {{폰트|monospace|<nowiki>|link=</nowiki>}}를 넣어서 반드시 원본 파일로 이동하는 링크를 없앨 것.'''
| |
| | |
| {{코드 예제|id1=tip5-input-1|id2=tip5-output-1|입력=<!--
| |
| --><nowiki>[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜_로고2.svg|60px|link=]] 제이위키]</nowiki><!--
| |
| -->}}<table width="100%"><td><!--
| |
| -->[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜 로고2.svg|60px|link=]] 제이위키]<!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| 여기서 외부 링크 표시를 숨기는 plainlinks 클래스까지 사용하면
| |
| | |
| {{코드 예제|id1=tip5-input-2|id2=tip5-output-2|입력=<!--
| |
| --><nowiki><span class="plainlinks">[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제윜_로고2.svg|60px|link=]] 제이위키]</span></nowiki>{{hr}}<nowiki>{{외부링크숨김|https://jwiki.kr/wiki/index.php/제이위키|[[파일:제윜_로고2.svg|60px|link=]] 제이위키}}</nowiki>{{hr}}<nowiki>{{외부링크숨김|type=jwiki|제이위키|[[파일:제윜_로고2.svg|60px|link=]] 제이위키}}</nowiki><!--
| |
| -->}}<table width="100%"><td><!--
| |
| -->{{외부링크숨김|type=jwiki|제이위키|[[파일:제윜_로고2.svg|60px|link=]] 제이위키}}<!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| 더 완벽하게 사용할 수 있다. 외부 링크를 사용하기 때문에 제이위키 내 문서가 아니라 어떤 링크에도 사용할 수 있고, 제이위키 내 문서로 통하는 링크라면 편집을 저장할 때 뜨는 간단한 덧셈뺄셈이 나오지 않는 것도 장점이라면 장점이다. 단점이라면 마우스를 위에 올렸을 때 나타나는 문서 미리보기나 제목은 뜨지 않고,<ref>{{fs|10|미리보기가 아닌 제목을 띄우려면 <nowiki>title=""</nowiki>로 사용할 수는 있다.}}</ref> 문서가 문서 자신을 링크해도 링크가 사라지며 볼드체로 바뀌지 않고 링크 그대로 남아 있다는 것.
| |
| | |
| === {{anchor|팁6}}외부 링크를 넣은 이미지에 외부 링크 아이콘을 띄우는 법 ===
| |
| <tt><nowiki>[[파일:유튜브 아이콘.png|20px|link=https://www.youtube.com/]]</nowiki></tt> 이렇게 파일 link에 외부 링크를 넣으면 [[파일:유튜브 아이콘.png|20px|link=https://www.youtube.com/]] 외부 링크로 통하는 이미지가 만들어지지만 외부 링크임을 나타내는 아이콘은 나타나지 않는다. 방법은 바로 위 문단과 비슷하다. 외부 링크 자체를 넣고 그 안에 링크를 없앤 이미지를 넣는 것.
| |
| | |
| {{코드 예제|id1=tip6-input|id2=tip6-output|입력=<!--
| |
| --><nowiki>[https://www.youtube.com/ [[파일:유튜브 아이콘.png|20px|link=]]]</nowiki><!--
| |
| -->}}<table width="100%"><td><!--
| |
| -->[https://www.youtube.com/ [[파일:유튜브 아이콘.png|20px|link=]]]<!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| === {{anchor|팁7}}링크에 마우스를 올릴 때 뜨는 밑줄 없애는 법 ===
| |
| 색상을 넣듯 링크 안쪽을 <nowiki><div></nowiki>로 묶고 display: inline-block으로 해주면 된다.
| |
| | |
| {{코드 예제|id1=tip7-input-1|id2=tip7-output-1|입력=<!--
| |
| --><nowiki>[[제이위키|<div style="display: inline-block;">제이위키</div>]]</nowiki><!--
| |
| -->}}<table width="100%"><td><!--
| |
| -->[[제이위키|<div style="display: inline-block;">제이위키</div>]]<!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| 버튼 디자인의 링크를 만들 때 응용하면 좋다.
| |
| | |
| {{코드 예제|id1=tip7-input-2|id2=tip7-output-2|입력=<!--
| |
| --><nowiki>[[제이위키|<div style="display: inline-block; border: 1px solid #e1e8ed; border-radius: 3px; background: #f5f8fa; padding: 0px 2px;">제이위키</div>]]</nowiki><!--
| |
| -->}}<table width="100%"><td><!--
| |
| -->[[제이위키|<div style="display: inline-block; border: 1px solid #e1e8ed; border-radius: 3px; background: #f5f8fa; padding: 10px 12px; color: #373a3c">제이위키</div>]]<!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| 단 테이블 셀 안에서만 유효하고 그외에는 정상 작동하지 않는다. 여기에 <nowiki>[[제이위키|<div style="display: inline-block;">제이위키</div>]]</nowiki> 이렇게 입력하면 [[제이위키|<div style="display: inline-block;">제이위키</div>]] 이렇게 된다.
| |
| | |
| === {{anchor|팁8}}이미지를 퍼센트(%) 단위로 첨부하는 법 ===
| |
| <tt><nowiki>[[파일:~~~|100px]]</nowiki></tt>처럼 문법 내에 있는 기능으로는 픽셀 단위로만 이미지를 첨부할 수 있다. 그러나 이 파일을 div로 묶고, display를 inline-block으로 해준 다음 div 자체에 width를 퍼센트로 지정하면 이미지를 퍼센트 단위로 첨부할 수 있다.
| |
| | |
| === {{anchor|팁9}}행마다 셀 개수가 다른 테이블을 정렬하는 법 ===
| |
| 테이블의 style에 table-layout: fixed;를 넣는다. 이때, 테이블의 전체 너비가 반드시 지정되어 있어야 한다. max-width, min-width 등의 가변 너비도 안 된다.
| |
| | |
| 이후 서로 다른 셀 개수끼리의 최소공배수를 구한 뒤 셀 개수에 곱해서 최소공배수가 되는 수만큼 셀을 가로로 합쳐 주면 된다.
| |
| | |
| 예를 들어 위 3칸, 아래 4칸의 테이블을 만들려 할 경우 아래와 같이 입력한다.
| |
| | |
| <nowiki>{|class="wikitable" style="width: 300px; text-align: center; </nowiki>{{bold|table-layout: fixed;}}"<nowiki>
| |
| |-
| |
| |colspan="4"|3
| |
| |colspan="4"|셋
| |
| |colspan="4"|三
| |
| |-
| |
| |colspan="3"|4
| |
| |colspan="3"|넷
| |
| |colspan="3"|四
| |
| |colspan="3"|four
| |
| |-
| |
| |colspan="12"|모두 합칠 땐 최소공배수를
| |
| |}</nowiki>
| |
| | |
| 그럼 이런 표가 만들어진다.
| |
| | |
| {|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"|모두 합칠 땐 최소공배수를
| |
| |}
| |
| | |
| === {{anchor|팁10}}접기 문법 글자를 바꾸는 법 ===
| |
| 커스텀 접기가 아닌 미디어위키 기본 접기 문법의 펼치기와 접기 글자를 바꾸는 법이다.
| |
| | |
| 문법이 사용된 태그에 data-expandtext=""와 data-collapsetext=""로 바꿀 수 있다. 전자가 펼치기, 후자가 접기다.
| |
| | |
| {{코드 예제|id1=tip10-input|id2=tip10-output|입력=<!--
| |
| --><nowiki><span class="mw-collapsible mw-collapsed" </nowiki>{{bold|<nowiki>data-expandtext="이것이 펼치기" data-collapsetext="이것이 접기"</nowiki>}}<nowiki>>별 거 없는 내용</span></nowiki><!--
| |
| -->}}<table width="100%"><td><!--
| |
| --><span class="mw-collapsible mw-collapsed" data-expandtext="이것이 펼치기" data-collapsetext="이것이 접기">별 거 없는 내용</span><!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| === {{anchor|팁11}}리스트 안에 테이블을 넣는 법 ===
| |
| <nowiki>*</nowiki>이나 #으로 동작하는 리스트에서는 엔터 한 번으로 리스트의 끝을 선언한다. 그렇기 때문에 반드시 새 줄에서 시작해야 하는 테이블은 리스트 안에서 사용할 수 없다.
| |
| | |
| 그러나 미디어위키의 테이블 문법이 아닌 HTML 자체의 <nowiki><table width="100%">, <tr>, <td></nowiki> 등의 코드를 사용하여 테이블을 만들면 리스트 안에서도 테이블을 넣을 수 있다. 미디어위키에서는 일부 HTML 태그를 허용하기 때문에 가능한 일이다. 다만 순수 HTML로만 테이블을 만드는 것은 미디어위키 문법으로 만드는 것보다 복잡하고 방법도 상이하므로 숙지해야만 한다는 단점이 있다. 또한 테이블 태그를 모두 한 줄에서 작성해야만 한다. 엔터 후 새로운 문자열로 넘기면 태그 이후의 모든 내용이 리스트에 넣은 것처럼 들여써진다.
| |
| | |
| {|class="wikitable" style="text-align: center;"
| |
| |+테이블 태그 기초
| |
| |-
| |
| !미디어위키 문법||대응하는 HTML 태그
| |
| |-
| |
| |<nowiki>{|</nowiki>||<nowiki><table width="100%"></nowiki>
| |
| |-
| |
| |<nowiki>|+</nowiki>||<nowiki><caption></nowiki>
| |
| |-
| |
| |<nowiki>|-</nowiki>||<nowiki><tr></nowiki>
| |
| |-
| |
| |<nowiki>|</nowiki>||<nowiki><td></nowiki>
| |
| |-
| |
| |<nowiki>!</nowiki>||<nowiki><th></nowiki>
| |
| |-
| |
| |<nowiki>|}</nowiki>||<nowiki></table></nowiki>
| |
| |}
| |
| | |
| 이 방법으로 테이블을 넣으면 테이블과 테이블 위아래 텍스트의 간격이 기존과 달라지는데, 때문에 테이블 style에 상하 margin을 12px(wikitable 기본 여백)씩 늘일 것을 권장한다.
| |
| | |
| {{코드 예제|id1=tip11-input-1|id2=tip11-output-1|입력=<!--
| |
| --><pre>* 리스트 안에서
| |
| {|class="wikitable"
| |
| |-
| |
| |그냥 쓰려고
| |
| |}
| |
| 하면?</pre><!--
| |
| -->}}<table width="100%"><td><!--
| |
| -->
| |
| * 리스트 안에서
| |
| {|class="wikitable"
| |
| |-
| |
| |그냥 쓰려고
| |
| |}
| |
| 하면?<!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| {{코드 예제|id1=tip11-input-2|id2=tip11-output-2|입력=<!--
| |
| --><pre>* 리스트<table class="wikitable" style="margin: 12px 0px;"><td>안에서</td></table>테이블 쓰기</pre><!--
| |
| -->}}<table width="100%"><td><!--
| |
| -->
| |
| * 리스트<table class="wikitable" style="margin: 5px 0px;"><td>안에서</td></table>테이블 쓰기<!--
| |
| --></td></table>{{코드 예제 끝}}
| |
| | |
| === {{anchor|팁12}}둥글지 않은 이미지를 둥글게 넣는 법 ===
| |
| 이미지를 div로 묶고, display를 inline-block으로 하여 이미지에 맞춘 다음, border-radius를 50%로 하여 div 자체를 둥글게 만든 뒤 overflow를 hidden으로 하여 둥근 div에서 이미지의 넘어가는 부분을 보이지 않게 가려 주면 된다.
| |
| | |
| {|class="wikitable"
| |
| |-
| |
| !입력||출력
| |
| |-
| |
| |<nowiki><div style="display: inline-block; width: 150px; border-radius: 50%; overflow: hidden;">[[파일:서은우.jpg|link=]]</div></nowiki>
| |
| |<div style="display: inline-block; width: 150px; border-radius: 50%; overflow: hidden;">[[파일:서은우.jpg|link=]]</div>
| |
| |}
| |
| | |
| 1:1, 즉 정사각형이 아닌 이미지여도 가능하다. 이 경우 둥글게 만들면 원이 아니라 타원이 된다. div에 width와 height를 조절하여 강제로 정사각형(둥글게 만들면 원)으로 만들 수도 있는데, 원본 이미지의 가로 길이가 세로 길이보다 길 경우 잘린 원이 되어 버린다.
| |
| | |
| {|class="wikitable"
| |
| |-
| |
| !입력||출력
| |
| |-
| |
| |<nowiki><div style="display: inline-block; width: 150px; border-radius: 50%; overflow: hidden;">[[파일:칠성고 4기 로고.png|link=]]</div></nowiki>
| |
| |<div style="display: inline-block; width: 150px; border-radius: 50%; overflow: hidden;">[[파일:칠성고 4기 로고.png|link=]]</div>
| |
| |-
| |
| |<nowiki><div style="display: inline-block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;">[[파일:칠성고 4기 로고.png|link=]]</div></nowiki>
| |
| |<div style="display: inline-block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;">[[파일:칠성고 4기 로고.png|link=]]</div>
| |
| |-
| |
| |<nowiki><div style="display: inline-block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;">[[파일:Venevollan.png|link=]]</div></nowiki>{{widen}}''{{c|gray|<nowiki><!---</nowiki> [[:파일:Venevollan.png]]처럼 세로가 가로보다 길면 정상적으로 둥글게 된다. <nowiki>---></nowiki>}}''
| |
| |<div style="display: inline-block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;">[[파일:Venevollan.png|link=]]</div>
| |
| |}
| |
| | |
| 위처럼 세로가 가로보다 길면 정상적으로 둥글게 되더라도 이미지 위쪽만 보이고 아래쪽은 잘리게 되는데, 둥글게 만든 div 안쪽에서 이미지를 다시 한 번 새로운 div로 묶고, position을 relative로 한 뒤 top, right, bottom, left 등 위치 조정 속성을 이용해 보일 부분을 조절할 수도 있다.
| |
| | |
| {|class="wikitable"
| |
| |-
| |
| !입력||출력
| |
| |-
| |
| |<nowiki><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></nowiki>
| |
| |<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>
| |
| |-
| |
| |<nowiki><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></nowiki>
| |
| |<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>
| |
| |}
| |
| | |
| === {{anchor|팁13}}편집창에서만 줄 바꾸기 ===
| |
| 문법상 한 줄에 모두 적어야 하지만 너무 많은 내용이 필요한 탓에 구분하기 어려울 때, 문법적으로는 여전히 한 줄이면서 편집창에서만 여러 줄로 정렬할 수 있다.
| |
| | |
| 바로 <tt><nowiki><!--주석 기능--></nowiki></tt>을 사용하는 것이다.
| |
| | |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| |<pre>아무 문장이나 쓰기</pre>
| |
| |<pre>아무<!--
| |
| -->문장이나<!--
| |
| -->쓰기</pre>
| |
| |-
| |
| |colspan="2"|{{center|이 둘은 편집을 완료하고 문서를 볼 때 똑같이 보인다.}}
| |
| |}
| |
| | |
| === {{anchor|팁14}}테이블의 여러 셀에 하나의 그라데이션 적용하기 ===
| |
| 간단하다. 하나의 셀이 아니라 테이블 전체의 style에 그라데이션을 입력하면 된다. 그리고 그라데이션을 적용하지 않을 셀의 style에만 원래 사용할 배경색을 입력하면 된다.
| |
| | |
| 당연하지만 그라데이션을 적용할 셀에는 따로 배경색을 입력하면 안 된다. 헤더 셀(<tt>!</tt>)이라면 배경색을 일부러 투명(transparent)으로 해주면 해결된다.
| |
| | |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !입력||출력
| |
| |-
| |
| |<pre>{|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"|상관 없습니다
| |
| |}</pre>
| |
| |
| |
| {|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"|상관 없습니다
| |
| |}
| |
| |}
| |
| | |
| === {{anchor|팁15}}각주 제목에 명칭 부여하기 ===
| |
| 각주를 입력하는 <tt><nowiki><ref></nowiki></tt> 태그에 group=""이라는 속성을 입력하면 된다. 예를 들어 <tt><nowiki><ref group="스포일러">스포일러인 내용</ref></nowiki></tt> 이렇게 입력하면 <ref group="스포일러">{{fs|10|스포일러인 내용}}</ref> 이런 각주가 생성된다. 단, 이렇게 하였을 경우 <tt><nowiki>{{각주}}</nowiki></tt> 틀에 group 변수로 똑같은 것을 입력해 주어야 한다. 즉 <tt><nowiki>group="스포일러"</nowiki></tt>를 입력했다면 <tt><nowiki>{{각주|group=스포일러}}</nowiki></tt>도 함께 입력해 주어야 한다.
| |
| | |
| === {{anchor|팁16}}문단 부분 편집을 저장하고 앵커 띄우지 않기 ===
| |
| 제이위키에서는 문단 부분 편집을 저장하면 해당 문단으로 앵커가 걸린다. 이때 편집하는 문단 문법, 즉 등호의 맨앞이나 뒤에 주석 문법(<tt><nowiki><!-- --></nowiki></tt>)만 넣어 주면 된다. 굳이 어떤 주석을 작성할 필요는 없고, 그냥 저 문법만 넣어도 된다.
| |
| | |
| == 각주 ==
| |
| {{각주|group=스포일러}}
| |
하위 문서: 메모, 낙서, 노트, 연구, 팁, 공부, 모듈
