연습장:Sakura/1 문서 원본 보기

<noinclude><center>
*'''[[연습장:Sakura]]''' : 본 연습장
*'''[[연습장:Sakura/1]]''' : 소설 틀
</center>
------
<!-- 이 위의 서술을 임의로 수정하지 마세요. 이 줄 아래부터 연습장입니다. --></noinclude>
<div class="evewiki-dark-bg" id="evewiki-novel-body">
<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 class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<!-- 진행 바 끝 -->
</div>
<no-comment-streams/>
<html>
<style>
#evewiki-novel-body {
    width: 100%;
    height: 60vh;
    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%);
    overflow: hidden;
}
.evewiki-novel-content {
    width: 100%;
    height: calc(60vh - 3.0em);
}
/* 드래그 방지입니다. */
#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;
}
/* 스크롤바입니다. */
.novel-content-main {
  overflow-x: hidden;
  overflow-y: overlay;
  padding-right: 12.0px;
}
/* 스크롤바 영역입니다. */
.novel-content-main::-webkit-scrollbar {
  width: 12px;
  transition: 250ms;
}
/* 스크롤바 막대입니다. */
.novel-content-main::-webkit-scrollbar-thumb {
  background: #adb5bdb6;
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: 250ms;
}
/* 스크롤바 배경입니다. */
.novel-content-main::-webkit-scrollbar-track {
  background: transparent;
  transition: 250ms;
}
/* 진행바입니다. */
.progress-container {
  margin-left: -2.5em;
  margin-top: calc(1.5em - 10px);
  width: calc(100% + 5.0em);
  height: 8px;
  background: #ccc;
}
.progress-bar {
  height: 8px;
  background: #466DFA;
  width: 0%;
}



/* 글꼴 */
@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>