zidell

<div id="#pagination"></div>

<script>
// raw source : https://codepen.io/zidell/pen/OJVbdRK
var ScrollPagination=function(t){if(void 0===t.id)throw Error("페이지네이션을 출력할 대상 DOM은 필수입니다.");(void 0===t.total||t.total<1)&&(t.total=1),(void 0===t.active||t.active>t.total)&&(t.active=1),void 0===t.onClick&&(t.onClick=function(t){console.log("page",t)}),void 0===t.sideMargin&&(t.sideMargin=10),void 0===t.responsiveWindow&&(t.responsiveWindow=!0),t.start=1;var i=document.querySelector(t.id),e=function(t,i,e,n,a){var r=document.createElement("div");if("string"==typeof i){var o=i.trim().split(" ");for(var s in o)r.classList.add(o[s])}if(("string"==typeof e||"number"==typeof e)&&(r.innerHTML=e,void 0!==n&&(r.dataset.page=n)),"object"==typeof a)for(var s in a)r.style[s]="number"==typeof a[s]?a[s]+"px":a[s];return t.appendChild(r),r},n=e(i,"pagination-wrapper"),a=e(n,"pagination-right pagination-item","<span>&raquo;</span>"),r=e(n,"pagination-left pagination-item","<span>&laquo;</span>"),o=e(n,"pagination-center"),s=e(o,"pa

zidell

const zidellPagination = (baseUrl='#', pageNum=1, totalRecord=200, perPage=20, displayButtons=8) =>
{
  let totalPage = Math.ceil(totalRecord/perPage);
  
  let s = '<ul class="pagination">';
  let lis = [];
  
  // 맨 좌측의 페이지 번호를 구함
  let startPageNum = (Math.ceil(pageNum/displayButtons)-1) * displayButtons + 1;
  let endPageNum = startPageNum + displayButtons - 1;

zidell

.col-xxs-1,.col-xxs-10,.col-xxs-11,.col-xxs-12,.col-xxs-2,.col-xxs-3,.col-xxs-4,.col-xxs-5,.col-xxs-6,.col-xxs-7,.col-xxs-8,.col-xxs-9{min-height:1px;padding-left:15px;padding-right:15px;position:relative}.visible-xxs,.visible-xxs-block,.visible-xxs-inline,.visible-xxs-inline-block{display:none!important}@media (max-width:480px){.col-xxs-1,.col-xxs-10,.col-xxs-11,.col-xxs-2,.col-xxs-3,.col-xxs-4,.col-xxs-5,.col-xxs-6,.col-xxs-7,.col-xxs-8,.col-xxs-9{float:left}.col-xxs-1{width:8.333333333333332%}.col-xxs-2{width:16.666666666666664%}.col-xxs-3{width:25%}.col-xxs-4{width:33.33333333333333%}.col-xxs-5{width:41.66666666666667%}.col-xxs-6{width:50%}.col-xxs-7{width:58.333333333333336%}.col-xxs-8{width:66.66666666666666%}.col-xxs-9{width:75%}.col-xxs-10{width:83.33333333333334%}.col-xxs-11{width:91.66666666666666%}.col-xxs-12{width:100%}.col-xxs-push-1{left:8.333333333333332%}.col-xxs-push-2{left:16.666666666666664%}.col-xxs-push-3{left:25%}.col-xss-push-4{left:33.33333333333333%}.col-xxs-push-5{left:41.66666666666

zidell

:root {
  --bg-color: #fff;
  --box-color: rgba(0,0,0,0.05);
  --color1: #ccc;
  --color2: #999;
  --color3: #000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #000;

zidell

html,body {
  width: 100%;
  height: 100%;
  padding:0;
  margin:0;
  font-family:sans-serif;
  line-height: 1.7rem;
  background-color: $bg-color; /* CSS 변수가 안 될 때 */
  background-color: var(--bg-color);
  color:$color3;

zidell

html,body {
  width: 100%;
  height: 100%;
  padding:0;
  margin:0;
  font-family:sans-serif;
  line-height: 1.7rem;
  background-color: $bg-color; /* CSS 변수가 안 될 때 */
  background-color: var(--bg-color);
  color:$color3;

zidell

function userTheme() {
 window.__THEME_MODE = 'light';
 if (!!window.matchMedia) {
  window.__THEME_MODE = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'auto';
 }
  document.getElementsByTagName('html')[0].classList[window.__THEME_MODE === 'dark' ? 'add' : 'remove']('darkmode');
}
if (!!window.matchMedia) {
 ['light', 'dark'].forEach(mode => {
  window.matchMedia(`(prefers-color-scheme: ${mode})`).addListener(e => {

zidell

/* 미디어 쿼리 없이 일반적인 형식으로 대체 */
html.darkmode:root {
  ...
}
.btn-primary {
  // 라이트모드에서의 속성들
  html.darkmode & { /* 다른 셀렉터와 손쉽게 결합 */
   // 다크모드에서의 속성 오버라이드
  }
}

zidell

if (window.__THEME_MODE) {
  // 다크모드에서만 실행하는 코드...(뭐가 있지? 여튼..)
}

zidell

function userTheme(toggle = false) {
  let userMode = localStorage.userThemeMode || 'auto';
  const osMode = !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
  if(toggle) {
   switch(userMode) {
    case 'auto':
     userMode = 'dark'; break;
    case 'dark':
     userMode = 'light'; break;
    default: