|
|
| 1번째 줄: |
1번째 줄: |
| <noinclude><center>
| |
| *'''[[연습장:Sakura]]''' : 본 연습장
| |
| *'''[[연습장:Sakura/1]]''' : 소설 틀
| |
| ------
| |
| [https://evewiki.kr/w/index.php?title=%ED%8B%80:%EC%97%B0%EC%8A%B5%EC%9E%A5:Sakura/1&action=edit 편집]<br>
| |
| [https://evewiki.kr/w/index.php?title=%ED%8B%80:%EC%97%B0%EC%8A%B5%EC%9E%A5:Sakura/1&action=history 역사]
| |
| </center>
| |
| ------
| |
| <!-- 이 위의 서술을 임의로 수정하지 마세요. 이 줄 아래부터 연습장입니다. --></noinclude>
| |
| <div class="evewiki-dark-bg" id="evewiki-novel-body">
| |
| <!-- 진행 바 시작 -->
| |
| <div class="progress-container">
| |
| <div class="progress-bar" id="myBar"></div>
| |
| </div>
| |
| <!-- 진행 바 끝 -->
| |
| <div class="evewiki-novel-content" id="evewiki-drag-protection">
| |
| <!-- ###헤더 -->
| |
| <!-- ###### 이름 공간 시작 -->
| |
| <div class="novel-content-header">
| |
| <span class="evewiki-dark-txt">
| |
| {{{제목|여기에 제목 입력}}}
| |
| </span>
| |
| </div>
| |
| <!-- ######이름 공간 끝 -->
| |
| <!-- ######버튼 시작 -->
| |
| <div class="novel-content-btn">
| |
| <html><button class="btn btn-secondary tools-btn" id="font-family-pretendard" onclick="pretendard()"><div id="novel-btn-pretendard">고딕</div></button> <button class="btn btn-secondary tools-btn" id="font-family-myeongjo" onclick="myeongjo()"><div id="novel-btn-myeongjo">명조</div></button> <button class="btn btn-secondary tools-btn" id="font-size-up"><div id="novel-btn-up">+</div></button> <button class="btn btn-secondary tools-btn" id="font-size-down"><div id="novel-btn-down">-</div></button></html>
| |
| </div>
| |
| <!-- ######버튼 끝 -->
| |
| <!-- ###헤더 끝 -->
| |
| <!-- ###본문 시작 -->
| |
| <div class="novel-content-main" id="novel-content-main">
| |
| {{{본문|여기에 본문 입력}}}
| |
| </div>
| |
| <!-- ###본문 끝 -->
| |
| </div>
| |
| </div>
| |
| <no-comment-streams/>
| |
| <html>
| |
| <style>
| |
| #evewiki-novel-body {
| |
| width: 100%;
| |
| padding: 1.5em 2.5em 1.5em 2.5em;
| |
| background-color: #F5F8FA;
| |
| border-radius: 1.0em;
| |
| border: 1px solid #CCD4E3;
| |
| box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
| |
| }
| |
| .evewiki-novel-content {
| |
| width: 100%;
| |
| }
| |
| /* 드래그 방지입니다. */
| |
| #evewiki-drag-protection {
| |
| -webkit-user-select: none;
| |
| -moz-user-select: none;
| |
| -ms-user-select: none;
| |
| user-select: none;
| |
| }
| |
| /* 헤더입니다. */
| |
| .novel-content-header {
| |
| display: inline-block;
| |
| width: auto;
| |
| height: 40px;
| |
| font-size: 14.0pt;
| |
| text-align: left;
| |
| font-weight: bold;
| |
| }
| |
| .novel-content-btn {
| |
| display: inline-block;
| |
| float: right;
| |
| height: 40px;
| |
| font-size: 14.0pt;
| |
| text-align: left;
| |
| font-weight: bold;
| |
| }
| |
| /* 버튼입니다 */
| |
| #font-family-pretendard, #font-family-myeongjo {
| |
| height: 30px;
| |
| box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
| |
| }
| |
| #font-size-up, #font-size-down {
| |
| width: 30px;
| |
| height: 30px;
| |
| box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
| |
| }
| |
| #novel-btn-pretendard {
| |
| margin: -0.15em 0 0 0;
| |
| font-family: 'Pretendard';
| |
| font-weight: 400;
| |
| }
| |
| #novel-btn-myeongjo {
| |
| margin: -0.15em 0 0 0;
| |
| font-family: 'ChosunSm';
| |
| font-weight: 400;
| |
| }
| |
| #novel-btn-up {
| |
| margin: -0.25em 0 0-0.3em;
| |
| }
| |
| #novel-btn-down {
| |
| margin: -0.25em 0 0-0.25em;
| |
| }
| |
| /* 본문입니다. */
| |
| .novel-content-main {
| |
| width: 100%;
| |
| height: calc(100% - 40px);
| |
| }
| |
| #novel-content-main {
| |
| font-family: 'Pretendard';
| |
| font-size: 14px;
| |
| line-height: 200%;
| |
| word-break: break-all;
| |
| }
| |
| /* 본문 상단 프로그레스 바 */
| |
| .progress-container {
| |
| position: fixed;
| |
| bottom: 15px;
| |
| width: calc(970px - 5em);
| |
| height: 8px; /* height: 0px; 으로 하면 안 보임 */
| |
| background-color: transparent;
| |
| border-radius: 10px;
| |
| z-index: 9997;
| |
| }
| |
| .progress-bar {
| |
| position: absolute;
| |
| top: 0px;
| |
| width: 0%;
| |
| height: 8px;
| |
| background: #466DFA;
| |
| border-radius: 10px;
| |
| box-shadow: 0px 0px 10px rgb(0 0 0 / 25%);
| |
| }
| |
|
| |
|
|
| |
| /* liberty-content-header 제거 */
| |
| .liberty-content-header {
| |
| display: none;
| |
| }
| |
| .liberty-content-main {
| |
| border-radius: 0.5rem 0.5rem 0 0;
| |
| }
| |
| .footer-info-copyright, .footer-copyrightico {
| |
| display: none;
| |
| }
| |
|
| |
|
| |
| /* 글꼴 */
| |
| @font-face {
| |
| font-family: 'ChosunSm';
| |
| src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.1/ChosunSm.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| /* 데스크톱(1023px 이하) */
| |
| @media screen and (max-width: 1023px) {
| |
| .title {
| |
| display: none;
| |
| }
| |
| }
| |
| /* 모바일(397px 이하) */
| |
| @media screen and (max-width: 397px) {
| |
| .novel-content-main {
| |
| height: calc(100% - 80px);
| |
| }
| |
| .novel-content-header {
| |
| height: 36px;
| |
| }
| |
| .novel-content-btn {
| |
| float: left;
| |
| }
| |
| }
| |
| </style>
| |
| <script>
| |
| // 글자 크기 조정
| |
| var min = 10;
| |
| var max = 18;
| |
|
| |
| function increaseFontSize() {
| |
| var novelcontentmain = document.getElementById('novel-content-main'),
| |
| currentFontSize = parseFloat(window.getComputedStyle(novelcontentmain, null).fontSize);
| |
|
| |
| if (currentFontSize < max) {
| |
| novelcontentmain.style.fontSize = ++currentFontSize + 'px';
| |
| }
| |
| }
| |
|
| |
| function decreaseFontSize() {
| |
| var novelcontentmain = document.getElementById('novel-content-main'),
| |
| currentFontSize = parseFloat(window.getComputedStyle(novelcontentmain, null).fontSize);
| |
|
| |
| if (currentFontSize > min) {
| |
| novelcontentmain.style.fontSize = --currentFontSize + 'px';
| |
| }
| |
| }
| |
|
| |
| document.querySelector('#font-size-up').addEventListener('click', increaseFontSize);
| |
|
| |
|
| |
| document.querySelector('#font-size-down').addEventListener('click', decreaseFontSize);
| |
|
| |
| // 글꼴 조정
| |
| function pretendard() {
| |
| document.getElementById('novel-content-main').style.fontFamily = 'Pretendard';
| |
| }
| |
| function myeongjo() {
| |
| document.getElementById('novel-content-main').style.fontFamily = 'ChosunSm';
| |
| }
| |
|
| |
| //진행바
| |
| window.onscroll = function() {myFunction()};
| |
|
| |
| function myFunction() {
| |
| var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
| |
| var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
| |
| var scrolled = (winScroll / height) * 100;
| |
| document.getElementById("myBar").style.width = scrolled + "%";
| |
| }
| |
| </script>
| |
| </html>
| |