|
|
| (사용자 2명의 중간 판 331개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| <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>
| |
| <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%);
| |
| }
| |
| .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;
| |
| }
| |
| /* 글꼴 */
| |
| @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';
| |
| }
| |
| </script>
| |
| </html>
| |