Wijmo | Theme Designer 데모 Live Preview

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzI2NDM0ODA1LCJpYXQiOjE3MjY0MzEyMDUsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.uUHBo1vQNqKB4h-rx8zs30rX9NUtqWUWuZsesOmvjO3Bgh5GxNlsUg6dSYPctU_lf-ECrHVKxQsdzBJs3GZGscMLrvH2_RVr90OyFEq4lX2hmNxUIf1DCkRGvGYKRt75bu2I9bcpxY2fOcB1Iyu18upkZysktNpjKq3InAoxqa8BkvsY658Ppc--FAPtDooTxp7773z1M2Mm1ItAesPPnAdrRvUP2KrNNuYTQX9_TWqyRVonopU4oOvNOk0tyGNsr_9x70Q8hBHURec9H2Ha01Tce06Ph5Udl_4sFN35u4aPdPBE7IkQWDb3b63YvMlPWDbFdJMjM1hTgKMPM5ZfIQ"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":76168533,\"user_id\":975719,\"html\":\"<div class=\\\"page__container\\\">\\n\\n  <header class=\\\"page__container__header\\\">\\n    <div class=\\\"container page__header\\\">\\n      <div class=\\\"header__logo\\\">\\n        <a class=\\\"header__logo_brand\\\" href=\\\"https:\\/\\/www.mescius.co.kr\\/\\\" target=\\\"_blank\\\">\\n          <img class=\\\"header__logo_brand_mobile\\\" src=\\\"https:\\/\\/cdn.mescius.io\\/sites\\/shared\\/logo\\/mescius-logomark-w.svg\\\" alt=\\\"MESCIUS Logo\\\">\\n          <img src=\\\"https:\\/\\/cdn.mescius.io\\/sites\\/shared\\/logo\\/mescius-logo-w.svg\\\" alt=\\\"MESCIUS Logo\\\">\\n        <\\/a>\\n        <div class=\\\"header__logo_divide\\\">\\n\\n        <\\/div>\\n        <div class=\\\"header__logo_product\\\">\\n          <a href=\\\"https:\\/\\/www.mescius.co.kr\\/wijmo\\/\\\" target=\\\"_blank\\\">\\n            <img src=\\\"https:\\/\\/gcdocumentsitekrblob.blob.core.windows.net\\/document-site-files\\/images\\/15717e12-33dd-4909-a328-b27000965a8a\\/Wijmo.a8174b.svg\\\" alt=\\\"Wijmo Logo\\\">\\n          <\\/a>\\n        <\\/div>\\n      <\\/div>\\n      <div class=\\\"header__links\\\">\\n        <div class=\\\"site_hamburger-menu\\\">\\n          <a class=\\\"link\\\" href=\\\"https:\\/\\/demo.mescius.co.kr\\/wijmo\\/learn-wijmo\\/\\\" target=\\\"_blank\\\">데모<\\/a>\\n          <a class=\\\"link select\\\" href=\\\"https:\\/\\/codepen.io\\/MESCIUS-Korea\\/live\\/MWMeOQm\\\" target=\\\"_blank\\\">테마 디자이너<\\/a>\\n          <a class=\\\"link select\\\" href=\\\"https:\\/\\/demo.mescius.co.kr\\/wijmo\\/docs\\/GettingStarted\\/Introduction\\\" target=\\\"_blank\\\">도움말<\\/a>\\n          <a class=\\\"link\\\" href=\\\"https:\\/\\/demo.mescius.co.kr\\/wijmo\\/api\\/Index.html\\\" target=\\\"_blank\\\">API<\\/a>\\n        <\\/div>\\n      <\\/div>\\n      <div class=\\\"header__buttons\\\">\\n        <a href=\\\"https:\\/\\/www.mescius.co.kr\\/wijmo\\/tutorial\\\" class=\\\"button\\\"  target=\\\"_blank\\\">다른 샘플<\\/a>\\n        <a href=\\\"https:\\/\\/www.mescius.co.kr\\/wijmo\\/download\\\" class=\\\"button\\\"  target=\\\"_blank\\\">다운로드<\\/a>\\n      <\\/div>\\n    <\\/div>\\n  <\\/header> \\n\\n  <div class=\\\"container\\\">\\n    <h1 class=\\\"main__header\\\">테마 디자이너<\\/h1>\\n\\n    <p>Theme Designer 샘플을 사용해 더 쉽고 빠르게 사용자 정의된 Wijmo 테마를 생성해 보시기 바랍니다.<\\/p>\\n    <br\\/>\\n    <p>\\n      배경색, 글꼴색 등을 원하는 대로 수정한 후, 어떻게 적용이 되는지 미리보기로 확인해보시고,\\n      하단에서 제공되는 CSS 파일을 복사하여 여러분의 애플리케이션에 손쉽게 적용하실 수 있습니다.\\n    <\\/p>\\n    <br\\/>\\n    <p>\\n      * 참고로 wijmo.css 파일이 기본적으로 적용된 상태에서 아래 CSS를 추가하여 기본 테마를 재정의하도록 하셔야 합니다. 더불어 사용자 정의된 CSS는 별도 파일에 저장하는 것을 추천드립니다.\\n    <\\/p>\\n    <hr>\\n    <div class=\\\"row\\\">\\n      <div class=\\\"col-md-5 form-horizontal\\\">\\n        <h4 class=\\\"first__designer__control designer__control__header\\\">테두리<\\/h4>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">테두리 반경(Radius) :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"borderRadius\\\"><\\/div>\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">그리드 셀 테두리 설정 :<\\/label>\\n\\n          <div class=\\\"col-sm-6\\\" style=\\\"margin-top: 5px; padding:0px;\\\" >\\n            <label><input type=\\\"checkbox\\\" id=\\\"borderBottom\\\" value=\\\"bottom\\\"> <span style=\\\"vertical-align:top;\\\">가로<\\/span><\\/label>\\n            <label><input type=\\\"checkbox\\\" id=\\\"borderRight\\\" value=\\\"right\\\"> <span style=\\\"vertical-align:top;\\\">세로<\\/span><\\/label>\\n          <\\/div>\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">그리드 셀 테두리 색상 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"borderColor\\\"><\\/div>\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">그리드 셀 테두리 두께 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"borderThickness\\\"><\\/div>\\n        <\\/div>\\n        <h4 class=\\\"designer__control__header\\\">컨텐츠<\\/h4>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">컨텐츠 배경색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"contentBgColor\\\"><\\/div>\\n\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">컨텐츠 글꼴색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"contentColor\\\"><\\/div>\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">교차 셀 배경색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"altCellBgColor\\\"><\\/div>\\n        <\\/div>\\n        <h4 class=\\\"designer__control__header\\\">헤더<\\/h4>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">머리글 배경색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"headerBgColor\\\"><\\/div>\\n\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">머리글 글꼴색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"headerColor\\\"><\\/div>\\n\\n        <\\/div>\\n        <h4 class=\\\"designer__control__header\\\">선택<\\/h4>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">선택된 항목 배경색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"selectedBgColor\\\"><\\/div>\\n\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">선택된 항목 글꼴색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"selectedColor\\\"><\\/div>\\n\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">다중선택 항목 배경색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"multiSelectedBgColor\\\"><\\/div>\\n\\n        <\\/div>\\n        <h4 class=\\\"designer__control__header\\\">툴팁<\\/h4>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">툴팁 배경색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"tooltipBgColor\\\"><\\/div>\\n\\n        <\\/div>\\n        <div class=\\\"form-group\\\">\\n          <label class=\\\"col-sm-5 control-label\\\">툴팁 글꼴색 :<\\/label>\\n          <div class=\\\"col-sm-6\\\" id=\\\"tooltipColor\\\"><\\/div>\\n\\n        <\\/div>\\n\\n      <\\/div>\\n      \\n      <div class=\\\"col-md-7\\\">\\n        <h3 class=\\\"preview__header\\\">미리보기<\\/h3>\\n        <h4 class=\\\"preview__control__header\\\">ComboBox<\\/h4>\\n        <div id=\\\"wjComboBox\\\"><\\/div>\\n        <h4 class=\\\"preview__control__header\\\">InputDate<\\/h4>\\n        <div id=\\\"theDate\\\"><\\/div>\\n        <h4 class=\\\"preview__control__header\\\">FlexGrid<\\/h4>\\n        <div id=\\\"grid\\\"><\\/div>\\n        <h4 class=\\\"preview__control__header\\\">Calendar<\\/h4>\\n        <div id=\\\"calendar\\\"><\\/div>\\n        <h4 class=\\\"preview__control__header\\\">Tooltip<\\/h4>\\n        <div class=\\\"toolTip\\\" id=\\\"span1\\\">\\n          <span >마우스를 올리면 툴팁을 확인하실 수 있습니다.<\\/span>\\n        <\\/div>\\n      <\\/div>\\n    <\\/div>\\n    <div class=\\\"css-container\\\">\\n      <h2>CSS<\\/h2>\\n      <pre id=\\\"cssOutput\\\">\\n    .wj-content {\\n        border-radius: 5px;\\n        background-color: #ffffff;\\n        color: #000000;\\n    }\\n    .wj-header {\\n        background-color: #f1f1f1;\\n        color: #333333;\\n    }\\n    .wj-state-selected {\\n        background-color: #0078d4;\\n        color: #ffffff;\\n    }\\n    .wj-state-multi-selected {\\n        background-color: #0078d4;\\n        color: #ffffff;\\n    }\\n    .wj-tooltip {\\n        background-color: #333333;\\n        color: #ffffff;\\n    }\\n    .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {\\n        background-color: #ffffff;\\n        color: #000000;\\n    }\\n    .wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {\\n        background-color: #f9f9f9;\\n        color: #000000;\\n    }\\n<\\/pre>\\n    <\\/div>\\n  <\\/div>\\n    <footer>\\n    <div class=\\\"container\\\">\\n      <div class=\\\"company-info\\\">\\n        <div class=\\\"img-wrap\\\">\\n          <a href=\\\"http:\\/\\/mescius.co.kr\\\">\\n            <img src=\\\"https:\\/\\/assets.codepen.io\\/975719\\/MESCIUS_Logo_white.png\\\" alt=\\\"MESCIUS 로고\\\" target=\\\"_blank\\\">\\n          <\\/a>\\n        <\\/div>\\n        <p>&copy;<span id=\\\"current-year\\\"><\\/span> MESCIUS Inc. All Rights Reserved.<\\/p>\\n        <ul class=\\\"sns\\\">\\n          <li><a href=\\\"https:\\/\\/www.facebook.com\\/MESCIUS.KOREA\\/\\\" target=\\\"_blank\\\"><i class=\\\"fa fa-facebook\\\" aria-hidden=\\\"true\\\"><\\/i><\\/a>\\n          <\\/li>\\n          <li><a href=\\\"https:\\/\\/www.youtube.com\\/channel\\/UChn5GSeq6vxg0xvQwNFhLHQ\\\" target=\\\"_blank\\\"><i class=\\\"fa fa-youtube-play\\\"\\n                aria-hidden=\\\"true\\\"><\\/i><\\/a>\\n          <\\/li>\\n          <li><a href=\\\"https:\\/\\/pf.kakao.com\\/_ClxiWxb\\\" target=\\\"_blank\\\"><i class=\\\"fa fa-comment\\\" aria-hidden=\\\"true\\\"><\\/i><\\/a><\\/li>\\n        <\\/ul>\\n      <\\/div>\\n      <div class=\\\"site-nav\\\">\\n        <ul class=\\\"col\\\">\\n          <li>\\n            <h4>제품<\\/h4>\\n            <ul>\\n              <li><a href=\\\"https:\\/\\/www.mescius.co.kr\\/web\\\" target=\\\"_blank\\\">For Web 개발자<\\/a><\\/li>\\n              <li><a href=\\\"https:\\/\\/www.mescius.co.kr\\/dotnet\\\" target=\\\"_blank\\\">For .NET 개발자<\\/a><\\/li>\\n              <li><a href=\\\"https:\\/\\/www.mescius.co.kr\\/solutions\\\" target=\\\"_blank\\\">비즈니스 WEB 개발 솔루션<\\/a><\\/li>\\n            <\\/ul>\\n          <\\/li>\\n        <\\/ul>\\n        <ul class=\\\"col\\\">\\n          <li>\\n            <h4>고객 서비스<\\/h4>\\n            <ul>\\n              <li><a href=\\\"https:\\/\\/www.mescius.co.kr\\/docs\\\" target=\\\"_blank\\\">개발자 문서<\\/a><\\/li>\\n              <li><a href=\\\"https:\\/\\/dev.mescius.co.kr\\\" target=\\\"_blank\\\">개발자 포럼<\\/a><\\/li>\\n              <li><a href=\\\"https:\\/\\/www.facebook.com\\/MESCIUS.KOREA\\/\\\" target=\\\"_blank\\\">페이스북<\\/a><\\/li>\\n              <li><a href=\\\"https:\\/\\/pf.kakao.com\\/_ClxiWxb\\\" target=\\\"_blank\\\">카카오톡 채널 추가<\\/a><\\/li>\\n            <\\/ul>\\n          <\\/li>\\n        <\\/ul>\\n        <ul class=\\\"col\\\">\\n          <li>\\n            <h4>메시어스 정보<\\/h4>\\n            <ul>\\n              <li><a href=\\\"https:\\/\\/www.mescius.com\\/ko\\/\\\" target=\\\"_blank\\\">MESCIUS 알아보기<\\/a><\\/li>\\n              <li><a href=\\\"https:\\/\\/www.mescius.com\\/ko\\/recruit\\/\\\" target=\\\"_blank\\\">MESCIUS 채용<\\/a><\\/li>\\n            <\\/ul>\\n          <\\/li>\\n        <\\/ul>\\n        <ul class=\\\"col\\\">\\n          <li>\\n            <h4>정책(Policy)<\\/h4>\\n            <ul>\\n              <li><a href=\\\"https:\\/\\/www.mescius.co.kr\\/privacy\\\" target=\\\"_blank\\\">EULA<\\/a><\\/li>\\n              <li><a\\n                  href=\\\"https:\\/\\/www.mescius.co.kr\\/%EA%B0%9C%EC%9D%B8%EC%A0%95%EB%B3%B4-%EC%88%98%EC%A7%91-%EB%B0%8F-%EC%9D%B4%EC%9A%A9-%EB%8F%99%EC%9D%98\\\" target=\\\"_blank\\\">개인정보\\n                  수집 및 이용 동의<\\/a><\\/li>\\n            <\\/ul>\\n          <\\/li>\\n        <\\/ul>\\n      <\\/div>\\n    <\\/div>\\n  <\\/footer>\\n\\n<\\/div>\",\"css\":\"@import url(\\\"https:\\/\\/cdn.rawgit.com\\/moonspam\\/NanumSquare\\/master\\/nanumsquare.css\\\");\\n\\nbody {\\n  font-family: \\\"nanumsquare\\\";\\n}\\n\\n.page__container {\\n  position: relative;\\n  width: 100%;\\n  display: flex;\\n  flex-direction: column;\\n  z-index: 2;\\n}\\n\\n.page__header{\\n  display:flex;\\n  padding:0px;\\n}\\n\\/* 페이지 헤더 시작 *\\/\\n.page__container__header {\\n  border-top: 15px solid black;\\n  flex-shrink: 0;\\n  height: 100px;\\n  display: flex;\\n  width: 100%;\\n  z-index: 4;\\n  background-color: #ffffff;\\n  flex-wrap: wrap;\\n}\\n\\n.page__container__header {\\n  border: none;\\n  height: 50px;\\n  background: #01c1d5;\\n}\\n\\n.page__container__header .header__buttons,\\n.page__container__header .header__links,\\n.page__container__header .header__logo {\\n  height: 50px;\\n}\\n.page__container__header .header__logo {\\n  padding: 0;\\n  width: unset;\\n\\/*   margin-left: 36px; *\\/\\n}\\n.page__container__header .header__logo a {\\n  line-height: 50px;\\n}\\n.page__container__header .header__logo img {\\n  vertical-align: unset;\\n}\\n.page__container__header .header__logo .header__logo_brand img {\\n  height: 50px;\\n  width: 150px;\\n}\\n.page__container__header\\n  .header__logo\\n  .header__logo_brand\\n  .header__logo_brand_mobile {\\n  display: none;\\n}\\n.page__container__header .header__logo .header__logo_divide {\\n  width: 1px;\\n  display: inline-block;\\n  height: 24px;\\n  background-color: rgba(255, 255, 255, 0.6);\\n  margin-left: 7px;\\n  margin-right: 13px;\\n}\\n.page__container__header .header__logo .header__logo_product img {\\n  vertical-align: middle;\\n  max-width: unset;\\n}\\n\\n.page__container__header .header__links {\\n  z-index: 3;\\n}\\n\\n.header__links {\\n    flex-grow: 1;\\n    display: flex;\\n    align-items: center;\\n    justify-content: flex-end;\\n}\\n.page__container__header .header__links .link {\\n  margin-left: 0;\\n  padding: 0.5rem;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: #fff;\\n}\\n\\n.page__container__header .header__links .site_hamburger-menu .link {\\n    height: 50px;\\n    line-height: 50px;\\n    padding: 0 0.5rem;\\n}\\n.header__links .link {\\n    margin-left: 40px;\\n    cursor: pointer;\\n    text-decoration: none;\\n}\\n.page__container__header .header__buttons a.button {\\n  margin-left: 0;\\n  margin: 0 0.5rem;\\n  text-transform: uppercase;\\n  color: #fff;\\n  text-decoration: none;\\n  border: 1px solid #fff;\\n  padding: 0.5rem;\\n  font-size: 13px;\\n  font-weight: 500;\\n}\\n.header__logo {\\n  height: 80px;\\n  width: 220px;\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  -webkit-user-select: none;\\n  -moz-user-select: none;\\n  -ms-user-select: none;\\n  user-select: none;\\n  margin-right: auto;\\n  box-sizing: border-box;\\n  transition: margin 0.3s ease-in-out;\\n}\\n.header__logo a {\\n  display: block;\\n  position: relative;\\n  height: 100%;\\n  line-height: 60px;\\n}\\n.header__logo img {\\n  max-width: 200px;\\n  max-height: 100%;\\n  vertical-align: middle;\\n}\\n.header__buttons {\\n  display: flex;\\n  align-items: center;\\n  justify-content: flex-end;\\n}\\n.header__buttons a.button {\\n  font-size: var(--body-font-size-small);\\n  border: 1px solid #000;\\n  padding: 10px 16px;\\n  margin-left: 40px;\\n  cursor: pointer;\\n  transition: all 0.3s ease-in-out;\\n  text-decoration: none;\\n  color: var(--body-color);\\n}\\n\\n\\/* 페이지 헤더 끝 *\\/\\n\\n.main__header {\\n  margin:40px 0;\\n}\\n\\n.main__header,.designer__control__header,.preview__control__header,.preview__header{\\n  font-weight:bold;\\n}\\n\\n.designer__control__header:not(.first__designer__control){\\n  margin-top:30px;\\n}\\n.css-container{\\n  margin-bottom : 10%;\\n}\\n.row {\\n  margin-top: 20px;\\n}\\n.wj-flexgrid {\\n  max-height: 250px;\\n  width: 650px;\\n  margin-bottom: 12px;\\n}\\n\\n.wj-calendar {\\n  width: 29em;\\n  min-height: 260px;\\n}\\n\\n.control-label{\\n  font-weight:400;\\n}\\n\\n.col-sm-6.wj-control {\\n  background-color: #ffffff;\\n  padding-right: 0px;\\n  padding-left: 0px;\\n  color:#000000;\\n  border-radius: 5px;\\n}\\n\\n.preview {\\n  padding: 10px;\\n  border: 1px solid #ccc;\\n}\\n\\n.preview__header{\\n  margin-top:10px;\\n}\\n.wj-header{\\n  text-align:center !important;\\n}\\n\\n.wj-designer-input, .preview__control__header {\\n  margin-top: 30px;\\n}\\n\\n.toolTip {\\n  background:#ffffa2;\\n  width:400px;\\n  padding:10px;\\n  border-radius:5px;\\n}\\n\\n\\n\\/* 페이지 푸터 *\\/\\n\\nfooter * {\\n  margin: 0;\\n  padding: 0;\\n}\\n\\nfooter ul li {\\n  list-style: none;\\n}\\n\\nfooter a {\\n  color: #FFFFFF;\\n  text-decoration: none;\\n}\\n\\nfooter {\\n  background-color: #535c67;\\n  color: #FFFFFF;\\n  overflow: hidden;\\n}\\n\\nfooter .container {\\n  max-width: 1140px;\\n  margin: auto;\\n  padding: 3rem 2rem 4rem;\\n  overflow: hidden;\\n}\\n\\nfooter .container .company-info {\\n  padding-left: 20px;\\n}\\n\\nfooter .container .company-info .img-wrap {\\n  width: 300px;\\n  margin-left: -20px;\\n}\\n\\nfooter .container .company-info .img-wrap img {\\n  width: 100%;\\n}\\n\\nfooter .container .company-info .sns {\\n  overflow: hidden;\\n  margin-top: 2rem;\\n}\\n\\nfooter .container .company-info .sns li {\\n  border: 3px solid #FFFFFF;\\n  border-radius: 50%;\\n  width: 50px;\\n  height: 50px;\\n  text-align: center;\\n  overflow: hidden;\\n  float: left;\\n  margin-right: 12px;\\n}\\n\\nfooter .container .company-info .sns li a {\\n  display: block;\\n  width: 50px;\\n  height: 50px;\\n  padding:10px 17px 12px 10px;\\n  transition: all .2s;\\n}\\n\\na:hover {\\n  color: white; \\/* 원하는 색상으로 변경 *\\/\\n  text-decoration: none; \\/* 밑줄 제거 *\\/\\n}\\n\\nfooter .container .company-info .sns li a i {\\n  font-size: 24px;\\n  line-height: 24px;\\n}\\n\\nfooter .container .company-info .sns li a:hover {\\n  background-color: #FFFFFF;\\n  color: #535c67;\\n}\\n\\nfooter .container .site-nav {\\n  margin-top: 70px;\\n  margin-left: 20px;\\n}\\n\\nfooter .container .site-nav .col li h4 {\\n  font-size: 20px;\\n  margin-bottom: 20px;\\n  font-weight:bold;\\n}\\n\\nfooter .container .site-nav .col li ul li {\\n  margin-bottom: 16px;\\n  line-height: 24px;\\n  transition: all .3s;\\n}\\n\\n@media (min-width: 480px) {\\n  footer .container .site-nav {\\n    display: flex;\\n    gap: 50px;\\n    flex-wrap: wrap;\\n  }\\n\\n  footer .container .site-nav .col {\\n    width: calc(50% - 50px);\\n  }\\n}\\n\\n@media (min-width: 768px) {\\n  footer .container .site-nav {}\\n\\n  footer .container .site-nav .col {\\n    flex: 1;\\n  }\\n}\\n\\n@media (min-width: 1024px) {\\n  footer .container .company-info {\\n    width: 25%;\\n    float: left;\\n    margin-right: calc(5% - 40px);\\n  }\\n\\n  footer .container .site-nav {\\n    width: 60%;\\n    float: right;\\n    margin-top: 30px;\\n  }\\n}\\n\\n@media (min-width: 1280px) {}\",\"js\":\"document.addEventListener(\\\"DOMContentLoaded\\\", function () {\\n  \\/\\/\\/\\/################################# 미리보기할 컨트롤 #################################\\n  var flexGrid = new wijmo.grid.FlexGrid(\\\"#grid\\\", {\\n    \\/\\/ alternatingRowStep: 0,\\n    autoGenerateColumns: false,\\n    selectionMode:\\\"MultiRange\\\",\\n    columns: [\\n      { header: \\\"아이디\\\", binding: \\\"id\\\" },\\n      { header: \\\"날짜\\\", binding: \\\"date\\\" },\\n      { header: \\\"국가명\\\", binding: \\\"country\\\" },\\n      { header: \\\"활성화유무\\\", binding: \\\"active\\\" },\\n      { header: \\\"판매\\\", binding: \\\"sales\\\" },\\n      { header: \\\"지출\\\", binding: \\\"expenses\\\" },\\n    ],\\n    itemsSource: getData(),\\n  });\\n  var calendar = new wijmo.input.Calendar(\\\"#calendar\\\");\\n\\n  let tt = new wijmo.Tooltip();\\n\\n  tt.setTooltip(\\\"#span1\\\", \\\"<b>첫번째<\\/b> span 태그입니다.\\\");\\n\\n  var wjComboBox = new wijmo.input.ComboBox(\\\"#wjComboBox\\\", {\\n    itemsSource: [\\\"한국\\\", \\\"중국\\\", \\\"미국\\\", \\\"오스트리아\\\", \\\"영국\\\", \\\"일본\\\"],\\n  });\\n  let theDate = new wijmo.input.InputDate(\\\"#theDate\\\", {});\\n\\n  \\/\\/################################# Wijmo 테마 설정 컨트롤 ###############################\\n  var borderRadiusInput = new wijmo.input.InputNumber(\\\"#borderRadius\\\", {\\n    value: 5,\\n    valueChanged: updateTheme,\\n  });\\n\\n  document\\n    .getElementById(\\\"borderBottom\\\")\\n    .addEventListener(\\\"change\\\", updateTheme);\\n  document\\n    .getElementById(\\\"borderRight\\\")\\n    .addEventListener(\\\"change\\\", updateTheme);\\n\\n  var borderThicknessInput = new wijmo.input.InputNumber(\\\"#borderThickness\\\", {\\n    value: 1,\\n    valueChanged: updateTheme,\\n  });\\n  var borderColorInput = new wijmo.input.InputColor(\\\"#borderColor\\\", {\\n    value: \\\"#d9d9d9\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var contentBgColorInput = new wijmo.input.InputColor(\\\"#contentBgColor\\\", {\\n    value: \\\"#ffffff\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var contentColorInput = new wijmo.input.InputColor(\\\"#contentColor\\\", {\\n    value: \\\"#000000\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var headerBgColorInput = new wijmo.input.InputColor(\\\"#headerBgColor\\\", {\\n    value: \\\"#66b1cc\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var headerColorInput = new wijmo.input.InputColor(\\\"#headerColor\\\", {\\n    value: \\\"#ffffff\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var selectedBgColorInput = new wijmo.input.InputColor(\\\"#selectedBgColor\\\", {\\n    value: \\\"#ffe36c\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var selectedColorInput = new wijmo.input.InputColor(\\\"#selectedColor\\\", {\\n    value: \\\"#ffffff\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var multiSelectedBgColorInput = new wijmo.input.InputColor(\\n    \\\"#multiSelectedBgColor\\\",\\n    {\\n      value: \\\"#66cc94\\\",\\n      valueChanged: updateTheme,\\n    }\\n  );\\n  var tooltipBgColorInput = new wijmo.input.InputColor(\\\"#tooltipBgColor\\\", {\\n    value: \\\"#56990f\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var tooltipColorInput = new wijmo.input.InputColor(\\\"#tooltipColor\\\", {\\n    value: \\\"#ffffff\\\",\\n    valueChanged: updateTheme,\\n  });\\n  var altCellBgColorInput = new wijmo.input.InputColor(\\\"#altCellBgColor\\\", {\\n    value: \\\"#e5f8ff\\\",\\n    valueChanged: updateTheme,\\n  });\\n\\n  function updateTheme() {\\n    var borderRadius = borderRadiusInput.value;\\n    var contentBgColor = contentBgColorInput.value;\\n    var contentColor = contentColorInput.value;\\n    var headerBgColor = headerBgColorInput.value;\\n    var headerColor = headerColorInput.value;\\n    var selectedBgColor = selectedBgColorInput.value;\\n    var selectedColor = selectedColorInput.value;\\n    var multiSelectedBgColor = multiSelectedBgColorInput.value;\\n    var tooltipBgColor = tooltipBgColorInput.value;\\n    var tooltipColor = tooltipColorInput.value;\\n    var altCellBgColor = altCellBgColorInput.value;\\n    var thickness = borderThicknessInput.value;\\n    var color = borderColorInput.value;\\n    var borderStyles = {\\n      bottom: \\\"none\\\",\\n      right: \\\"none\\\",\\n    };\\n\\n    if (document.getElementById(\\\"borderBottom\\\").checked) {\\n      borderStyles.bottom = `${thickness}px solid ${color}`;\\n    }\\n    if (document.getElementById(\\\"borderRight\\\").checked) {\\n      borderStyles.right = `${thickness}px solid ${color}`;\\n    }\\n\\n    var css = `\\n          .wj-content {\\n              border-radius: ${borderRadius}px;\\n              background-color: ${contentBgColor};\\n              color: ${contentColor};\\n          }\\n          .wj-header {\\n              background-color: ${headerBgColor} !important;\\n              color: ${headerColor}!important;\\n          } \\n          .wj-state-selected {\\n              background-color: ${selectedBgColor}  !important;\\n              color: ${selectedColor} !important;\\n          }\\n          .wj-state-multi-selected {\\n              background-color: ${multiSelectedBgColor} !important;\\n              color: ${selectedColor} !important;\\n          }\\n          .wj-tooltip {\\n              background-color: ${tooltipBgColor};\\n              color: ${tooltipColor};\\n          }\\n          .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {\\n              background-color: ${contentBgColor};\\n              color: ${contentColor};\\n          }\\n          .wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {\\n              background-color: ${altCellBgColor};\\n              color: ${contentColor};\\n          }\\n          .wj-cell:not(.wj-header){\\n              border-bottom: ${borderStyles.bottom} !important;\\n              border-right: ${borderStyles.right} !important;\\n          }\\n\\n      `;\\n    applyStyles(css);\\n    updatePreTag(css);\\n  }\\n\\n  function applyStyles(css) {\\n    var styleElement = document.getElementById(\\\"dynamicStyles\\\");\\n    if (!styleElement) {\\n      styleElement = document.createElement(\\\"style\\\");\\n      styleElement.id = \\\"dynamicStyles\\\";\\n      document.head.appendChild(styleElement);\\n    }\\n    styleElement.innerHTML = css;\\n  }\\n\\n  function updatePreTag(css) {\\n    var preTag = document.getElementById(\\\"cssOutput\\\");\\n    preTag.textContent = css;\\n  }\\n\\n  function getData() {\\n    let countries = \\\"영국,캐나다,한국,중국,미국,아일랜드,프랑스,조지아\\\".split(\\n      \\\",\\\"\\n    );\\n    let data = [];\\n    for (var i = 0; i < 50; i++) {\\n      data.push({\\n        id: i,\\n        date: new Date(Date.now() - Math.random() * 10 * 24 * 3600 * 1000),\\n        country: countries[i % countries.length],\\n        active: Math.random() < 0.5,\\n        sales: Math.random() * 1000,\\n        expenses: Math.random() * 500,\\n      });\\n    }\\n    return data;\\n  }\\n  \\/\\/ 현재 연도를 가져오는 JavaScript 코드\\n  const currentYear = new Date().getFullYear();\\n  \\/\\/ HTML 요소에 현재 연도 표시\\n  document.getElementById('current-year').textContent = currentYear;\\n\\n  \\/\\/ Initial theme update\\n  updateTheme();\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-07-23T04:27:20.599Z\",\"updated_at\":\"2024-07-31T07:44:13.997Z\",\"title\":\"Wijmo | Theme Designer 데모\",\"description\":\"\",\"slug_hash\":\"MWMeOQm\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"30768e4717a17634356f9bc54ed70364\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":76112365,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0190ddd8-0697-79cb-8097-73ef3f783f53\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"MWMeOQm\"}"}