|
|
(같은 사용자의 중간 판 6개는 보이지 않습니다) |
2번째 줄: |
2번째 줄: |
| | | |
| == 도구 == | | == 도구 == |
− | [https://codepen.io/wotomy/pen/MWaoOJX 글자별 단어목록 표 생성기]: 글자별 단어목록만 가능. 긴 단어나 미션 단어는 없음. | + | [https://codepen.io/wotomy/full/MWaoOJX 글자별 단어목록 표 생성기]: 글자별 단어목록만 가능. 긴 단어나 미션 단어는 없음. |
| | | |
| * 글자별 단어목록 표 만들기 (원래 사용방법) | | * 글자별 단어목록 표 만들기 (원래 사용방법) |
21번째 줄: |
21번째 줄: |
| common.css는 자신에게만 다르게 보이도록 끄투위키의 CSS를 수정할 수 있는 방법이다. 자신의 아이디로 로그인 했을 때만 해당 CSS가 적용된 사이트가 보이며, 로그오프하면 다시 원래 끄코위키 사이트가 보인다. | | common.css는 자신에게만 다르게 보이도록 끄투위키의 CSS를 수정할 수 있는 방법이다. 자신의 아이디로 로그인 했을 때만 해당 CSS가 적용된 사이트가 보이며, 로그오프하면 다시 원래 끄코위키 사이트가 보인다. |
| | | |
− | '사용자:(자기아이디)/common.css'라는 문서명으로 되어있으며 그냥 바로 들어가면 왜인지 오류가 떠서 들어갈 수 없다. | + | '사용자:(자기아이디)/common.css'라는 문서명으로 되어있으며 그냥 바로 들어가면 왜인지 오류가 떠서 들어갈 수 없다. |
| | | |
| 그래서 주소창에 '<nowiki>https://kkukowiki.kr/index.php?title=사용자:(자기아이디)&action=edit</nowiki>'를 쳐서 들어가야 수정을 할 수 있다.<ref>자기 사용자문서에 <nowiki>'[{{fullurl:{{FULLPAGENAME}}/common.css|action=edit}} 내 CSS 수정]'</nowiki>를 넣으면 바로 수정할 수 있는 링크를 넣을 수 있다.</ref> 처음엔 아무것도 없는데, 거기다가 CSS 코드를 넣으면 된다. 수정 후 '변경사항 저장'을 누르면 다시 오류페이지가 뜨는데, 적용은 제대로 된 것이니 다시 끄코위키를 열면 적용된 모습을 볼 수 있다. | | 그래서 주소창에 '<nowiki>https://kkukowiki.kr/index.php?title=사용자:(자기아이디)&action=edit</nowiki>'를 쳐서 들어가야 수정을 할 수 있다.<ref>자기 사용자문서에 <nowiki>'[{{fullurl:{{FULLPAGENAME}}/common.css|action=edit}} 내 CSS 수정]'</nowiki>를 넣으면 바로 수정할 수 있는 링크를 넣을 수 있다.</ref> 처음엔 아무것도 없는데, 거기다가 CSS 코드를 넣으면 된다. 수정 후 '변경사항 저장'을 누르면 다시 오류페이지가 뜨는데, 적용은 제대로 된 것이니 다시 끄코위키를 열면 적용된 모습을 볼 수 있다. |
44번째 줄: |
44번째 줄: |
| | | |
| 긴 단어나 미션 단어 문서들을 볼 때 유용하다. | | 긴 단어나 미션 단어 문서들을 볼 때 유용하다. |
− |
| |
− | == 낙서장 ==
| |
− | [{{fullurl:{{FULLPAGENAME}}/common.css|action=edit}} 내 CSS 수정]
| |
− |
| |
− | * 32%
| |
− | <div style="
| |
− | width: 100px;
| |
− | height: 100px;
| |
− | background:
| |
− | radial-gradient(
| |
− | white {{#expr: sqrt(2) / 2 * 100 * (50 / 100)}}%,
| |
− | transparent {{#expr: sqrt(2) / 2 * 100 * (50 / 100) + 1}}% {{#expr: sqrt(2) / 2 * 100 - 1}}%,
| |
− | white {{#expr: sqrt(2) / 2 * 100}}%
| |
− | ),
| |
− | conic-gradient(tomato {{#expr: 32 - 1}}%, #F5F8FA 32%);
| |
− | text-align: center;
| |
− | line-height: 100px;
| |
− | "><span style="
| |
− | display: inline-block;
| |
− | line-height: normal;
| |
− | ">32%</span></div>
| |
− |
| |
− | 2*(((5+7*L)**0.74+0.88*c)*(0.5+0.5*(1-d/t)))*(1+0.5*m)
| |
− |
| |
− | {{#expr: 2 * (1+0.5*{{포함 수|다른모든눈송이와아주비슷하게생긴단하나의눈송이|하}}) * ((5+7*{{#len: 다른모든눈송이와아주비슷하게생긴단하나의눈송이}})^0.74+0.88) round 0 }}
| |
− |
| |
− | 계속 <span style="display: inline-block; animation: fa-spin 2s infinite linear;">도는 글자</span> 만들기
| |
− |
| |
− |
| |
− |
| |
− | {| class="mw-collapsible mw-collapsed"
| |
− | !돌면서 등장 →
| |
− | |-
| |
− | | style="font-size: 2em; padding-top: .5em;" |
| |
− | <span style="display: inline-block; animation: fa-spin .4s;">두</span>
| |
− | <span style="display: inline-block; animation: fa-spin .8s;">둥</span>
| |
− | <span style="display: inline-block; animation: fa-spin 1.2s;">등</span>
| |
− | <span style="display: inline-block; animation: fa-spin 1.6s;">장</span>
| |
− | <span style="display: inline-block; animation: fa-spin 2s;">!</span>
| |
− | |}
| |
− |
| |
− |
| |
− |
| |
− | * 표 새로운 방식
| |
− | {| class="table table-sm table-striped sortable" style="white-space: pre;"
| |
− | |-
| |
− | ! width=60px | 길이 !! 단어 !! width=30% | 주제
| |
− | |-
| |
− | | 11 || [[펌프킨파티토토키아이리]] || THE iDOLM@STER
| |
− | |-
| |
− | | 11 || [[펌프잇업더블엑스비트온]] || 비디오 게임
| |
− | |-
| |
− | | 10 || [[펌프킨워킹토죠노조미]] || 러브 라이브!
| |
− | |}
| |
− |
| |
− |
| |
− |
| |
− | * 여러 이미지 새로운 방식 1
| |
− | <div style="
| |
− | padding: 0;
| |
− | text-align: center;
| |
− | background: white;
| |
− | overflow: hidden;
| |
− | max-width: 300px;
| |
− | border: 1px solid #ddd;
| |
− | ">
| |
− | <div class="panel-group" id="word-imgs" role="tablist" aria-multiselectable="true">
| |
− | <div class="btn btn-secondary" role="button" data-toggle="collapse" data-parent="#word-imgs" data-target="#word-img1" style="width: 100%; border-radius: 0; border: none; ">라이트 노벨</div>
| |
− | <div class="panel panel-default">
| |
− | <div id="word-img1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">[[파일:가데스.jpg]]</div>
| |
− | </div>
| |
− | <div class="btn btn-secondary collapsed" role="button" data-toggle="collapse" data-parent="#word-imgs" data-target="#word-img2" style="width: 100%; border-radius: 0; border: none;">월드 오브 워크래프트</div>
| |
− | <div class="panel panel-default">
| |
− | <div id="word-img2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">[[파일:와우가데스.jpg]]</div>
| |
− | </div>
| |
− | <div class="btn btn-secondary collapsed" role="button" data-toggle="collapse" data-parent="#word-imgs" data-target="#word-img3" style="width: 100%; border-radius: 0; border: none;">마블 코믹스</div>
| |
− | <div class="panel panel-default">
| |
− | <div id="word-img3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">[[파일:마블가데스.jpg]]</div>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− |
| |
− |
| |
− | * 여러 이미지 새로운 방식 2
| |
− | {| class="wikitable" style="position: relative"
| |
− | | style="padding: 0; text-align: center;" |
| |
− | <div style="display: inline-block; max-width: 300px;">
| |
− | <div class="panel-group" id="word-imgs2" role="tablist" aria-multiselectable="true">
| |
− | <div class="panel panel-default">
| |
− | <div id="word-img2-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">[[파일:가데스.jpg]]</div>
| |
− | </div>
| |
− | <div class="panel panel-default">
| |
− | <div id="word-img2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">[[파일:와우가데스.jpg]]</div>
| |
− | </div>
| |
− | <div class="panel panel-default">
| |
− | <div id="word-img2-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">[[파일:마블가데스.jpg]]</div>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | <div style="position: absolute; top: .5em; width: 100%; text-align: center;">
| |
− | <span aria-pressed="true" role="button" data-toggle="collapse" data-parent="#word-imgs2" data-target="#word-img2-1" title="라이트 노벨"><div class="btn btn-secondary"></div></span>
| |
− | <span class="collapsed" aria-pressed="false" role="button" data-toggle="collapse" data-parent="#word-imgs2" data-target="#word-img2-2" title="월드 오브 워크래프트"><div class="btn btn-secondary"></div></span>
| |
− | <span class="collapsed" aria-pressed="false" role="button" data-toggle="collapse" data-parent="#word-imgs2" data-target="#word-img2-3" title="마블 코믹스"><div class="btn btn-secondary"></div></span>
| |
− | </div>
| |
− | |}
| |
− |
| |
− |
| |
− |
| |
− | <div id="word-imgs3" class="carousel slide" data-ride="carousel">
| |
− | <div class="carousel-inner" role="listbox">
| |
− | <div class="item active">
| |
− | [[파일:가데스.jpg]]
| |
− | <div class="carousel-caption">zz</div>
| |
− | </div>
| |
− | <div class="item">
| |
− | [[파일:와우가데스.jpg]]
| |
− | <div class="carousel-caption">dd</div>
| |
− | </div>
| |
− | <div class="item">
| |
− | [[파일:마블가데스.jpg]]
| |
− | <div class="carousel-caption">dd</div>
| |
− | </div>
| |
− | </div>
| |
− | <div class="left carousel-control" data-target="#word-imgs3" role="button" data-slide="prev">
| |
− | <span class="fa fa-chevron-left" aria-hidden="true"></span>
| |
− | <span class="sr-only">Previous</span>
| |
− | </div>
| |
− | <div class="right carousel-control" data-target="#word-imgs3" role="button" data-slide="next">
| |
− | <span class="fa fa-chevron-right" aria-hidden="true"></span>
| |
− | <span class="sr-only">Next</span>
| |
− | </div>
| |
− | </div>
| |
도구
글자별 단어목록 표 생성기: 글자별 단어목록만 가능. 긴 단어나 미션 단어는 없음.
- 위의 두 칸은 무시하고 아래 추가할 단어들에 내 단어들을 넣는다.
- 그럼 오른쪽 결과에 위키문법 표로 변환된 것이 나온다.
- 그 결과 부분의 아무데나 클릭하면 결과가 전체 복사가 된다.
- 그걸 끄코위키에 넣으면 된다.
- 원래 있는 글자별 단어목록에 자기 단어를 추가로 넣기
- 원본 문서 소스에 원래 있던 위키 내용 표 소스를 붙여넣는다.
- 그럼 오른쪽 원본 단어들이 추출이 되고 동시에 결과에도 반영된 것을 확인할 수 있다.
- 그 상태에서 추가할 단어들에 내가 넣고 싶은 단어들을 넣는다.
- 그러면 위의 원본 단어들과 추가할 단어들의 단어들을 모두 합친 위키문법 표가 있는 결과가 생성된다.
- 그 결과 부분의 아무데나 클릭하면 결과가 전체 복사가 된다.
- 그걸 원래있던 소스의 표부분만 교체해서 끄코위키에 넣으면 된다.
끄코위키 common.css 사용방법
common.css는 자신에게만 다르게 보이도록 끄투위키의 CSS를 수정할 수 있는 방법이다. 자신의 아이디로 로그인 했을 때만 해당 CSS가 적용된 사이트가 보이며, 로그오프하면 다시 원래 끄코위키 사이트가 보인다.
'사용자:(자기아이디)/common.css'라는 문서명으로 되어있으며 그냥 바로 들어가면 왜인지 오류가 떠서 들어갈 수 없다.
그래서 주소창에 'https://kkukowiki.kr/index.php?title=사용자:(자기아이디)&action=edit'를 쳐서 들어가야 수정을 할 수 있다.[1] 처음엔 아무것도 없는데, 거기다가 CSS 코드를 넣으면 된다. 수정 후 '변경사항 저장'을 누르면 다시 오류페이지가 뜨는데, 적용은 제대로 된 것이니 다시 끄코위키를 열면 적용된 모습을 볼 수 있다.
CSS를 잘 몰라도 그냥 복사해서 붙여넣으면 좋은 코드를 아래에 적어보았다.
모바일로 볼 때, 상단의 긴 광고창 때문에 화면이 좌우로 밀리는 문제 고치기
코드:
.header-ads {
height: 90px !important;
overflow: auto hidden;
}
추가로, 원래는 어떤 문서를 들어갔을 때, 광고가 로드 되기 전에 편집 버튼이 위에있다가 광고 로드 후, 편집버튼이 밑으로 내려가서 잘못 클릭할 수 있어 조금 기다렸다가 클릭해야 했는데, 이 코드를 사용하면 광고 로드 전부터 이미 광고창 자리를 고정시켜서 미스클릭 문제도 해결할 수 있다.
목차가 길 경우 목차 자체에서 스크롤을 만들기
코드:
.toc > ul {
max-height: 300px;
overflow-y: auto;
}
긴 단어나 미션 단어 문서들을 볼 때 유용하다.
- ↑ 자기 사용자문서에 '[{{fullurl:{{FULLPAGENAME}}/common.css|action=edit}} 내 CSS 수정]'를 넣으면 바로 수정할 수 있는 링크를 넣을 수 있다.