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 || [[펌프킨워킹토죠노조미]] || 러브 라이브!
 
|}
 
 
== 부트스트랩 이미지 나열 방식 테스트 ==
 
=== 아코디언 ===
 
<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>
 
 
=== 아코디언 변형 ===
 
{| 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" style="max-width: 300px;">
 
<div class="carousel-indicators"> <!-- 미디어위키와 CSS 충돌이 일어나 ol 대신 div 사용 -->
 
<li data-target="#word-imgs3" data-slide-to="0" class="active"></li>
 
<li data-target="#word-imgs3" data-slide-to="1"></li>
 
<li data-target="#word-imgs3" data-slide-to="2"></li>
 
</div>
 
<div class="carousel-inner" role="listbox" style="transition: height 1s; text-align: center;">
 
<div class="carousel-item item active"><div>[[파일:가데스.jpg]]</div><div class="carousel-caption"><span style="background: rgba(0,0,0,.5); padding: .4em .6em 2.6em;">라이트 노벨</span></div></div>
 
<div class="carousel-item item"><div>[[파일:와우가데스.jpg]]</div><div class="carousel-caption"><span style="background: rgba(0,0,0,.5); padding: .4em .6em 2.6em;">월드 오브 워크래프트</span></div></div>
 
<div class="carousel-item item"><div>[[파일:마블가데스.jpg]]</div><div class="carousel-caption"><span style="background: rgba(0,0,0,.5); padding: .4em .6em 2.6em;">마블 코믹스</span></div></div>
 
</div>
 
<div class="carousel-control left" data-target="#word-imgs3" role="button" data-slide="prev"><span style="
 
  display: flex;
 
  height: 100%;
 
  justify-content: center;
 
  align-items: center;
 
  opacity: 1;
 
" class="fa fa-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span>
 
</div>
 
<div class="carousel-control right" data-target="#word-imgs3" role="button" data-slide="next"><span style="
 
  display: flex;
 
  height: 100%;
 
  justify-content: center;
 
  align-items: center;
 
" class="fa fa-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
 
</div>
 
</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 수정]'를 넣으면 바로 수정할 수 있는 링크를 넣을 수 있다.