|
|
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>
| |
도구
글자별 단어목록 표 생성기: 글자별 단어목록만 가능. 긴 단어나 미션 단어는 없음.
- 위의 두 칸은 무시하고 아래 추가할 단어들에 내 단어들을 넣는다.
- 그럼 오른쪽 결과에 위키문법 표로 변환된 것이 나온다.
- 그 결과 부분의 아무데나 클릭하면 결과가 전체 복사가 된다.
- 그걸 끄코위키에 넣으면 된다.
- 원래 있는 글자별 단어목록에 자기 단어를 추가로 넣기
- 원본 문서 소스에 원래 있던 위키 내용 표 소스를 붙여넣는다.
- 그럼 오른쪽 원본 단어들이 추출이 되고 동시에 결과에도 반영된 것을 확인할 수 있다.
- 그 상태에서 추가할 단어들에 내가 넣고 싶은 단어들을 넣는다.
- 그러면 위의 원본 단어들과 추가할 단어들의 단어들을 모두 합친 위키문법 표가 있는 결과가 생성된다.
- 그 결과 부분의 아무데나 클릭하면 결과가 전체 복사가 된다.
- 그걸 원래있던 소스의 표부분만 교체해서 끄코위키에 넣으면 된다.
끄코위키 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 수정]'를 넣으면 바로 수정할 수 있는 링크를 넣을 수 있다.