(낙서장)
 
(같은 사용자의 중간 판 9개는 보이지 않습니다)
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;" |
 
<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|300px]]</div>
 
  </div>
 
  <div class="panel panel-default">
 
    <div id="word-img2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">[[파일:와우가데스.jpg|300px]]</div>
 
  </div>
 
  <div class="panel panel-default">
 
    <div id="word-img2-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">[[파일:마블가데스.jpg|300px]]</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="이미지 1 설명"><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="이미지 2 설명"><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="이미지 3 설명"><div class="btn btn-secondary"></div></span>
 
</div>
 
|}
 

2022년 3월 26일 (토) 21:47 기준 최신판

도구

글자별 단어목록 표 생성기: 글자별 단어목록만 가능. 긴 단어나 미션 단어는 없음.

  • 글자별 단어목록 표 만들기 (원래 사용방법)
  1. 위의 두 칸은 무시하고 아래 추가할 단어들에 내 단어들을 넣는다.
  2. 그럼 오른쪽 결과에 위키문법 표로 변환된 것이 나온다.
  3. 결과 부분의 아무데나 클릭하면 결과가 전체 복사가 된다.
  4. 그걸 끄코위키에 넣으면 된다.
  • 원래 있는 글자별 단어목록에 자기 단어를 추가로 넣기
  1. 원본 문서 소스에 원래 있던 위키 내용 표 소스를 붙여넣는다.
  2. 그럼 오른쪽 원본 단어들이 추출이 되고 동시에 결과에도 반영된 것을 확인할 수 있다.
  3. 그 상태에서 추가할 단어들에 내가 넣고 싶은 단어들을 넣는다.
  4. 그러면 위의 원본 단어들추가할 단어들의 단어들을 모두 합친 위키문법 표가 있는 결과가 생성된다.
  5. 결과 부분의 아무데나 클릭하면 결과가 전체 복사가 된다.
  6. 그걸 원래있던 소스의 표부분만 교체해서 끄코위키에 넣으면 된다.

끄코위키 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;
}

긴 단어나 미션 단어 문서들을 볼 때 유용하다.

  1. 자기 사용자문서에 '[{{fullurl:{{FULLPAGENAME}}/common.css|action=edit}} 내 CSS 수정]'를 넣으면 바로 수정할 수 있는 링크를 넣을 수 있다.