├── .gitignore
├── preview256.jpg
├── preview560.jpg
├── preview1600.jpg
├── images
    ├── new_icon.png
    ├── 4058006-128.png
    ├── logo_band.png
    ├── logo_kakao.png
    ├── logo_naver.png
    ├── logo_facebook.png
    ├── logo_twitter.png
    ├── logo_kakaostory.png
    ├── profile_default_image.jpg
    ├── web_heart_animation.png
    ├── 2d831f2c37e039bcf2b3c61c77571a7b.png
    ├── 300934b9fa070ba10c37ea714c364ba3.png
    ├── 313656d46d6613b2d25f50a785361e1c.png
    ├── 5f6f07f9d5c85b4b49f417962f470b25.png
    ├── 62a04156c409190ba51062efb696d351.png
    ├── db39df94c91bca1d9ba5afea03347aa7.png
    ├── e572920f7d09c2b771a875d90910dc14.png
    ├── ece18b2e96fa918e46cfb27ad1752061.png
    ├── backtop_icon.svg
    ├── 15b595b435b5917da4242aa1d995bb60.svg
    ├── pagination_arrow_icon.svg
    ├── 2258ee2fbc8936f24e698bba89c26647.svg
    ├── menu_icon.svg
    ├── lazy_img.svg
    ├── explore_icon.svg
    ├── shelf_icon.svg
    ├── close_icon.svg
    ├── drag_arrow_icon.svg
    ├── home_icon.svg
    ├── search_icon.svg
    ├── share_icon.svg
    ├── 20d4cfe2bfa02d3768fd2e6593f47a0d.svg
    ├── f016a82938f70fb2a4d3a0d91722694c.svg
    ├── subscribe_active.svg
    ├── 4a1733e88f785f090f0e5001367663bb.svg
    ├── custom_adsense.js
    ├── unlock_icon.svg
    ├── lock_icon.svg
    ├── subscribe_inactive.svg
    ├── fd5ecfdfbebd455c240c9f413a2d9555.svg
    ├── bottom_menu_icon.svg
    └── script.xVsJkRhgF2lCEZoODeL1.js
├── README.md
├── index.xml
├── style.css
└── skin.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn.lock


--------------------------------------------------------------------------------
/preview256.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/preview256.jpg


--------------------------------------------------------------------------------
/preview560.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/preview560.jpg


--------------------------------------------------------------------------------
/preview1600.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/preview1600.jpg


--------------------------------------------------------------------------------
/images/new_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/new_icon.png


--------------------------------------------------------------------------------
/images/4058006-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/4058006-128.png


--------------------------------------------------------------------------------
/images/logo_band.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/logo_band.png


--------------------------------------------------------------------------------
/images/logo_kakao.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/logo_kakao.png


--------------------------------------------------------------------------------
/images/logo_naver.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/logo_naver.png


--------------------------------------------------------------------------------
/images/logo_facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/logo_facebook.png


--------------------------------------------------------------------------------
/images/logo_twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/logo_twitter.png


--------------------------------------------------------------------------------
/images/logo_kakaostory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/logo_kakaostory.png


--------------------------------------------------------------------------------
/images/profile_default_image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/profile_default_image.jpg


--------------------------------------------------------------------------------
/images/web_heart_animation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/web_heart_animation.png


--------------------------------------------------------------------------------
/images/2d831f2c37e039bcf2b3c61c77571a7b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/2d831f2c37e039bcf2b3c61c77571a7b.png


--------------------------------------------------------------------------------
/images/300934b9fa070ba10c37ea714c364ba3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/300934b9fa070ba10c37ea714c364ba3.png


--------------------------------------------------------------------------------
/images/313656d46d6613b2d25f50a785361e1c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/313656d46d6613b2d25f50a785361e1c.png


--------------------------------------------------------------------------------
/images/5f6f07f9d5c85b4b49f417962f470b25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/5f6f07f9d5c85b4b49f417962f470b25.png


--------------------------------------------------------------------------------
/images/62a04156c409190ba51062efb696d351.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/62a04156c409190ba51062efb696d351.png


--------------------------------------------------------------------------------
/images/db39df94c91bca1d9ba5afea03347aa7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/db39df94c91bca1d9ba5afea03347aa7.png


--------------------------------------------------------------------------------
/images/e572920f7d09c2b771a875d90910dc14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/e572920f7d09c2b771a875d90910dc14.png


--------------------------------------------------------------------------------
/images/ece18b2e96fa918e46cfb27ad1752061.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruden91/public-basecamp-skin/HEAD/images/ece18b2e96fa918e46cfb27ad1752061.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 베이스캠프 스킨
2 | 베이스캠프 스킨은 티스토리 블로그에서 사용되는 무료 스킨입니다.
3 | 
4 | # 참고사항
5 | 해당 스킨 관련 사항은 [여기](https://webruden.tistory.com/630)를 참고하세요.
6 | 
7 | # License
8 | Copyright 2021. ruden91. All rights reserved.


--------------------------------------------------------------------------------
/images/backtop_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="70" height="70" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <g>
 4 |   <title>background</title>
 5 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 6 |  </g>
 7 |  <g>
 8 |   <title>Layer 1</title>
 9 |   <rect fill="#777777" id="svg_2" y="17" x="19" width="32" height="4"/>
10 |   <polygon fill="#777777" id="svg_3" points="19,40 21.828,42.828 33,31.657 33,53 37,53 37,31.657 48.172,42.828 51,40 35,24  "/>
11 |  </g>
12 | </svg>


--------------------------------------------------------------------------------
/images/15b595b435b5917da4242aa1d995bb60.svg:
--------------------------------------------------------------------------------
 1 | <svg width="70" height="70" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <g>
 4 |   <title>background</title>
 5 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 6 |  </g>
 7 |  <g>
 8 |   <title>Layer 1</title>
 9 |   <rect fill="#777777" id="svg_2" y="17" x="19" width="32" height="4"/>
10 |   <polygon fill="#777777" id="svg_3" points="19,40 21.828,42.828 33,31.657 33,53 37,53 37,31.657 48.172,42.828 51,40 35,24  "/>
11 |  </g>
12 | </svg>


--------------------------------------------------------------------------------
/images/pagination_arrow_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 | 
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title>Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m353,450a15,15 0 0 1 -10.61,-4.39l-184.89,-184.9a15,15 0 0 1 0,-21.21l184.89,-184.9a15,15 0 1 1 21.22,21.21l-174.29,174.29l174.29,174.29a15,15 0 0 1 -10.61,25.61z"/>
11 |  </g>
12 | </svg>


--------------------------------------------------------------------------------
/images/2258ee2fbc8936f24e698bba89c26647.svg:
--------------------------------------------------------------------------------
 1 | <svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 | 
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title>Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m353,450a15,15 0 0 1 -10.61,-4.39l-184.89,-184.9a15,15 0 0 1 0,-21.21l184.89,-184.9a15,15 0 1 1 21.22,21.21l-174.29,174.29l174.29,174.29a15,15 0 0 1 -10.61,25.61z"/>
11 |  </g>
12 | </svg>


--------------------------------------------------------------------------------
/images/menu_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 | 
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#707070">Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m29,6l-26,0a1,1 0 0 0 0,2l26,0a1,1 0 0 0 0,-2z"/>
11 |   <path fill="#707070" id="svg_2" d="m3,17l13,0a1,1 0 0 0 0,-2l-13,0a1,1 0 0 0 0,2z"/>
12 |   <path fill="#707070" id="svg_3" d="m25,24l-22,0a1,1 0 0 0 0,2l22,0a1,1 0 0 0 0,-2z"/>
13 |  </g>
14 | </svg>


--------------------------------------------------------------------------------
/images/lazy_img.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414 414" width="414" height="414">
 2 | 	<defs>
 3 | 		<image width="414" height="414" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZ4AAAGeAQMAAACesvVMAAAAAXNSR0IB2cksfwAAAANQTFRF////p8QbyAAAACxJREFUeJztwTEBAAAAwqD1T+1pCaAAAAAAAAAAAAAAAAAAAAAAAAAAAAC4AVW2AAFNpmlPAAAAAElFTkSuQmCC"/>
 4 | 	</defs>
 5 | 	<style>
 6 | 		tspan { white-space:pre }
 7 | 		.shp0 { fill: #f7f7f7 } 
 8 | 	</style>
 9 | 	<use id="Background" href="#img1" x="0" y="0" />
10 | 	<path id="Shape 1" class="shp0" d="M0 0L414 0L414 414L0 414L0 0Z" />
11 | </svg>


--------------------------------------------------------------------------------
/images/explore_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 |  <desc/>
 4 | 
 5 |  <g>
 6 |   <title>background</title>
 7 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 8 |  </g>
 9 |  <g>
10 |   <title fill="#707070">Layer 1</title>
11 |   <path fill="#707070" id="Shape" d="m10,8.9c-0.6,0 -1.1,0.5 -1.1,1.1c0,0.6 0.5,1.1 1.1,1.1c0.6,0 1.1,-0.5 1.1,-1.1c0,-0.6 -0.5,-1.1 -1.1,-1.1l0,0zm0,-8.9c-5.5,0 -10,4.5 -10,10c0,5.5 4.5,10 10,10c5.5,0 10,-4.5 10,-10c0,-5.5 -4.5,-10 -10,-10l0,0zm2.2,12.2l-8.2,3.8l3.8,-8.2l8.2,-3.8l-3.8,8.2l0,0z"/>
12 |  </g>
13 | </svg>


--------------------------------------------------------------------------------
/images/shelf_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 | 
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#707070">Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m22,2l-20,0a1,1 0 0 0 -1,1l0,18a1,1 0 0 0 1,1l20,0a1,1 0 0 0 1,-1l0,-18a1,1 0 0 0 -1,-1zm-19,12l0,-4l6,0a1,1 0 0 0 1,1l4,0a1,1 0 0 0 1,-1l6,0l0,4l-18,0zm0,-10l6,0a1,1 0 0 0 1,1l4,0a1,1 0 0 0 1,-1l6,0l0,4l-18,0l0,-4zm18,16l-18,0l0,-4l6,0a1,1 0 0 0 1,1l4,0a1,1 0 0 0 1,-1l6,0l0,4z"/>
11 |  </g>
12 | </svg>


--------------------------------------------------------------------------------
/images/close_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <title/>
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title>Layer 1</title>
10 |   <g id="cross">
11 |    <line stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" stroke="#fff" fill="none" id="svg_1" y2="25" y1="7" x2="25" x1="7" class="cls-1"/>
12 |    <line stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" stroke="#fff" fill="none" id="svg_2" y2="7" y1="25" x2="25" x1="7" class="cls-1"/>
13 |   </g>
14 |  </g>
15 | </svg>


--------------------------------------------------------------------------------
/images/drag_arrow_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <title/>
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#777777">Layer 1</title>
10 |   <path fill="#777777" id="svg_1" d="m16.88,15.53l-9.88,-9.87a1,1 0 0 0 -1.41,1.41l9.06,9.06l-8.8,8.8a1,1 0 0 0 0,1.41l0,0a1,1 0 0 0 1.42,0l9.61,-9.61a0.85,0.85 0 0 0 0,-1.2z" class="cls-1"/>
11 |   <path fill="#777777" id="svg_2" d="m26.46,15.53l-9.88,-9.87a1,1 0 0 0 -1.41,1.41l9.06,9.06l-8.8,8.8a1,1 0 0 0 0,1.41l0,0a1,1 0 0 0 1.41,0l9.62,-9.61a0.85,0.85 0 0 0 0,-1.2z" class="cls-1"/>
12 |  </g>
13 | </svg>


--------------------------------------------------------------------------------
/images/home_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <g>
 4 |   <title>background</title>
 5 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 6 |  </g>
 7 |  <g>
 8 |   <title fill="#707070">Layer 1</title>
 9 |   <path fill="#707070" id="svg_2" d="m43,46l-10,0c-1.7,0 -3,-1.3 -3,-3l0,-15c0,-0.6 -0.4,-1 -1,-1l-10,0c-0.6,0 -1,0.4 -1,1l0,15c0,1.7 -1.3,3 -3,3l-10,0c-1.7,0 -3,-1.3 -3,-3l0,-18.2c0,-0.8 0.3,-1.5 0.9,-2.1l19,-19c1.2,-1.2 3,-1.2 4.2,0l19,19c0.6,0.6 0.9,1.3 0.9,2.1l0,18.2c0,1.7 -1.3,3 -3,3zm-24,-21l10,0c1.7,0 3,1.3 3,3l0,15c0,0.6 0.4,1 1,1l10,0c0.6,0 1,-0.4 1,-1l0,-18.2c0,-0.3 -0.1,-0.5 -0.3,-0.7l-19,-19c-0.4,-0.4 -1,-0.4 -1.4,0l-19,19c-0.2,0.2 -0.3,0.4 -0.3,0.7l0,18.2c0,0.6 0.4,1 1,1l10,0c0.6,0 1,-0.4 1,-1l0,-15c0,-1.7 1.3,-3 3,-3z"/>
10 |  </g>
11 | </svg>


--------------------------------------------------------------------------------
/images/search_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 |  <desc/>
 4 | 
 5 |  <g>
 6 |   <title>background</title>
 7 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 8 |  </g>
 9 |  <g>
10 |   <title fill="#707070">Layer 1</title>
11 |   <path fill="#707070" id="search" d="m19.42712,21.42712c-1.38987,0.99036 -3.09047,1.57288 -4.92712,1.57288c-4.69442,0 -8.5,-3.80558 -8.5,-8.5c0,-4.69442 3.80558,-8.5 8.5,-8.5c4.69442,0 8.5,3.80558 8.5,8.5c0,1.83665 -0.58252,3.53725 -1.57288,4.92712l5.5848,5.5848c0.5502,0.5502 0.54561,1.43055 -0.0002,1.97636l-0.02344,0.02344c-0.54442,0.54442 -1.43066,0.5459 -1.97636,0.0002l-5.5848,-5.5848l0,0zm-4.92712,-0.42712c3.58985,0 6.5,-2.91015 6.5,-6.5c0,-3.58985 -2.91015,-6.5 -6.5,-6.5c-3.58985,0 -6.5,2.91015 -6.5,6.5c0,3.58985 2.91015,6.5 6.5,6.5l0,0z"/>
12 |  </g>
13 | </svg>


--------------------------------------------------------------------------------
/images/share_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <g>
 4 |   <title>background</title>
 5 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 6 |  </g>
 7 |  <g>
 8 |   <title fill="#777777">Layer 1</title>
 9 |   <path fill="#777777" id="svg_2" d="m94,81c9.4,0 17,-7.6 17,-17s-7.6,-17 -17,-17c-4.8,0 -9.1,2 -12.2,5.2l-31.5,-18.3c0.5,-1.5 0.7,-3.2 0.7,-4.9c0,-9.4 -7.6,-17 -17,-17s-17,7.6 -17,17s7.6,17 17,17c4.8,0 9.1,-2 12.2,-5.2l31.5,18.4c-0.4,1.5 -0.7,3.1 -0.7,4.8s0.3,3.3 0.7,4.9l-31.5,18.3c-3.1,-3.2 -7.4,-5.2 -12.2,-5.2c-9.4,0 -17,7.6 -17,17s7.6,17 17,17s17,-7.6 17,-17c0,-1.7 -0.3,-3.3 -0.7,-4.9l31.5,-18.4c3.1,3.3 7.4,5.3 12.2,5.3zm0,-26c5,0 9,4 9,9s-4,9 -9,9s-9,-4 -9,-9s4,-9 9,-9zm-60,-17c-5,0 -9,-4 -9,-9s4,-9 9,-9s9,4 9,9s-4,9 -9,9zm0,70c-5,0 -9,-4 -9,-9s4,-9 9,-9s9,4 9,9s-4,9 -9,9z"/>
10 |  </g>
11 | </svg>


--------------------------------------------------------------------------------
/images/20d4cfe2bfa02d3768fd2e6593f47a0d.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 |  <desc/>
 4 | 
 5 |  <g>
 6 |   <title>background</title>
 7 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 8 |  </g>
 9 |  <g>
10 |   <title fill="#707070">Layer 1</title>
11 |   <path fill="#707070" id="search" d="m19.42712,21.42712c-1.38987,0.99036 -3.09047,1.57288 -4.92712,1.57288c-4.69442,0 -8.5,-3.80558 -8.5,-8.5c0,-4.69442 3.80558,-8.5 8.5,-8.5c4.69442,0 8.5,3.80558 8.5,8.5c0,1.83665 -0.58252,3.53725 -1.57288,4.92712l5.5848,5.5848c0.5502,0.5502 0.54561,1.43055 -0.0002,1.97636l-0.02344,0.02344c-0.54442,0.54442 -1.43066,0.5459 -1.97636,0.0002l-5.5848,-5.5848l0,0zm-4.92712,-0.42712c3.58985,0 6.5,-2.91015 6.5,-6.5c0,-3.58985 -2.91015,-6.5 -6.5,-6.5c-3.58985,0 -6.5,2.91015 -6.5,6.5c0,3.58985 2.91015,6.5 6.5,6.5l0,0z"/>
12 |  </g>
13 | </svg>


--------------------------------------------------------------------------------
/images/f016a82938f70fb2a4d3a0d91722694c.svg:
--------------------------------------------------------------------------------
 1 | <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <g>
 4 |   <title>background</title>
 5 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 6 |  </g>
 7 |  <g>
 8 |   <title fill="#777777">Layer 1</title>
 9 |   <path fill="#777777" id="svg_2" d="m94,81c9.4,0 17,-7.6 17,-17s-7.6,-17 -17,-17c-4.8,0 -9.1,2 -12.2,5.2l-31.5,-18.3c0.5,-1.5 0.7,-3.2 0.7,-4.9c0,-9.4 -7.6,-17 -17,-17s-17,7.6 -17,17s7.6,17 17,17c4.8,0 9.1,-2 12.2,-5.2l31.5,18.4c-0.4,1.5 -0.7,3.1 -0.7,4.8s0.3,3.3 0.7,4.9l-31.5,18.3c-3.1,-3.2 -7.4,-5.2 -12.2,-5.2c-9.4,0 -17,7.6 -17,17s7.6,17 17,17s17,-7.6 17,-17c0,-1.7 -0.3,-3.3 -0.7,-4.9l31.5,-18.4c3.1,3.3 7.4,5.3 12.2,5.3zm0,-26c5,0 9,4 9,9s-4,9 -9,9s-9,-4 -9,-9s4,-9 9,-9zm-60,-17c-5,0 -9,-4 -9,-9s4,-9 9,-9s9,4 9,9s-4,9 -9,9zm0,70c-5,0 -9,-4 -9,-9s4,-9 9,-9s9,4 9,9s-4,9 -9,9z"/>
10 |  </g>
11 | </svg>


--------------------------------------------------------------------------------
/images/subscribe_active.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <title/>
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#707070">Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m27,27l-22,0a1,1 0 0 1 -0.89,-1.45a18.14,18.14 0 0 0 1.89,-8l0,-3.55a10,10 0 0 1 20,0l0,3.53a18.14,18.14 0 0 0 1.89,8a1,1 0 0 1 -0.89,1.47zm-20.45,-2l18.9,0a20.14,20.14 0 0 1 -1.45,-7.47l0,-3.53a8,8 0 0 0 -16,0l0,3.53a20.14,20.14 0 0 1 -1.45,7.47z" class="cls-1"/>
11 |   <path fill="#707070" id="svg_2" d="m16,31a5,5 0 0 1 -5,-5a1,1 0 0 1 2,0a3,3 0 0 0 0.88,2.12a3.08,3.08 0 0 0 4.24,0a1,1 0 0 1 1.42,1.42a5,5 0 0 1 -3.54,1.46z" class="cls-1"/>
12 |   <path fill="#707070" id="svg_3" d="m16,6a1,1 0 0 1 -1,-1l0,-3a1,1 0 0 1 2,0l0,3a1,1 0 0 1 -1,1z" class="cls-1"/>
13 |  </g>
14 | </svg>


--------------------------------------------------------------------------------
/images/4a1733e88f785f090f0e5001367663bb.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <title/>
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#707070">Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m27,27l-22,0a1,1 0 0 1 -0.89,-1.45a18.14,18.14 0 0 0 1.89,-8l0,-3.55a10,10 0 0 1 20,0l0,3.53a18.14,18.14 0 0 0 1.89,8a1,1 0 0 1 -0.89,1.47zm-20.45,-2l18.9,0a20.14,20.14 0 0 1 -1.45,-7.47l0,-3.53a8,8 0 0 0 -16,0l0,3.53a20.14,20.14 0 0 1 -1.45,7.47z" class="cls-1"/>
11 |   <path fill="#707070" id="svg_2" d="m16,31a5,5 0 0 1 -5,-5a1,1 0 0 1 2,0a3,3 0 0 0 0.88,2.12a3.08,3.08 0 0 0 4.24,0a1,1 0 0 1 1.42,1.42a5,5 0 0 1 -3.54,1.46z" class="cls-1"/>
12 |   <path fill="#707070" id="svg_3" d="m16,6a1,1 0 0 1 -1,-1l0,-3a1,1 0 0 1 2,0l0,3a1,1 0 0 1 -1,1z" class="cls-1"/>
13 |  </g>
14 | </svg>


--------------------------------------------------------------------------------
/images/custom_adsense.js:
--------------------------------------------------------------------------------
 1 | (() => {
 2 |   const targets = document.querySelectorAll(".bc-markdown h2[data-ke-size]");
 3 |   const ads = `
 4 |     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 5 |     <ins class="adsbygoogle"
 6 |         style="display:block; text-align:center;"
 7 |         data-ad-layout="in-article"
 8 |         data-ad-format="fluid"
 9 |         data-ad-client="ca-pub-2137294472379721"
10 |         data-ad-slot="6068137219"></ins>
11 |     <script>
12 |         (adsbygoogle = window.adsbygoogle || []).push({});
13 |     </script>  
14 |   `;
15 | 
16 |   Array.from(targets).map(el => {
17 |     const div = document.createElement("div");
18 |     const parentEl = el.parentNode;
19 | 
20 |     div.classList.add("bc-ads-holder");
21 |     div.classList.add("revenue_unit_item");
22 |     div.classList.add("adsense");
23 |     div.classList.add("responsive");
24 | 
25 |     div.innerHTML = ads;
26 | 
27 |     parentEl.insertBefore(div, el);
28 |   });
29 | })();
30 | 


--------------------------------------------------------------------------------
/images/unlock_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 | 
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#707070">Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m380,450l-237,0a15,15 0 0 1 -15,-15l0,-221.34a15,15 0 0 1 15,-15l237,0a15,15 0 0 1 15,15l0,221.34a15,15 0 0 1 -15,15zm-222,-30l207,0l0,-191.34l-207,0l0,191.34z"/>
11 |   <path fill="#707070" id="svg_2" d="m351.66,228.66l-180.25,0a15,15 0 0 1 0,-30l165.25,0l0,-45.54a75.13,75.13 0 0 0 -150.25,0a15,15 0 0 1 -30,0a105.13,105.13 0 0 1 210.25,0l0,60.54a15,15 0 0 1 -15,15z"/>
12 |   <path fill="#707070" id="svg_3" d="m261.54,352.67a46.5,46.5 0 1 1 46.5,-46.5a46.55,46.55 0 0 1 -46.5,46.5zm0,-63a16.5,16.5 0 1 0 16.5,16.5a16.52,16.52 0 0 0 -16.5,-16.5z"/>
13 |   <path fill="#707070" id="svg_4" d="m261.54,389a15,15 0 0 1 -15,-15l0,-36.33a15,15 0 1 1 30,0l0,36.33a15,15 0 0 1 -15,15z"/>
14 |  </g>
15 | </svg>


--------------------------------------------------------------------------------
/images/lock_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
 2 |  <title/>
 3 | 
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#707070">Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m380,450l-237,0a15,15 0 0 1 -15,-15l0,-221.34a15,15 0 0 1 15,-15l237,0a15,15 0 0 1 15,15l0,221.34a15,15 0 0 1 -15,15zm-222,-30l207,0l0,-191.34l-207,0l0,191.34z"/>
11 |   <path fill="#707070" id="svg_2" d="m351.66,228.66l-180.25,0a15,15 0 0 1 -15,-15l0,-60.54a105.13,105.13 0 0 1 210.25,0l0,60.54a15,15 0 0 1 -15,15zm-165.25,-30l150.25,0l0,-45.54a75.13,75.13 0 0 0 -150.25,0l0,45.54z"/>
12 |   <path fill="#707070" id="svg_3" d="m261.54,352.67a46.5,46.5 0 1 1 46.5,-46.5a46.55,46.55 0 0 1 -46.5,46.5zm0,-63a16.5,16.5 0 1 0 16.5,16.5a16.52,16.52 0 0 0 -16.5,-16.5z"/>
13 |   <path fill="#707070" id="svg_4" d="m261.54,389a15,15 0 0 1 -15,-15l0,-36.33a15,15 0 1 1 30,0l0,36.33a15,15 0 0 1 -15,15z"/>
14 |  </g>
15 | </svg>


--------------------------------------------------------------------------------
/images/subscribe_inactive.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <title/>
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#707070">Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m16,31a5,5 0 0 1 -5,-5a1,1 0 0 1 2,0a3,3 0 0 0 0.88,2.12a3.06,3.06 0 0 0 4.24,0a1,1 0 0 1 1.42,1.42a5,5 0 0 1 -3.54,1.46z" class="cls-1"/>
11 |   <path fill="#707070" id="svg_2" d="m16,6a1,1 0 0 1 -1,-1l0,-3a1,1 0 0 1 2,0l0,3a1,1 0 0 1 -1,1z" class="cls-1"/>
12 |   <rect fill="#707070" id="svg_3" y="-1.615632" x="15.825894" width="2" transform="rotate(-47 16.825893402099616,16.769367218017578) " height="36.77" class="cls-1"/>
13 |   <path fill="#707070" id="svg_4" d="m26.73,27l-21.73,0a1,1 0 0 1 -0.89,-1.45a18.08,18.08 0 0 0 1.89,-8l0,-3.55a8,8 0 0 1 0.06,-1a1,1 0 1 1 2,0.28a6,6 0 0 0 -0.06,0.72l0,3.53a20.07,20.07 0 0 1 -1.45,7.47l20.18,0a1,1 0 1 1 0,2z" class="cls-1"/>
14 |   <path fill="#707070" id="svg_5" d="m25.06,20a1,1 0 0 1 -1,-0.92q-0.06,-0.77 -0.06,-1.55l0,-3.53a8,8 0 0 0 -12.07,-6.88a7.66,7.66 0 0 0 -2.58,2.45a1,1 0 1 1 -1.68,-1.1a9.74,9.74 0 0 1 3.25,-3.07a9.95,9.95 0 0 1 12.15,1.54a9.86,9.86 0 0 1 2.93,7.06l0,3.53c0,0.46 0,0.91 0.06,1.37a1,1 0 0 1 -0.92,1.1l-0.08,0z" class="cls-1"/>
15 |  </g>
16 | </svg>


--------------------------------------------------------------------------------
/images/fd5ecfdfbebd455c240c9f413a2d9555.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <title/>
 4 |  <g>
 5 |   <title>background</title>
 6 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 7 |  </g>
 8 |  <g>
 9 |   <title fill="#707070">Layer 1</title>
10 |   <path fill="#707070" id="svg_1" d="m16,31a5,5 0 0 1 -5,-5a1,1 0 0 1 2,0a3,3 0 0 0 0.88,2.12a3.06,3.06 0 0 0 4.24,0a1,1 0 0 1 1.42,1.42a5,5 0 0 1 -3.54,1.46z" class="cls-1"/>
11 |   <path fill="#707070" id="svg_2" d="m16,6a1,1 0 0 1 -1,-1l0,-3a1,1 0 0 1 2,0l0,3a1,1 0 0 1 -1,1z" class="cls-1"/>
12 |   <rect fill="#707070" id="svg_3" y="-1.615632" x="15.825894" width="2" transform="rotate(-47 16.825893402099616,16.769367218017578) " height="36.77" class="cls-1"/>
13 |   <path fill="#707070" id="svg_4" d="m26.73,27l-21.73,0a1,1 0 0 1 -0.89,-1.45a18.08,18.08 0 0 0 1.89,-8l0,-3.55a8,8 0 0 1 0.06,-1a1,1 0 1 1 2,0.28a6,6 0 0 0 -0.06,0.72l0,3.53a20.07,20.07 0 0 1 -1.45,7.47l20.18,0a1,1 0 1 1 0,2z" class="cls-1"/>
14 |   <path fill="#707070" id="svg_5" d="m25.06,20a1,1 0 0 1 -1,-0.92q-0.06,-0.77 -0.06,-1.55l0,-3.53a8,8 0 0 0 -12.07,-6.88a7.66,7.66 0 0 0 -2.58,2.45a1,1 0 1 1 -1.68,-1.1a9.74,9.74 0 0 1 3.25,-3.07a9.95,9.95 0 0 1 12.15,1.54a9.86,9.86 0 0 1 2.93,7.06l0,3.53c0,0.46 0,0.91 0.06,1.37a1,1 0 0 1 -0.92,1.1l-0.08,0z" class="cls-1"/>
15 |  </g>
16 | </svg>


--------------------------------------------------------------------------------
/images/bottom_menu_icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <g>
 4 |   <title>background</title>
 5 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 6 |  </g>
 7 |  <g>
 8 |   <title fill="#707070">Layer 1</title>
 9 |   <path id="svg_1" fill="#707070" d="m8,7.29805c0,-0.44183 0.35817,-0.8 0.8,-0.8l16.4,0c0.4418,0 0.8,0.35817 0.8,0.8l0,0.4c0,0.44182 -0.3582,0.8 -0.8,0.8l-16.4,0c-0.44183,0 -0.8,-0.35818 -0.8,-0.8l0,-0.4z"/>
10 |   <path id="svg_2" fill="#707070" d="m8,21.298c0,-0.4418 0.35817,-0.8 0.8,-0.8l16.4,0c0.4418,0 0.8,0.3582 0.8,0.8l0,0.4c0,0.4419 -0.3582,0.8 -0.8,0.8l-16.4,0c-0.44183,0 -0.8,-0.3581 -0.8,-0.8l0,-0.4z"/>
11 |   <path id="svg_3" fill="#707070" d="m8,14.298c0,-0.4418 0.35817,-0.8 0.8,-0.8l16.4,0c0.4418,0 0.8,0.3582 0.8,0.8l0,0.4c0,0.4419 -0.3582,0.8 -0.8,0.8l-16.4,0c-0.44183,0 -0.8,-0.3581 -0.8,-0.8l0,-0.4z"/>
12 |   <path id="svg_4" fill="#707070" d="m5,7.5c0,0.82843 -0.67157,1.5 -1.5,1.5c-0.82843,0 -1.5,-0.67157 -1.5,-1.5c0,-0.82843 0.67157,-1.5 1.5,-1.5c0.82843,0 1.5,0.67157 1.5,1.5z"/>
13 |   <path id="svg_5" fill="#707070" d="m5,21.498c0,0.8285 -0.67157,1.5 -1.5,1.5c-0.82843,0 -1.5,-0.6715 -1.5,-1.5c0,-0.8284 0.67157,-1.5 1.5,-1.5c0.82843,0 1.5,0.6716 1.5,1.5z"/>
14 |   <path id="svg_6" fill="#707070" d="m5,14.498c0,0.8285 -0.67157,1.5 -1.5,1.5c-0.82843,0 -1.5,-0.6715 -1.5,-1.5c0,-0.8284 0.67157,-1.5 1.5,-1.5c0.82843,0 1.5,0.6716 1.5,1.5z"/>
15 |  </g>
16 | </svg>


--------------------------------------------------------------------------------
/images/script.xVsJkRhgF2lCEZoODeL1.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   var el = document.querySelector('.bc-markdown .bc-markdown__inner-content');
 3 |   if (!el) return;
 4 | 
 5 |   var scrollEventHandler = function scrollEventHandler() {
 6 |     if (window.innerHeight + window.scrollY >= el.offsetHeight) {
 7 |       try {
 8 |         window.removeEventListener('scroll', scrollEventHandler);
 9 |         var elms = Array.from(document.querySelectorAll('.prev-next-article'));
10 | 
11 |         elms.map(function(el) {
12 |           return el.classList.add('visible');
13 |         });
14 | 
15 |         // 공감했으면 문구 필요없음
16 |         var likeEl = document.querySelector(".postbtn_like .btn_post");
17 | 
18 |         // 공감하지 않았다면 유도문구 추가
19 |         if (!likeEl.querySelector('.like_on')) {
20 |           __BASECAMP__.toast.send(__TISTORY_VARIABLES__['toast-msg-post-end']);
21 |           // 모바일에서 visible 공감영역 visible 시킨다.
22 |           var sideMenuEl = document.querySelector('.bc-markdown .bc-markdown__left-side-menu');
23 | 
24 |           sideMenuEl.style.opacity = 1;
25 |         }
26 |         setTimeout(function() {
27 |           elms.map(function(el) {
28 |             return el.classList.remove('visible');
29 |           });
30 |         }, 8000);
31 |       } catch (err) {
32 |         console.error(err);
33 |       }
34 |     }
35 |   };
36 |   window.addEventListener('scroll', scrollEventHandler);
37 | })();
38 | (function() {
39 |   if (!document.querySelector('.bc-markdown')) return;
40 |   var el = document.createElement('div');
41 |   var title = document.querySelector('.bc-markdown .bc-markdown__header .heading').textContent;
42 |   var imageEl = document.querySelector('.bc-markdown .thumbnail').innerHTML;
43 |   var shares = ['kakao', 'facebook', 'naver', 'twitter', 'band', 'kakaostory'].reduce(function(acc, v) {
44 |     return acc + ('<li class="bc-share__item" data-share-item="' + v + '"><span class="bc-share__item-icon bc-share__item-icon--' + v + '"></span></li>');
45 |   }, '');
46 |   el.classList.add('bc-share');
47 |   el.innerHTML = '\n      ' + imageEl + '\n      <div class="content">\n        <p class="title">' + title + '</p>\n        <ul>\n          ' + shares + '\n        </ul>\n        <div class="url-copy-holder">\n          <input id="copy" value="' + location.href + '" readonly="readonly">\n          <button data-clipboard-target="#copy" class="copy-btn">\uC8FC\uC18C\uBCF5\uC0AC</button>\n        </div>        \n      </div>\n    ';
48 | 
49 |   document.querySelector('.share-btn').addEventListener('click', function(e) {
50 |     e.preventDefault();
51 | 
52 |     __BASECAMP__.popup.show(el);
53 |   });
54 | 
55 |   document.querySelector('.search-btn').addEventListener('click', function(e) {
56 |     document.querySelector('.bc-header .menu-opener').click();
57 |   });
58 | 
59 |   document.querySelector('#share-reaction').addEventListener('click', function() {
60 |     __BASECAMP__.popup.show(el);
61 |   });
62 | 
63 |   el.querySelector('ul').addEventListener('click', function(e) {
64 |     var target = e.target.getAttribute('data-share-item') || e.target.closest('.bc-share__item').getAttribute('data-share-item');
65 |     __BASECAMP__.share.push(target);
66 |   });
67 |   el.querySelector('.copy-btn').addEventListener('click', function() {
68 |     __BASECAMP__.share.copy();
69 |     __BASECAMP__.popup.hide();
70 | 
71 |     __BASECAMP__.toast.send(__TISTORY_VARIABLES__['toast-msg-copy']);
72 |   });
73 | })();
74 | (function() {
75 |   window.addEventListener('load', function() {
76 |     var date = new Date();
77 |     document.querySelector('.bc-footer .copyright time').textContent = date.getFullYear();
78 |   });
79 | })();
80 | 


--------------------------------------------------------------------------------
/index.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <skin>
  3 |    <information>
  4 |       <name>베이스캠프</name>
  5 |       <version>1.0.0-rc1</version>
  6 |       <description>
  7 |          <![CDATA[웹표준을 준수한 HTML5 기반의 Tistory 기본 스킨입니다.]]>
  8 |       </description>
  9 |       <license>
 10 |          <![CDATA[자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.]]>
 11 |       </license>
 12 |    </information>
 13 |    <author>
 14 |       <name>박경두</name>
 15 |       <homepage>webruden.tistory.com</homepage>
 16 |       <email>ruden91@naver.com</email>
 17 |    </author>
 18 |    <variables>
 19 |       <variablegroup>   
 20 |          <variable>
 21 |             <name>copyright</name>
 22 |             <label><![CDATA[ 저작권 ]]></label>
 23 |             <description></description>
 24 |             <type>STRING</type>
 25 |             <default>베이스캠프</default>
 26 |          </variable>       
 27 |          <!-- <variable>
 28 |          <name>theme</name>
 29 |          <label>테마</label>
 30 |          <description><![CDATA[ 블로그 테마 ]]></description>
 31 |          <type>SELECT</type>
 32 |          <option><![CDATA[
 33 |             [
 34 |                { "name": "light", "label": "라이트 모드", "value": "light" },
 35 |                { "name": "dark", "label": "다크 모드", "value": "dark" }
 36 |             ]
 37 |          ]]></option>
 38 |          <default>light</default>
 39 |          </variable>       -->
 40 |          <variable>
 41 |             <name>logo-image</name>
 42 |             <label><![CDATA[ 로고 이미지 ]]></label>
 43 |             <description></description>
 44 |             <type>IMAGE</type>
 45 |             <default></default>
 46 |          </variable>      
 47 |          <variable>
 48 |             <name>primary-color</name>
 49 |             <label><![CDATA[ 브랜드 컬러 ]]></label>
 50 |             <description></description>
 51 |             <type>COLOR</type>
 52 |             <default><![CDATA[#3b3e79]]></default>
 53 |          </variable>      
 54 |          <variable>
 55 |             <name>enabled-backtop</name>
 56 |             <label>맨 위로 가기 버튼</label>
 57 |             <description></description>
 58 |             <type>BOOL</type>
 59 |             <default>true</default>
 60 |          </variable>         
 61 |          <variable>
 62 |             <name>disable-sidebar</name>
 63 |             <label>사이드바 비활성화</label>
 64 |             <description></description>
 65 |             <type>BOOL</type>
 66 |             <default>false</default>
 67 |          </variable> 
 68 |          <variable>
 69 |             <name>active-header-searchbar</name>
 70 |             <label>헤더 검색바 활성화</label>
 71 |             <description></description>
 72 |             <type>BOOL</type>
 73 |             <default>true</default>
 74 |          </variable>                    
 75 |          <variable>
 76 |             <name>active-sidebar-sticky</name>
 77 |             <label>사이드바 고정</label>
 78 |             <description></description>
 79 |             <type>BOOL</type>
 80 |             <default>true</default>
 81 |          </variable>                    
 82 |       </variablegroup>
 83 |       <variablegroup name="폰트">        
 84 |          <variable>
 85 |             <name>markdown-default-font-size</name>
 86 |             <label>포스팅 폰트 사이즈</label>
 87 |             <description>해당 폰트 기본값을 기준으로 콘텐츠 내부 폰트 사이즈가 조정됩니다.</description>
 88 |             <type>STRING</type>
 89 |             <default>16px</default>
 90 |          </variable>      
 91 |          <variable>
 92 |             <name>markdown-heading-font-size</name>
 93 |             <label>포스팅 타이틀 사이즈</label>
 94 |             <description></description>
 95 |             <type>STRING</type>
 96 |             <default>2.2em</default>
 97 |          </variable>
 98 |          <variable>
 99 |             <name>markdown-p-font-size</name>
100 |             <label>포스팅 본문 폰트 사이즈</label>
101 |             <description></description>
102 |             <type>STRING</type>
103 |             <default>1.12em</default>
104 |          </variable>                                                                  
105 |       </variablegroup>      
106 |       <variablegroup name="메시지">        
107 |          <variable>
108 |             <name>toast-msg-copy</name>
109 |             <label>복사</label>
110 |             <description></description>
111 |             <type>STRING</type>
112 |             <default>포스팅 주소를 복사했습니다 📄</default>
113 |          </variable>        
114 |          <variable>
115 |             <name>toast-msg-post-like</name>
116 |             <label>공감</label>
117 |             <description></description>
118 |             <type>STRING</type>
119 |             <default>소중한 공감 하나 감사합니다 💖</default>
120 |          </variable>        
121 |          <variable>
122 |             <name>toast-msg-post-end</name>
123 |             <label>포스트 엔딩</label>
124 |             <description></description>
125 |             <type>STRING</type>
126 |             <default>유익하셨다면 공감 하나 부탁드릴게요! ✨</default>
127 |          </variable>               
128 |       </variablegroup>      
129 |       <variablegroup name="프로필">        
130 |          <variable>
131 |             <name>enabled-profile</name>
132 |             <label>사용유무</label>
133 |             <description></description>
134 |             <type>BOOL</type>
135 |             <default>true</default>
136 |          </variable>         
137 |          <variable>
138 |             <name>profile-bg-image</name>
139 |             <label>배경 이미지</label>
140 |             <description></description>
141 |             <type>IMAGE</type>
142 |             <default></default>
143 |          </variable>         
144 |          <variable>
145 |             <name>profile-avatar</name>
146 |             <label>아바타</label>
147 |             <description></description>
148 |             <type>IMAGE</type>
149 |             <default></default>
150 |          </variable>         
151 |          <variable>
152 |             <name>profile-title</name>
153 |             <label>타이틀</label>
154 |             <description></description>
155 |             <type>STRING</type>
156 |             <default></default>
157 |          </variable>         
158 |          <variable>
159 |             <name>profile-sub-title</name>
160 |             <label>서브 타이틀</label>
161 |             <description></description>
162 |             <type>STRING</type>
163 |             <default></default>
164 |          </variable>         
165 |          <variable>
166 |             <name>enabled-counter</name>
167 |             <label>방문자수</label>
168 |             <description></description>
169 |             <type>BOOL</type>
170 |             <default>true</default>
171 |          </variable>         
172 |       </variablegroup>
173 |       <variablegroup name="본문 커스텀 애드센스">        
174 |          <variable>
175 |             <name>enabled-custom-ads</name>
176 |             <label>활성화</label>
177 |             <description></description>
178 |             <type>BOOL</type>
179 |             <default>false</default>
180 |          </variable>         
181 |          <variable>
182 |             <name>ads-client</name>
183 |             <label>클라이언트</label>
184 |             <description></description>
185 |             <type>STRING</type>
186 |             <default></default>
187 |          </variable>         
188 |          <variable>
189 |             <name>ads-slot</name>
190 |             <label>슬롯</label>
191 |             <description></description>
192 |             <type>STRING</type>
193 |             <default></default>
194 |          </variable>         
195 |       </variablegroup>      
196 |       <variablegroup name="구글 태그 매니저">        
197 |          <variable>
198 |             <name>enabled-gtm</name>
199 |             <label>활성화</label>
200 |             <description></description>
201 |             <type>BOOL</type>
202 |             <default>false</default>
203 |          </variable>         
204 |          <variable>
205 |             <name>gtm-id</name>
206 |             <label>GTM 코드</label>
207 |             <description></description>
208 |             <type>STRING</type>
209 |             <default></default>
210 |          </variable>                 
211 |       </variablegroup>
212 |       <variablegroup name="퍼머링크">        
213 |          <variable>
214 |             <name>markdown-marginless</name>
215 |             <label>마크다운 간격 초기화</label>
216 |             <description></description>
217 |             <type>BOOL</type>
218 |             <default>true</default>
219 |          </variable>                         
220 |       </variablegroup>
221 |    </variables>   
222 | </skin>
223 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
   1 | :root {
   2 |   --primary-color: #3b3e79;
   3 |   --default-link-color: #707070;
   4 |   --gray-color-1: #eef1f3;
   5 |   --gray-color-2: #e8ebee;
   6 |   --gray-color-3: #202020;
   7 |   --gray-color-4: #404040;
   8 |   --gray-color-5: #707070;
   9 |   --default-font-color: #000;
  10 |   --sm-font-size: 12px;
  11 |   --markdown-default-font-size: 16px;
  12 |   --markdown-heading-font-size: 2.2em;
  13 |   --markdown-p-font-size: 1.12em;
  14 |   --default-bg-color: #fff;
  15 |   --body-bg-color: #fafbfc;
  16 |   --markdown-bg-color: #fff;
  17 |   --header-bg-color: #fff;
  18 |   --footer-bg-color: #f7f9fa;
  19 |   --navigation-bg-color: #fff;
  20 |   --markdown-border-color: #e8ebee;
  21 |   --navigation-border-color: #ebeeef;
  22 |   --default-button-color: #fff;
  23 |   --dim-color-1: rgba(0,0,0,0.7);
  24 |   --dim-color-2: rgba(0,0,0,0.5);
  25 |   --full-height: 100%;
  26 |   --gutter: 16px
  27 | }
  28 | [data-darkmode=true] {
  29 |   --default-font-color: #202020;
  30 |   --default-bg-color: #292a2d;
  31 |   --body-bg-color: #1e1f21;
  32 |   --markdown-bg-color: #2c2d30;
  33 |   --header-bg-color: #292a2d;
  34 |   --footer-bg-color: #292a2d;
  35 |   --navigation-bg-color: #1e1f21;
  36 |   --markdown-border-color: #3a3b3d;
  37 |   --navigation-border-color: #1e1f21
  38 | }
  39 | html {
  40 |   line-height: 1.5
  41 | }
  42 | * {
  43 |   padding: 0;
  44 |   margin: 0;
  45 |   font-family: Noto Sans KR,sans-serif;
  46 |   box-sizing: border-box
  47 | }
  48 | body {
  49 |   font-size: 14px;
  50 |   background-color: var(--body-bg-color)
  51 | }
  52 | a {
  53 |   cursor: pointer;
  54 |   color: var(--default-link-color);
  55 |   text-decoration: none;
  56 |   font-style: normal
  57 | }
  58 | li,
  59 | ol,
  60 | ul {
  61 |   list-style: none
  62 | }
  63 | button {
  64 |   border: 0;
  65 |   padding: 0;
  66 |   outline: 0;
  67 |   background: 0 0
  68 | }
  69 | .tag,
  70 | body.prevent-body-scrolling {
  71 |   overflow: hidden
  72 | }
  73 | .tag {
  74 |   display: block;
  75 |   font-size: 12px;
  76 |   color: #000;
  77 |   position: relative;
  78 |   max-width: 100%;
  79 |   height: 28px;
  80 |   padding: 0 9px;
  81 |   line-height: 28px;
  82 |   background-color: #f3f3f3;
  83 |   margin-right: 10px;
  84 |   margin-bottom: 10px
  85 | }
  86 | .tag:before {
  87 |   display: inline-block;
  88 |   content: "#"
  89 | }
  90 | .layer_tooltip {
  91 |   display: none!important
  92 | }
  93 | #bc-subscribe,
  94 | .btn_subscription {
  95 |   opacity: 0
  96 | }
  97 | .box-no-search {
  98 |   width: 100%;
  99 |   display: none
 100 | }
 101 | .box-no-search span {
 102 |   font-size: 1.2em;
 103 |   text-align: center;
 104 |   display: block;
 105 |   margin-bottom: 8px
 106 | }
 107 | #tt-body-archive .type-archive,
 108 | #tt-body-category .type-category,
 109 | #tt-body-search .type-search,
 110 | #tt-body-tag .type-tag {
 111 |   display: block
 112 | }
 113 | img:not([src]):not([srcset]) {
 114 |   visibility: hidden
 115 | }
 116 | .box-no-search {
 117 |   padding-top: 50px;
 118 |   padding-bottom: 100px;
 119 |   height: 50vh
 120 | }
 121 | .bc-header {
 122 |   background-color: var(--header-bg-color);
 123 |   border-bottom: 1px solid var(--primary-color);
 124 |   box-shadow: 0 1.5px 4px 0 rgba(0,0,0,.05)
 125 | }
 126 | .bc-header .right-side .search-holder {
 127 |   display: none
 128 | }
 129 | @media only all and (min-width:768px) {
 130 |   .bc-header .right-side .search-holder {
 131 |     display: block
 132 |   }
 133 | }
 134 | .bc-header .flex-holder {
 135 |   display: flex;
 136 |   align-items: center;
 137 |   height: 65px
 138 | }
 139 | .bc-header .left-side {
 140 |   display: flex;
 141 |   align-items: center;
 142 |   flex: 1
 143 | }
 144 | .bc-header .search-holder {
 145 |   flex: 1
 146 | }
 147 | .bc-header .right-side {
 148 |   margin-left: auto
 149 | }
 150 | .menu-opener {
 151 |   display: flex;
 152 |   width: 32px;
 153 |   height: 32px;
 154 |   align-items: center;
 155 |   justify-content: center
 156 | }
 157 | .menu-opener img {
 158 |   width: 28px
 159 | }
 160 | #tt-body-page .bc-markdown hr[data-ke-style] {
 161 |   margin-top: 30px!important;
 162 |   margin-bottom: 14px!important
 163 | }
 164 | #tt-body-page .bc-markdown p[data-ke-size=size18] {
 165 |   font-size: var(--markdown-p-font-size)
 166 | }
 167 | #tt-body-page:not(.marginless) .bc-markdown hr[data-ke-style] {
 168 |   margin-top: 0!important;
 169 |   margin-bottom: 30px!important
 170 | }
 171 | #tt-body-page:not(.marginless) .bc-markdown__inner-content blockquote,
 172 | #tt-body-page:not(.marginless) .bc-markdown__inner-content figure,
 173 | #tt-body-page:not(.marginless) .bc-markdown__inner-content h2,
 174 | #tt-body-page:not(.marginless) .bc-markdown__inner-content h3,
 175 | #tt-body-page:not(.marginless) .bc-markdown__inner-content h4,
 176 | #tt-body-page:not(.marginless) .bc-markdown__inner-content ol,
 177 | #tt-body-page:not(.marginless) .bc-markdown__inner-content p,
 178 | #tt-body-page:not(.marginless) .bc-markdown__inner-content pre,
 179 | #tt-body-page:not(.marginless) .bc-markdown__inner-content table,
 180 | #tt-body-page:not(.marginless) .bc-markdown__inner-content ul {
 181 |   margin-bottom: 30px!important
 182 | }
 183 | .bc-markdown {
 184 |   position: relative;
 185 |   line-height: 1.5;
 186 |   font-size: var(--markdown-default-font-size);
 187 |   padding: 50px 16px;
 188 |   border: 1px solid var(--markdown-border-color);
 189 |   border-radius: 12px;
 190 |   box-shadow: 0 1px 1px 0 rgba(0,0,0,.03);
 191 |   background-color: var(--markdown-bg-color)
 192 | }
 193 | @media only all and (min-width:768px) {
 194 |   .bc-markdown {
 195 |     padding-left: 34px;
 196 |     padding-right: 34px
 197 |   }
 198 | }
 199 | .bc-markdown .thumbnail {
 200 |   display: none
 201 | }
 202 | .bc-markdown__left-side-menu {
 203 |   opacity: 0
 204 | }
 205 | .bc-markdown__header {
 206 |   margin-bottom: 30px
 207 | }
 208 | .bc-markdown__header .category {
 209 |   margin-bottom: 8px
 210 | }
 211 | .bc-markdown__header .category a {
 212 |   color: var(--primary-color);
 213 |   font-weight: 700
 214 | }
 215 | .bc-markdown__header .heading {
 216 |   font-size: var(--markdown-heading-font-size);
 217 |   line-height: 1.1
 218 | }
 219 | .bc-markdown__header .heading a {
 220 |   color: var(--gray-color-3)
 221 | }
 222 | .bc-markdown__header .subinfo {
 223 |   white-space: nowrap;
 224 |   margin-top: 20px
 225 | }
 226 | .bc-markdown__header .subinfo p,
 227 | .bc-markdown__header .subinfo span {
 228 |   display: inline-block;
 229 |   font-size: 14px
 230 | }
 231 | .bc-markdown__header .subinfo span {
 232 |   margin-right: 4px
 233 | }
 234 | .bc-markdown__header .subinfo__name {
 235 |   color: var(--gray-color-3);
 236 |   margin-right: 8px;
 237 |   font-weight: 500
 238 | }
 239 | .bc-markdown__header .subinfo__date {
 240 |   color: var(--gray-color-5)
 241 | }
 242 | .bc-markdown .post-inner-ads {
 243 |   margin-bottom: 30px
 244 | }
 245 | .bc-markdown__inner-content p {
 246 |   font-weight: 300
 247 | }
 248 | .bc-markdown__inner-content .og-host {
 249 |   margin-bottom: 0!important
 250 | }
 251 | .bc-markdown__inner-content table {
 252 |   overflow-x: scroll;
 253 |   border: none;
 254 |   table-layout: fixed
 255 | }
 256 | .bc-markdown__inner-content table tbody tr:nth-child(2n) {
 257 |   background-color: #f8f9fa
 258 | }
 259 | .bc-markdown__inner-content table tbody td {
 260 |   font-size: 13px;
 261 |   text-align: center;
 262 |   padding: 12px;
 263 |   word-break: break-word
 264 | }
 265 | .bc-markdown__inner-content ol,
 266 | .bc-markdown__inner-content ul {
 267 |   margin-left: 20px
 268 | }
 269 | .bc-markdown__inner-content ol li,
 270 | .bc-markdown__inner-content ul li {
 271 |   margin-bottom: 5px
 272 | }
 273 | .bc-markdown__inner-content ol li:last-child,
 274 | .bc-markdown__inner-content ul li:last-child {
 275 |   margin-bottom: 0
 276 | }
 277 | .bc-markdown__inner-content hr {
 278 |   margin: 0 auto 30px!important
 279 | }
 280 | .bc-markdown__inner-content a {
 281 |   color: var(--primary-color);
 282 |   text-decoration: underline;
 283 |   font-weight: 700
 284 | }
 285 | .bc-markdown .another_category {
 286 |   margin-top: 30px;
 287 |   margin-bottom: 30px;
 288 |   border: none;
 289 |   background-color: #f8f9fa;
 290 |   box-shadow: 0 0 4px 0 rgba(0,0,0,.06);
 291 |   padding-top: 12px;
 292 |   padding-left: 12px;
 293 |   padding-right: 12px
 294 | }
 295 | .bc-markdown .another_category h4 {
 296 |   font-size: 1em!important;
 297 |   border: none;
 298 |   margin-bottom: 0!important
 299 | }
 300 | .bc-markdown .another_category h4 a {
 301 |   text-decoration: none!important
 302 | }
 303 | .bc-markdown .another_category table {
 304 |   margin-bottom: 0!important
 305 | }
 306 | .bc-markdown .another_category table a {
 307 |   text-decoration: none
 308 | }
 309 | .bc-markdown .another_category table tbody {
 310 |   border-bottom: none
 311 | }
 312 | .bc-markdown .another_category table tbody tr {
 313 |   line-height: 35px;
 314 |   border-bottom: none!important
 315 | }
 316 | .bc-markdown .another_category table tbody tr th {
 317 |   overflow: hidden;
 318 |   word-wrap: normal;
 319 |   white-space: nowrap;
 320 |   text-overflow: ellipsis;
 321 |   text-align: left;
 322 |   flex: 1
 323 | }
 324 | .bc-markdown .another_category table tbody tr td {
 325 |   flex: none;
 326 |   width: 80px
 327 | }
 328 | .bc-markdown .another_category table tbody:after {
 329 |   content: "";
 330 |   display: table;
 331 |   clear: both
 332 | }
 333 | @media only all and (min-width:768px) {
 334 |   .bc-markdown .another_category table tbody tr {
 335 |     width: 50%
 336 |   }
 337 | }
 338 | .bc-markdown__left-side-drawer.visible .panel {
 339 |   transform: translateX(0)
 340 | }
 341 | .bc-markdown__left-side-drawer.visible .dim {
 342 |   display: block
 343 | }
 344 | .bc-markdown__left-side-drawer .dim {
 345 |   display: none;
 346 |   position: fixed;
 347 |   top: 0;
 348 |   left: 0;
 349 |   width: 100%;
 350 |   height: var(--full-height);
 351 |   background: var(--dim-color-2);
 352 |   z-index: 10000
 353 | }
 354 | .bc-markdown__left-side-drawer .panel {
 355 |   position: fixed;
 356 |   overflow-y: auto;
 357 |   transform: translateX(-100%);
 358 |   transition: transform .2s ease-in-out;
 359 |   top: 0;
 360 |   left: 0;
 361 |   width: 80%;
 362 |   height: 100%;
 363 |   background: #fff;
 364 |   z-index: 10001
 365 | }
 366 | .bc-markdown__left-side-drawer .panel .bc-quickmenu__list {
 367 |   padding: 30px 16px
 368 | }
 369 | .bc-markdown__left-side-drawer .panel .bc-quickmenu__list .bc-quickmenu__item--h2 {
 370 |   font-size: 16px;
 371 |   font-weight: 700;
 372 |   margin-bottom: 12px;
 373 |   margin-top: 12px
 374 | }
 375 | .bc-markdown__left-side-drawer .panel .bc-quickmenu__list .bc-quickmenu__item--h3 {
 376 |   padding-left: 16px;
 377 |   margin-bottom: 12px
 378 | }
 379 | @media only all and (min-width:768px) {
 380 |   .bc-markdown__bottom-navigator {
 381 |     display: none
 382 |   }
 383 | }
 384 | .recommend-bottom-drawer.visible .dim {
 385 |   display: block
 386 | }
 387 | .recommend-bottom-drawer.visible .panel {
 388 |   transform: translateY(0)
 389 | }
 390 | .recommend-bottom-drawer .dim {
 391 |   display: none;
 392 |   position: fixed;
 393 |   top: 0;
 394 |   left: 0;
 395 |   width: 100%;
 396 |   height: var(--full-height);
 397 |   background: var(--dim-color-2);
 398 |   z-index: 10000
 399 | }
 400 | .recommend-bottom-drawer .panel {
 401 |   position: fixed;
 402 |   transition: all .25s ease-in-out;
 403 |   transform: translateY(100%);
 404 |   bottom: 0;
 405 |   left: 0;
 406 |   right: 0;
 407 |   overflow: hidden;
 408 |   background: #fff;
 409 |   border-top-left-radius: 16px;
 410 |   border-top-right-radius: 16px;
 411 |   box-shadow: 0 -1px 4px 0 rgba(0,0,0,.05);
 412 |   z-index: 10001
 413 | }
 414 | .recommend-bottom-drawer .panel__inner {
 415 |   height: 80vh;
 416 |   overflow-y: auto;
 417 |   padding: 32px 16px
 418 | }
 419 | .recommend-bottom-drawer .another-content,
 420 | .recommend-bottom-drawer .prev-next-content,
 421 | .recommend-bottom-drawer .related-content {
 422 |   margin-bottom: 20px;
 423 |   padding-bottom: 20px;
 424 |   border-bottom: 1px solid var(--markdown-border-color)
 425 | }
 426 | .recommend-bottom-drawer .related-content h2 {
 427 |   text-align: left;
 428 |   font-size: 16px;
 429 |   margin-bottom: 12px;
 430 |   font-weight: 400
 431 | }
 432 | .recommend-bottom-drawer .related-content h2 b {
 433 |   color: var(--primary-color);
 434 |   font-weight: 700
 435 | }
 436 | .recommend-bottom-drawer .related-content ul {
 437 |   display: block;
 438 |   white-space: nowrap;
 439 |   overflow-x: auto
 440 | }
 441 | .recommend-bottom-drawer .related-content ul li {
 442 |   display: inline-block;
 443 |   width: 150px;
 444 |   margin-right: 12px
 445 | }
 446 | .recommend-bottom-drawer .related-content ul li .content p {
 447 |   overflow: hidden;
 448 |   word-wrap: normal;
 449 |   white-space: normal;
 450 |   text-overflow: ellipsis;
 451 |   display: inline-block;
 452 |   display: -webkit-box;
 453 |   -webkit-line-clamp: 2;
 454 |   -webkit-box-orient: vertical;
 455 |   text-align: left;
 456 |   font-size: 12px;
 457 |   color: var(--default-font-color)
 458 | }
 459 | .recommend-bottom-drawer .related-content ul li img {
 460 |   width: 100%;
 461 |   height: 100px;
 462 |   object-fit: cover
 463 | }
 464 | .recommend-bottom-drawer .prev-next-content .prev-article {
 465 |   margin-bottom: 12px
 466 | }
 467 | .recommend-bottom-drawer .prev-next-content img {
 468 |   width: 100%;
 469 |   object-fit: cover
 470 | }
 471 | .recommend-bottom-drawer .prev-next-content .content {
 472 |   text-align: left
 473 | }
 474 | .recommend-bottom-drawer .prev-next-content .content p {
 475 |   font-size: 14px;
 476 |   color: var(--gray-color-3)
 477 | }
 478 | .recommend-bottom-drawer .prev-next-content .content p.title {
 479 |   color: var(--gray-color-5);
 480 |   font-size: 12px
 481 | }
 482 | .recommend-bottom-drawer .recommend-content .popularPost > p,
 483 | .recommend-bottom-drawer .recommend-content .recentPost > p {
 484 |   display: none
 485 | }
 486 | .recommend-bottom-drawer .recommend-content > div {
 487 |   margin-top: 16px
 488 | }
 489 | .recommend-bottom-drawer .recommend-content > p {
 490 |   font-size: 16px;
 491 |   color: var(--gray-color-3);
 492 |   text-align: left;
 493 |   font-weight: 400
 494 | }
 495 | .recommend-bottom-drawer .recommend-content ul {
 496 |   display: block
 497 | }
 498 | .recommend-bottom-drawer .recommend-content ul li {
 499 |   text-align: left
 500 | }
 501 | .recommend-bottom-drawer .recommend-content ul li .title {
 502 |   font-size: 14px
 503 | }
 504 | .recommend-bottom-drawer .recommend-content ul li .category {
 505 |   display: none
 506 | }
 507 | .recommend-bottom-drawer .recommend-content ul li .date {
 508 |   font-size: 10px
 509 | }
 510 | .recommend-bottom-drawer .recommend-content ul li img {
 511 |   width: 64px;
 512 |   height: 64px
 513 | }
 514 | .recommend-bottom-drawer .another-content h4 {
 515 |   font-size: 16px;
 516 |   text-align: left;
 517 |   font-weight: 400
 518 | }
 519 | .recommend-bottom-drawer .another-content h4 a {
 520 |   font-weight: 700;
 521 |   color: var(--primary-color)
 522 | }
 523 | .recommend-bottom-drawer .another-content table {
 524 |   margin-top: 12px;
 525 |   width: 100%
 526 | }
 527 | .recommend-bottom-drawer .another-content table td {
 528 |   display: none
 529 | }
 530 | .recommend-bottom-drawer .another-content table th {
 531 |   text-align: left
 532 | }
 533 | .recommend-bottom-drawer .another-content table th a {
 534 |   color: var(--gray-color-3);
 535 |   font-size: 14px
 536 | }
 537 | .recommend-bottom-drawer .another-content table th span {
 538 |   font-size: 11px;
 539 |   color: var(--gray-color-5)
 540 | }
 541 | .bc-sidebar {
 542 |   font-size: 14px;
 543 |   margin-bottom: 20px
 544 | }
 545 | .bc-sidebar .card,
 546 | .bc-sidebar .module,
 547 | .bc-sidebar .revenue_unit_wrap {
 548 |   font-size: 14px;
 549 |   border: 1px solid var(--markdown-border-color);
 550 |   border-radius: 12px;
 551 |   box-shadow: 0 1px 1px 0 rgba(0,0,0,.03);
 552 |   background-color: var(--markdown-bg-color);
 553 |   padding: 20px;
 554 |   margin-bottom: 20px
 555 | }
 556 | .bc-sidebar .card p {
 557 |   font-weight: 600;
 558 |   font-size: 14px;
 559 |   margin-bottom: 20px
 560 | }
 561 | @media only all and (min-width:481px) {
 562 |   .content-holder {
 563 |     display: flex;
 564 |     flex-wrap: wrap
 565 |   }
 566 |   .content-holder .bc-markdown {
 567 |     width: 100%
 568 |   }
 569 |   .content-holder .pagination {
 570 |     flex: 1
 571 |   }
 572 | }
 573 | .list-article {
 574 |   margin-bottom: 30px
 575 | }
 576 | .list-article:after,
 577 | .list-article:before {
 578 |   content: " ";
 579 |   display: table
 580 | }
 581 | .list-article:after {
 582 |   display: block;
 583 |   clear: both;
 584 |   height: 1px;
 585 |   margin-top: -1px;
 586 |   visibility: hidden
 587 | }
 588 | .list-article img {
 589 |   width: 100%;
 590 |   height: 200px;
 591 |   vertical-align: top;
 592 |   object-fit: cover
 593 | }
 594 | .list-article .content {
 595 |   margin-top: 12px
 596 | }
 597 | .list-article .title {
 598 |   overflow: hidden;
 599 |   word-wrap: normal;
 600 |   white-space: normal;
 601 |   text-overflow: ellipsis;
 602 |   display: inline-block;
 603 |   display: -webkit-box;
 604 |   -webkit-line-clamp: 2;
 605 |   -webkit-box-orient: vertical;
 606 |   font-size: 18px;
 607 |   margin-bottom: 15px;
 608 |   color: var(--gray-color-3)
 609 | }
 610 | .list-article .title img {
 611 |   vertical-align: middle;
 612 |   margin-left: 8px;
 613 |   padding-left: 0!important;
 614 |   transform: translateY(-1px);
 615 |   width: 12px;
 616 |   height: 12px;
 617 |   object-fit: cover
 618 | }
 619 | .list-article .category {
 620 |   color: var(--primary-color);
 621 |   margin-bottom: 10px
 622 | }
 623 | .list-article .summary {
 624 |   word-wrap: normal;
 625 |   white-space: normal;
 626 |   text-overflow: ellipsis;
 627 |   display: inline-block;
 628 |   display: -webkit-box;
 629 |   -webkit-line-clamp: 3;
 630 |   -webkit-box-orient: vertical;
 631 |   font-size: 14px;
 632 |   overflow: hidden;
 633 |   line-height: 20px;
 634 |   color: var(--gray-color-4);
 635 |   margin-bottom: 15px
 636 | }
 637 | .list-article .meta-info {
 638 |   text-align: right;
 639 |   color: var(--gray-color-5);
 640 |   font-size: 13px
 641 | }
 642 | @media only all and (min-width:481px) {
 643 |   .list-article {
 644 |     width: 50%
 645 |   }
 646 |   .list-article img {
 647 |     height: 180px
 648 |   }
 649 |   .list-article:nth-child(odd) {
 650 |     padding-left: 8px
 651 |   }
 652 |   .list-article:nth-child(2n) {
 653 |     padding-right: 8px
 654 |   }
 655 | }
 656 | @media only all and (min-width:768px) {
 657 |   .list-article {
 658 |     width: 100%;
 659 |     float: none
 660 |   }
 661 |   .list-article:nth-child(odd) {
 662 |     padding-left: 0
 663 |   }
 664 |   .list-article:nth-child(2n) {
 665 |     padding-right: 0
 666 |   }
 667 |   .list-article a {
 668 |     display: flex
 669 |   }
 670 |   .list-article img {
 671 |     width: 320px
 672 |   }
 673 |   .list-article .content {
 674 |     flex: 1;
 675 |     padding: 20px 0 20px 20px
 676 |   }
 677 | }
 678 | .donation.active .panel {
 679 |   transform: translate(-50%,-100px)
 680 | }
 681 | @media only all and (min-width:768px) {
 682 |   .donation.active .panel {
 683 |     transform: translate(-50%,-52px)
 684 |   }
 685 | }
 686 | .donation .panel {
 687 |   position: fixed;
 688 |   overflow-y: auto;
 689 |   transition: transform .2s ease-in-out;
 690 |   left: 50%;
 691 |   transform: translate(-50%,100%);
 692 |   bottom: 0;
 693 |   background: #fff;
 694 |   min-width: 340px;
 695 |   z-index: 300;
 696 |   border-radius: 12px;
 697 |   padding: 20px 40px;
 698 |   box-shadow: 0 1px 8px 0 rgba(0,0,0,.2)
 699 | }
 700 | .donation .panel__inner {
 701 |   position: relative
 702 | }
 703 | .donation .panel__inner div {
 704 |   display: flex;
 705 |   justify-content: center
 706 | }
 707 | .donation .title {
 708 |   text-align: center;
 709 |   font-size: 14px;
 710 |   color: var(--gray-color-3);
 711 |   margin-bottom: 20px
 712 | }
 713 | .donation .desc {
 714 |   text-align: center;
 715 |   font-size: 12px;
 716 |   color: var(--gray-color-5);
 717 |   margin-top: 20px
 718 | }
 719 | .donation .desc b {
 720 |   font-weight: 700;
 721 |   text-decoration: underline;
 722 |   margin-left: 3px
 723 | }
 724 | .donation a {
 725 |   text-align: center;
 726 |   margin-right: 32px
 727 | }
 728 | .donation a:last-child {
 729 |   margin-right: 0
 730 | }
 731 | .donation a img {
 732 |   width: 34px;
 733 |   margin: 0 auto
 734 | }
 735 | .donation a span {
 736 |   display: block;
 737 |   font-size: 10px;
 738 |   text-align: center;
 739 |   word-break: break-word
 740 | }
 741 | .container > .inner {
 742 |   max-width: 1280px;
 743 |   margin: 0 auto;
 744 |   padding-left: var(--gutter);
 745 |   padding-right: var(--gutter)
 746 | }
 747 | .clx:after {
 748 |   content: "";
 749 |   display: table;
 750 |   clear: both
 751 | }
 752 | .bc-ads-holder {
 753 |   min-height: 280px
 754 | }
 755 | .logo-holder {
 756 |   display: inline-block;
 757 |   font-size: 1.65em;
 758 |   margin: 0
 759 | }
 760 | .logo-holder a {
 761 |   color: #000
 762 | }
 763 | .logo-holder img {
 764 |   display: block;
 765 |   min-height: 16px;
 766 |   max-height: 32px;
 767 |   object-fit: cover
 768 | }
 769 | .bc-header .right-side {
 770 |   display: flex;
 771 |   align-items: center
 772 | }
 773 | .bc-header .right-side input {
 774 |   width: 320px;
 775 |   position: relative;
 776 |   top: 7px
 777 | }
 778 | .bc-lnb {
 779 |   border-bottom: 1px solid var(--navigation-border-color);
 780 |   background-color: var(--navigation-bg-color);
 781 |   box-shadow: 0 1px 4px 0 rgba(0,0,0,.05)
 782 | }
 783 | .bc-menu ul {
 784 |   overflow-x: auto;
 785 |   overflow-y: hidden;
 786 |   white-space: nowrap
 787 | }
 788 | .bc-lnb li {
 789 |   display: inline-block
 790 | }
 791 | .bc-lnb li a {
 792 |   display: block;
 793 |   overflow: hidden;
 794 |   position: relative;
 795 |   height: 51px;
 796 |   padding-right: 30px;
 797 |   font-size: 16px;
 798 |   line-height: 51px;
 799 |   color: #202020;
 800 |   font-weight: 500;
 801 |   white-space: nowrap;
 802 |   text-decoration: none
 803 | }
 804 | .bc-lnb li a.active {
 805 |   color: var(--primary-color);
 806 |   font-weight: 700
 807 | }
 808 | @media screen and (min-width:1090px) {
 809 |   .bc-menu {
 810 |     width: calc(100% - 360px);
 811 |     padding-right: 60px
 812 |   }
 813 | }
 814 | .tags-holder {
 815 |   font-size: 0
 816 | }
 817 | .tags-holder a {
 818 |   display: inline-block;
 819 |   font-size: 12px;
 820 |   color: #000;
 821 |   position: relative;
 822 |   overflow: hidden;
 823 |   max-width: 100%;
 824 |   height: 28px;
 825 |   margin-right: 10px;
 826 |   margin-bottom: 10px;
 827 |   padding: 0 9px;
 828 |   line-height: 28px;
 829 |   vertical-align: top;
 830 |   background-color: #f3f3f3
 831 | }
 832 | .tags-holder a:before {
 833 |   display: inline-block;
 834 |   content: "#"
 835 | }
 836 | .related-articles {
 837 |   margin-top: 30px;
 838 |   margin-bottom: 30px
 839 | }
 840 | .related-articles h2 {
 841 |   font-size: 1.25em;
 842 |   font-weight: 500;
 843 |   margin-bottom: 15px!important
 844 | }
 845 | .related-articles h2 b {
 846 |   color: var(--primary-color)
 847 | }
 848 | .related-articles ul {
 849 |   overflow-x: auto;
 850 |   white-space: nowrap
 851 | }
 852 | .related-articles ul li {
 853 |   position: relative;
 854 |   width: 280px;
 855 |   height: 150px;
 856 |   margin-right: 15px;
 857 |   display: inline-block
 858 | }
 859 | .related-articles ul li:last-child {
 860 |   margin-right: 0
 861 | }
 862 | .related-articles img {
 863 |   width: 100%;
 864 |   height: 100%;
 865 |   object-fit: cover
 866 | }
 867 | .related-articles .content {
 868 |   position: absolute;
 869 |   z-index: 1;
 870 |   top: 0;
 871 |   left: 0;
 872 |   width: 100%;
 873 |   height: 100%;
 874 |   background-color: var(--dim-color-1);
 875 |   opacity: 0;
 876 |   transition: all .25 ease-in-out
 877 | }
 878 | .related-articles .content .center {
 879 |   position: absolute;
 880 |   width: 220px;
 881 |   top: 50%;
 882 |   left: 50%;
 883 |   transform: translate(-50%,-50%);
 884 |   color: #fff;
 885 |   text-align: center;
 886 |   white-space: normal
 887 | }
 888 | .related-articles li:hover .content {
 889 |   opacity: 1
 890 | }
 891 | .prev-next-article {
 892 |   display: none;
 893 |   opacity: 0;
 894 |   transform: translateY(150px);
 895 |   overflow: hidden;
 896 |   transition: .4s all ease-in-out;
 897 |   background-color: #fff;
 898 |   box-shadow: 0 1px 4px 0 rgba(0,0,0,.25);
 899 |   border-radius: 8px;
 900 |   position: fixed;
 901 |   bottom: 32px;
 902 |   width: 320px;
 903 |   z-index: 1000
 904 | }
 905 | @media screen and (min-width:1090px) {
 906 |   .prev-next-article {
 907 |     display: block
 908 |   }
 909 | }
 910 | .prev-article {
 911 |   left: 32px
 912 | }
 913 | .next-article {
 914 |   right: 32px
 915 | }
 916 | .prev-next-article.visible {
 917 |   opacity: 1;
 918 |   transform: translateY(0)
 919 | }
 920 | .prev-next-article p.title {
 921 |   font-size: 12px
 922 | }
 923 | .prev-next-article .content p {
 924 |   overflow: hidden;
 925 |   text-overflow: ellipsis;
 926 |   display: -webkit-box;
 927 |   -webkit-line-clamp: 2;
 928 |   -webkit-box-orient: vertical
 929 | }
 930 | .prev-next-article img {
 931 |   width: 100px;
 932 |   height: 100px;
 933 |   object-fit: cover
 934 | }
 935 | .prev-next-article a {
 936 |   display: flex;
 937 |   align-items: center
 938 | }
 939 | .prev-next-article .content {
 940 |   flex: 1;
 941 |   font-size: 14px;
 942 |   padding-left: 12px;
 943 |   padding-right: 12px
 944 | }
 945 | .comment-holder h2 {
 946 |   font-size: 1.25em;
 947 |   font-weight: 500;
 948 |   margin-bottom: 15px!important
 949 | }
 950 | .comment-holder .tistoryProfileLayerTrigger {
 951 |   display: none
 952 | }
 953 | .comment-holder h2 b {
 954 |   color: var(--primary-color)
 955 | }
 956 | .comment-holder .bc-comment-form {
 957 |   border: 1px solid var(--markdown-border-color);
 958 |   min-height: 6.125rem;
 959 |   padding: 16px
 960 | }
 961 | .comment-holder .bc-comment-form .submit-holder {
 962 |   display: flex
 963 | }
 964 | .comment-holder .bc-comment-form p {
 965 |   flex: 1;
 966 |   background: #f8f9fa;
 967 |   margin-right: 15px
 968 | }
 969 | .comment-holder .bc-comment-form p input {
 970 |   width: 100%;
 971 |   height: 100%;
 972 |   padding-left: 16px;
 973 |   padding-right: 16px
 974 | }
 975 | .comment-holder .bc-comment-form .bc-comment-form-footer {
 976 |   display: flex;
 977 |   margin-left: auto;
 978 |   align-items: center
 979 | }
 980 | .comment-holder .bc-comment-form input {
 981 |   border: none;
 982 |   background: 0 0;
 983 |   outline: 0
 984 | }
 985 | .comment-holder .bc-comment-form textarea {
 986 |   resize: none;
 987 |   outline: 0;
 988 |   width: 100%;
 989 |   color: var(--default-font-color);
 990 |   border: none;
 991 |   background: 0 0;
 992 |   min-height: 120px
 993 | }
 994 | .comment-holder .submit-holder {
 995 |   text-align: right
 996 | }
 997 | .comment-holder .comment-item {
 998 |   border-bottom: 1px solid var(--markdown-border-color);
 999 |   margin-bottom: 20px;
1000 |   padding-bottom: 20px
1001 | }
1002 | .comment-holder .submit-holder button {
1003 |   cursor: pointer;
1004 |   outline: 0;
1005 |   border: none;
1006 |   background: var(--primary-color);
1007 |   color: var(--default-button-color);
1008 |   line-height: 40px;
1009 |   padding-left: 20px;
1010 |   padding-right: 20px
1011 | }
1012 | .comment-holder .author-meta {
1013 |   display: flex;
1014 |   align-items: center;
1015 |   margin-bottom: 20px
1016 | }
1017 | .comment-holder .author-meta img {
1018 |   border: 1px solid var(--markdown-border-color);
1019 |   object-fit: contain;
1020 |   width: 54px;
1021 |   height: 54px;
1022 |   border-radius: 50%
1023 | }
1024 | .comment-holder .author-meta .info {
1025 |   margin-left: 15px
1026 | }
1027 | .comment-holder .author-meta .name {
1028 |   display: flex;
1029 |   align-items: center;
1030 |   padding: 5px 0
1031 | }
1032 | .comment-holder .author-meta .name img {
1033 |   display: none;
1034 |   width: 24px;
1035 |   height: 24px
1036 | }
1037 | .comment-holder .author-meta .name a {
1038 |   color: var(--default-font-color)
1039 | }
1040 | .comment-holder .author-meta .date {
1041 |   color: var(--default-link-color);
1042 |   font-size: 14px
1043 | }
1044 | .comment-holder .content {
1045 |   margin: 15px 0
1046 | }
1047 | .comment-holder .reply-comment-holder {
1048 |   border: 1px solid rgba(0,0,0,.02);
1049 |   background-color: rgba(0,0,0,.016);
1050 |   padding: 1.5rem;
1051 |   border-radius: 4px;
1052 |   margin-top: 1.3125rem
1053 | }
1054 | .comment-holder .reply-comment-holder li {
1055 |   margin-bottom: 20px
1056 | }
1057 | .comment-holder #secret-btn {
1058 |   display: none
1059 | }
1060 | .comment-holder #secret-btn:checked + label {
1061 |   background-image: url(images/lock_icon.svg)
1062 | }
1063 | .comment-holder #secret-btn + label {
1064 |   display: inline-block;
1065 |   width: 32px;
1066 |   height: 32px;
1067 |   margin-right: 15px;
1068 |   outline: 0;
1069 |   border: none;
1070 |   background-image: url(images/unlock_icon.svg);
1071 |   background-size: 32px 32px;
1072 |   background-repeat: no-repeat;
1073 |   background-position: 50% 50%
1074 | }
1075 | .comment-holder .comment-list {
1076 |   margin-top: 40px
1077 | }
1078 | .comment-holder .control {
1079 |   margin-top: 30px;
1080 |   font-size: 12px
1081 | }
1082 | .comment-holder .control a {
1083 |   margin-right: 10px
1084 | }
1085 | ul.tags li {
1086 |   display: inline-block
1087 | }
1088 | .guest-page {
1089 |   width: 100%
1090 | }
1091 | 
1092 | .recentPost li {
1093 |   margin-bottom: 15px
1094 | }
1095 | .recentPost li a {
1096 |   display: flex
1097 | }
1098 | .recentPost li:last-child {
1099 |   margin-bottom: 0
1100 | }
1101 | .recentPost li img {
1102 |   width: 128px;
1103 |   height: 75px;
1104 |   object-fit: cover
1105 | }
1106 | .recentPost li .info {
1107 |   padding-left: 15px;
1108 |   flex: 1
1109 | }
1110 | .recentPost li .info .title {
1111 |   display: block;
1112 |   color: var(--gray-color-3)
1113 | }
1114 | .recentPost li .info .date {
1115 |   margin-top: 6px;
1116 |   margin-bottom: 0;
1117 |   font-size: 10px;
1118 |   color: var(--gray-color-5)
1119 | }
1120 | .recentPost li .info .category {
1121 |   font-size: 12px;
1122 |   margin-bottom: 6px;
1123 |   display: block;
1124 |   color: var(--primary-color)
1125 | }
1126 | .popularPost li {
1127 |   margin-bottom: 15px
1128 | }
1129 | .popularPost li a {
1130 |   display: flex
1131 | }
1132 | .popularPost li:last-child {
1133 |   margin-bottom: 0
1134 | }
1135 | .popularPost li img {
1136 |   width: 128px;
1137 |   height: 75px;
1138 |   object-fit: cover
1139 | }
1140 | .popularPost li .info {
1141 |   padding-left: 15px;
1142 |   flex: 1
1143 | }
1144 | .popularPost li .info .title {
1145 |   display: block;
1146 |   color: var(--gray-color-3);
1147 |   margin-bottom: 10px
1148 | }
1149 | .popularPost li .info .date {
1150 |   margin-top: 6px;
1151 |   font-size: 10px;
1152 |   margin-bottom: 0;
1153 |   color: var(--gray-color-5)
1154 | }
1155 | .popularPost li .info .category {
1156 |   font-size: 12px;
1157 |   margin-bottom: 6px;
1158 |   display: block;
1159 |   color: var(--primary-color)
1160 | }
1161 | .recentComment ul li {
1162 |   margin-bottom: 16px
1163 | }
1164 | .recentComment ul li a {
1165 |   font-size: 14px
1166 | }
1167 | .recentComment ul li b {
1168 |   color: var(--primary-color)
1169 | }
1170 | .recentComment ul li:last-child {
1171 |   margin-bottom: 0
1172 | }
1173 | .tagbox li {
1174 |   display: inline-block
1175 | }
1176 | .bc-sidebar {
1177 |   overflow-x: hidden
1178 | }
1179 | body.sticky main {
1180 |   overflow: initial
1181 | }
1182 | body.sticky main .sidebar-holder {
1183 |   position: sticky;
1184 |   top: 85px;
1185 |   transition: .25s all ease-in-out
1186 | }
1187 | body.sticky.visible-lnb main .sidebar-holder {
1188 |   top: 140px
1189 | }
1190 | main {
1191 |   overflow: hidden;
1192 |   padding-top: 160px;
1193 |   padding-bottom: 54px
1194 | }
1195 | main > .inner {
1196 |   width: 100%;
1197 |   display: flex
1198 | }
1199 | main .content-holder {
1200 |   width: 100%
1201 | }
1202 | main .content-holder .ads-holder {
1203 |   width: 100%
1204 | }
1205 | main .sidebar-holder {
1206 |   margin-top: 20px
1207 | }
1208 | @media screen and (min-width:1090px) {
1209 |   main .content-holder {
1210 |     float: left;
1211 |     width: calc(100% - 360px);
1212 |     padding-right: 60px
1213 |   }
1214 |   main .sidebar-holder {
1215 |     margin-top: 0;
1216 |     display: block;
1217 |     float: left;
1218 |     width: 360px
1219 |   }
1220 | }
1221 | .bc-footer {
1222 |   position: relative;
1223 |   z-index: 100;
1224 |   margin-top: 20px;
1225 |   padding-top: 50px;
1226 |   padding-bottom: 120px;
1227 |   background-color: var(--footer-bg-color);
1228 |   border-top: 1px solid var(--gray-color-1)
1229 | }
1230 | .bc-footer address {
1231 |   text-align: center;
1232 |   font-size: 14px;
1233 |   font-style: initial;
1234 |   color: var(--default-link-color)
1235 | }
1236 | .bc-footer address a {
1237 |   font-size: 14px
1238 | }
1239 | .bc-footer address a b {
1240 |   color: var(--primary-color)
1241 | }
1242 | .bc-footer .designed-by {
1243 |   margin-top: 18px
1244 | }
1245 | .category-list .link_item,
1246 | .category-list .link_tit {
1247 |   padding-left: 24px;
1248 |   padding-right: 24px
1249 | }
1250 | .category-list .link_item,
1251 | .category-list .link_tit img {
1252 |   position: relative;
1253 |   top: -2px
1254 | }
1255 | .category-list .link_sub_item {
1256 |   padding-left: 32px;
1257 |   padding-right: 16px;
1258 |   font-weight: 400
1259 | }
1260 | .category-list .link_item img {
1261 |   position: relative;
1262 |   top: -2px
1263 | }
1264 | .category-list .tt_category a {
1265 |   display: block;
1266 |   line-height: 60px;
1267 |   color: #000
1268 | }
1269 | .category-list .tt_category .category_list > li > a,
1270 | .category-list .tt_category > li > a {
1271 |   font-size: 16px;
1272 |   font-weight: 700
1273 | }
1274 | .category-list .sub_category_list img {
1275 |   position: relative;
1276 |   top: -1px
1277 | }
1278 | .sticky-holder {
1279 |   z-index: 10;
1280 |   position: fixed;
1281 |   top: 0;
1282 |   left: 0;
1283 |   right: 0
1284 | }
1285 | .sticky-holder .bc-header {
1286 |   position: relative;
1287 |   z-index: 1
1288 | }
1289 | .sticky-holder .bc-lnb {
1290 |   position: relative;
1291 |   z-index: 0
1292 | }
1293 | .sticky-holder .bc-lnb {
1294 |   transition: transform .3s cubic-bezier(.22,.61,.36,1),-webkit-transform .3s cubic-bezier(.22,.61,.36,1)
1295 | }
1296 | #side-menu.visible .panel {
1297 |   transform: translateX(0)
1298 | }
1299 | #side-menu.visible .dim {
1300 |   display: block
1301 | }
1302 | #side-menu .dim {
1303 |   display: none;
1304 |   position: fixed;
1305 |   top: 0;
1306 |   left: 0;
1307 |   width: 100%;
1308 |   height: var(--full-height);
1309 |   background: var(--dim-color-2);
1310 |   z-index: 10000
1311 | }
1312 | #side-menu .panel {
1313 |   position: fixed;
1314 |   transform: translateX(100%);
1315 |   transition: .2s transform ease-in-out;
1316 |   top: 0;
1317 |   right: 0;
1318 |   width: 100%;
1319 |   height: 100%;
1320 |   background: #fff;
1321 |   z-index: 10001
1322 | }
1323 | #side-menu .panel__inner {
1324 |   position: abbsolute;
1325 |   top: 0;
1326 |   left: 0;
1327 |   right: 0;
1328 |   bottom: 0;
1329 |   overflow-y: auto;
1330 |   background: #fff;
1331 |   -webkit-overflow-scrolling: touch;
1332 |   height: var(--full-height)
1333 | }
1334 | #side-menu .panel header {
1335 |   padding: 10px
1336 | }
1337 | #side-menu .panel .close-btn {
1338 |   display: flex;
1339 |   width: 32px;
1340 |   height: 32px;
1341 |   align-items: center;
1342 |   justify-content: center;
1343 |   margin-left: auto
1344 | }
1345 | #side-menu .panel .close-btn img {
1346 |   width: 32px;
1347 |   height: 32px
1348 | }
1349 | #dark-mode {
1350 |   display: flex;
1351 |   position: fixed;
1352 |   bottom: 40px;
1353 |   right: 100px;
1354 |   z-index: 100;
1355 |   border-radius: 30px;
1356 |   padding-left: 15px;
1357 |   padding-right: 15px;
1358 |   background-color: var(--default-bg-color);
1359 |   width: auto;
1360 |   height: 48px;
1361 |   align-items: center;
1362 |   justify-content: center;
1363 |   margin-left: auto;
1364 |   box-shadow: 0 1px 8px 0 rgba(0,0,0,.2)
1365 | }
1366 | @media screen and (min-width:768px) {
1367 |   #side-menu .panel {
1368 |     width: 394px
1369 |   }
1370 | }
1371 | #side-menu {
1372 |   background: #e8e8e8
1373 | }
1374 | #side-menu header {
1375 |   position: absolute;
1376 |   z-index: 3;
1377 |   top: 0;
1378 |   right: 0;
1379 |   width: 100%
1380 | }
1381 | 


--------------------------------------------------------------------------------
/skin.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ko">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>[##_page_title_##]</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.0/dist/lazyload.min.js"></script>
  8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
  9 |     <script>
 10 |       (function() {
 11 |         var root = document.documentElement;
 12 |         document.querySelector("html").setAttribute("data-darkmode", !!Cookies.get("bc-darkmode"));
 13 |         // 전역 CSS variables 티스토리 변수로 변경
 14 |         root.style.setProperty('--primary-color', '[##_var_primary-color_##]');
 15 |         root.style.setProperty('--markdown-default-font-size', '[##_var_markdown-default-font-size_##]');
 16 |         root.style.setProperty('--markdown-heading-font-size', '[##_var_markdown-heading-font-size_##]');
 17 |         root.style.setProperty('--markdown-p-font-size', '[##_var_markdown-p-font-size_##]');
 18 |         __TISTORY_VARIABLES__ = {
 19 |           "toast-msg-post-like": "[##_var_toast-msg-post-like_##]",
 20 |           "toast-msg-post-end": "[##_var_toast-msg-post-end_##]",
 21 |           "toast-msg-copy": "[##_var_toast-msg-copy_##]"
 22 |         };
 23 |       })();
 24 |     </script>
 25 |     <link rel="stylesheet" href="./style.css">
 26 |   </head>
 27 |   <body id="[##_body_id_##]">
 28 |     <s_if_var_markdown-marginless>
 29 |       <script>
 30 |         (function() {
 31 |           var el = document.querySelector('#tt-body-page');
 32 |           if (el) {
 33 |             el.classList.add('marginless');
 34 |           }
 35 |         })();
 36 |       </script>
 37 |     </s_if_var_markdown-marginless>
 38 |     <s_if_var_active-sidebar-sticky>
 39 |       <script>
 40 |         (function() {
 41 |           var el = document.body;
 42 |           el.classList.add('sticky');
 43 |         })();
 44 |       </script>
 45 |     </s_if_var_active-sidebar-sticky>
 46 |     <s_if_var_disable-sidebar>
 47 |       <script>
 48 |         (function() {
 49 |           if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
 50 |             // 초기렌더링 퍼프먼스 향상을 위해
 51 |             // 모바일에서 사이드바 제거          
 52 |             if (document.querySelector('.sidebar-holder')) {
 53 |               document.querySelector('.sidebar-holder').style.display = 'none';
 54 |             }
 55 |           }
 56 |         })();
 57 |       </script>
 58 |     </s_if_var_disable-sidebar>
 59 |     <s_if_var_active-header-searchbar>
 60 |       <script>
 61 |         (function() {
 62 |           window.addEventListener('load', function() {
 63 |             var el = document.querySelector('#side-menu .search').cloneNode(true);
 64 |             el.querySelector('.search-input').setAttribute('name', 'header-search');
 65 |             document.querySelector('.right-side .search-holder').appendChild(el);
 66 |             document.querySelector('.right-side .search-holder form').addEventListener('submit', function(e) {
 67 |               e.preventDefault();
 68 |               window.location.href = '/search/' + looseURIEncode(document.getElementsByName('header-search')[0].value);
 69 |             });
 70 |           });
 71 |         })();
 72 |       </script>
 73 |     </s_if_var_active-header-searchbar>
 74 |     <link rel="preconnect" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
 75 |     <link rel="preconnect" href="//fonts.googleapis.com/earlyaccess/notosanskr.css">
 76 |     <link rel="preconnect" href="https://blog.kakaocdn.net">
 77 |     <link rel="preconnect" href="https://t1.daumcdn.net">
 78 |     <link rel="preconnect" href="https://img1.daumcdn.net">
 79 |     <s_if_var_enabled-gtm>
 80 |       <script>
 81 |         (function(w, d, s, l, i) {
 82 |           w[l] = w[l] || [];
 83 |           w[l].push({
 84 |             'gtm.start': new Date().getTime(),
 85 |             event: 'gtm.js'
 86 |           });
 87 |           var f = d.getElementsByTagName(s)[0],
 88 |             j = d.createElement(s),
 89 |             dl = l != 'dataLayer' ? '&l=' + l : '';
 90 |           j.async = true;
 91 |           j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
 92 |           f.parentNode.insertBefore(j, f);
 93 |         })(window, document, 'script', 'dataLayer', '[##_var_gtm-id_##]');
 94 |       </script>
 95 |     </s_if_var_enabled-gtm>
 96 |     <s_if_var_enabled-gtm>
 97 |       <script>
 98 |         (function() {
 99 |           var s = document.createElement("noscript");
100 |           var iframe = document.createElement("iframe");
101 |           iframe.setAttribute('src', 'https://www.googletagmanager.com/ns.html?id=[##_var_gtm-id_##]');
102 |           iframe.setAttribute('height', 0);
103 |           iframe.setAttribute('width', 0);
104 |           iframe.style.display = 'none';
105 |           iframe.style.visibility = 'none';
106 |           s.appendChild(iframe);
107 |           document.body.insertBefore(s, document.body.firstChild);
108 |         })();
109 |       </script>
110 |     </s_if_var_enabled-gtm>
111 |     <s_t3>
112 |       <div id="__basecamp">
113 |         <div class="sticky-holder">
114 |           <header class="bc-header container">
115 |             <div class="inner">
116 |               <div class="flex-holder">
117 |                 <div class="left-side">
118 |                   <h1 class="logo-holder"><a href="/">
119 |                       <s_if_var_logo-image><img src="[##_var_logo-image_##]" alt="[##_title_##] 로고 이미지"></s_if_var_logo-image>
120 |                       <s_not_var_logo-image>[##_title_##]</s_not_var_logo-image>
121 |                     </a></h1>
122 |                 </div>
123 |                 <div class="right-side">
124 |                   <div class="search-holder"></div><a class="menu-opener"><img src="./images/menu_icon.svg" alt="menu-opener icon"></a>
125 |                 </div>
126 |               </div>
127 |             </div>
128 |           </header>
129 |           <nav class="container bc-lnb">
130 |             <div class="inner">
131 |               <div class="bc-menu clx">[##_blog_menu_##]</div>
132 |             </div>
133 |           </nav>
134 |         </div>
135 |         <main class="main-content">
136 |           <div class="container">
137 |             <div class="inner clx">
138 |               <div class="content-holder">
139 |                 <div class="ads-holder">[##_revenue_list_upper_##]</div>
140 |                 <s_list>
141 |                   <s_list_rep>
142 |                     <article class="list-article"><a class="link_post" href="[##_list_rep_link_##]">
143 |                         <s_list_rep_thumbnail><img class="lazy" src="./images/lazy_img.svg" data-src="[##_list_rep_thumbnail_url_##]" alt="[##_list_rep_title_##] 포스팅 썸네일 이미지"></s_list_rep_thumbnail>
144 |                         <div class="content">
145 |                           <p class="category">[##_list_rep_category_##]</p>
146 |                           <p class="title">[##_list_rep_title_##]</p>
147 |                           <p class="summary">[##_list_rep_summary_##]</p>
148 |                           <div class="meta-info">
149 |                             <p>[##_list_rep_regdate_##] 게시됨</p>
150 |                           </div>
151 |                         </div>
152 |                       </a></article>
153 |                   </s_list_rep>
154 |                   <s_list_empty>
155 |                     <div class="box-no-search type-search"><span>입력하신 단어의 철자가 정확한지 확인해 보세요.</span><span>검색어의 단어 수를 줄이거나, 보다 일반적인 단어로 검색해 보세요.</span><span>두 단어 이상의 키워드로 검색 하신 경우, 정확하게 띄어쓰기를 한 후 검색해 보세요.</span></div>
156 |                     <div class="box-no-search type-tag"><span>선택하신 태그에 해당하는 글이 없습니다.</span><span>다른 태그를 선택하시거나, 검색 기능을 활용해 보세요.</span></div>
157 |                     <div class="box-no-search type-category"><span>선택하신 카테고리에 해당하는 글이 없습니다.</span><span>다른 카테고리를 선택하시거나, 검색 기능을 활용해 보세요.</span></div>
158 |                     <div class="box-no-search type-archive"><span>선택하신 기간에 등록된 글이 없습니다.</span></div>
159 |                   </s_list_empty>
160 |                 </s_list>
161 |                 <s_article_rep>
162 |                   <s_permalink_article_rep>
163 |                     <article class="bc-markdown">
164 |                       <div class="bc-markdown__left-side-menu">
165 |                         <div class="inner">
166 |                           <div class="reaction-holder">
167 |                             <div class="like-reaction-holder"><button id="like-reaction"></button></div>
168 |                             <div class="share-holder"><button id="share-reaction"></button></div>
169 |                           </div>
170 |                         </div>
171 |                       </div>
172 |                       <s_article_rep_thumbnail>
173 |                         <div class="thumbnail"><img src="[##_article_rep_thumbnail_url_##]"></div>
174 |                       </s_article_rep_thumbnail>
175 |                       <header class="bc-markdown__header">
176 |                         <div class="category"><a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a></div>
177 |                         <h2 class="heading"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
178 |                         <div class="subinfo">
179 |                           <p class="subinfo__name">[##_article_rep_author_##]</p><span>·</span>
180 |                           <p class="subinfo__date">[##_article_rep_date_##]</p>
181 |                         </div>
182 |                       </header>
183 |                       <div class="bc-markdown__inner-content">[##_article_rep_desc_##]</div>
184 |                       <div class="tags-holder">
185 |                         <s_tag_label>[##_tag_label_rep_##]</s_tag_label>
186 |                       </div>
187 |                       <s_article_related>
188 |                         <div class="related-articles">
189 |                           <h2><b>[##_article_rep_category_##]</b> 카테고리와 연관된 콘텐츠</h2>
190 |                           <ul>
191 |                             <s_article_related_rep>
192 |                               <li class="[##_article_related_rep_type_##]"><a href="[##_article_related_rep_link_##]">
193 |                                   <s_article_related_rep_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=[##_article_related_rep_thumbnail_link_##]" alt=""></s_article_related_rep_thumbnail>
194 |                                   <div class="content">
195 |                                     <div class="center">
196 |                                       <p>[##_article_related_rep_title_##]</p>
197 |                                     </div>
198 |                                   </div>
199 |                                 </a></li>
200 |                             </s_article_related_rep>
201 |                           </ul>
202 |                         </div>
203 |                       </s_article_related>
204 |                       <s_article_prev>
205 |                         <div class="prev-next-article prev-article"><a href="[##_article_prev_link_##]">
206 |                             <s_article_prev_thumbnail><img src="[##_article_prev_thumbnail_link_##]" alt="[##_article_prev_title_##] 콘텐츠 대표 이미지"></s_article_prev_thumbnail>
207 |                             <div class="content">
208 |                               <p class="title">이전 포스트</p>
209 |                               <p>[##_article_prev_title_##]</p>
210 |                             </div>
211 |                           </a></div>
212 |                       </s_article_prev>
213 |                       <s_article_next>
214 |                         <div class="prev-next-article next-article"><a href="[##_article_next_link_##]">
215 |                             <s_article_next_thumbnail><img src="[##_article_next_thumbnail_link_##]" alt="[##_article_next_title_##] 콘텐츠 대표 이미지"></s_article_next_thumbnail>
216 |                             <div class="content">
217 |                               <p class="title">다음 포스트</p>
218 |                               <p>[##_article_next_title_##]</p>
219 |                             </div>
220 |                           </a></div>
221 |                       </s_article_next>
222 |                       <div class="comment-holder">
223 |                         <s_rp_count>
224 |                           <h2><b>[##_article_rep_rp_cnt_##]</b>개의 댓글</h2>
225 |                         </s_rp_count>
226 |                         <s_rp>
227 |                           <s_rp_input_form>
228 |                             <div class="bc-comment-form"><textarea name="[##_rp_input_comment_##]" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요 :)"></textarea>
229 |                               <div class="submit-holder">
230 |                                 <s_rp_member>
231 |                                   <s_rp_guest>
232 |                                     <p class="name-input"><input type="text" name="[##_rp_input_name_##]" value="[##_guest_name_##]" placeholder="닉네임"></p>
233 |                                     <p class="password-input"><input type="password" maxlength="8" name="[##_rp_input_password_##]" value="[##_rp_admin_check_##]" placeholder="암호"></p>
234 |                                   </s_rp_guest>
235 |                                 </s_rp_member>
236 |                                 <div class="bc-comment-form-footer"><input class="secret-btn" type="checkbox" name="[##_rp_input_is_secret_##]" id="secret-btn"><label for="secret-btn"></label><button class="btn" type="submit" onclick="[##_rp_onclick_submit_##]">댓글 작성</button></div>
237 |                               </div>
238 |                             </div>
239 |                           </s_rp_input_form>
240 |                           <s_rp_container>
241 |                             <div class="comment-list">
242 |                               <ul>
243 |                                 <s_rp_rep>
244 |                                   <li class="comment-item" id="[##_rp_rep_id_##]">
245 |                                     <div class="author-meta"><img class="avatar" src="[##_rp_rep_logo_##]" alt="">
246 |                                       <div class="info">
247 |                                         <p class="name">[##_rp_rep_name_##]</p>
248 |                                         <p class="date">[##_rp_rep_date_##]</p>
249 |                                       </div>
250 |                                     </div>
251 |                                     <p class="content">[##_rp_rep_desc_##]</p>
252 |                                     <div class="control"><a href="#" onclick="[##_rp_rep_onclick_delete_##]">수정/삭제</a><a href="#" onclick="[##_rp_rep_onclick_reply_##]">댓글쓰기</a></div>
253 |                                     <s_rp2_container>
254 |                                       <div class="reply-comment-holder">
255 |                                         <ul>
256 |                                           <s_rp2_rep>
257 |                                             <li id="[##_rp_rep_id_##]">
258 |                                               <div class="author-meta"><img class="avatar" src="[##_rp_rep_logo_##]" alt="">
259 |                                                 <div class="info">
260 |                                                   <p class="name">[##_rp_rep_name_##]</p>
261 |                                                   <p class="date">[##_rp_rep_date_##]</p>
262 |                                                 </div>
263 |                                               </div>
264 |                                               <p class="content">[##_rp_rep_desc_##]</p>
265 |                                               <div class="control"><a href="#" onclick="[##_rp_rep_onclick_delete_##]">수정/삭제</a></div>
266 |                                             </li>
267 |                                           </s_rp2_rep>
268 |                                         </ul>
269 |                                       </div>
270 |                                     </s_rp2_container>
271 |                                   </li>
272 |                                 </s_rp_rep>
273 |                               </ul>
274 |                             </div>
275 |                           </s_rp_container>
276 |                         </s_rp>
277 |                       </div>
278 |                     </article>
279 |                     <div class="bc-markdown__left-side-drawer">
280 |                       <div class="dim"></div>
281 |                       <div class="panel"></div>
282 |                     </div>
283 |                     <div class="bc-markdown__bottom-navigator">
284 |                       <ul>
285 |                         <li class="menu"><a class="menu-btn" href="javascript:;" data-bottom-navigator-item="menu"><img src="./images/bottom_menu_icon.svg" alt="bottom menu icon">
286 |                             <p>목차</p>
287 |                           </a></li>
288 |                         <li class="share"><a class="share-btn" href="javascript:;"><img src="./images/share_icon.svg" alt="share icon">
289 |                             <p>공유</p>
290 |                           </a></li>
291 |                         <li class="like">
292 |                           <div class="like-btn-holder"><button class="like-btn"></button></div>
293 |                         </li>
294 |                         <li class="recommend"><a class="recommend-btn" href="javascript:;"><img src="./images/shelf_icon.svg" alt="shelf icon">
295 |                             <p>추천글</p>
296 |                           </a>
297 |                           <div class="recommend-bottom-drawer">
298 |                             <div class="dim"></div>
299 |                             <div class="panel">
300 |                               <div class="panel__inner"></div>
301 |                             </div>
302 |                           </div>
303 |                         </li>
304 |                         <li class="explore"><a class="search-btn" href="javascript:;"><img src="./images/explore_icon.svg" alt="explore icon">
305 |                             <p>탐색</p>
306 |                           </a></li>
307 |                       </ul>
308 |                     </div>
309 |                   </s_permalink_article_rep>
310 |                 </s_article_rep>
311 |                 <s_article_protected>
312 |                   <s_permalink_article_rep>
313 |                     <article class="bc-markdown">
314 |                       <header class="bc-markdown__header">
315 |                         <div class="category"><a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a></div>
316 |                         <h2 class="heading"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
317 |                         <div class="subinfo">
318 |                           <p class="subinfo__name">[##_article_rep_author_##]</p><span>·</span>
319 |                           <p class="subinfo__date">[##_article_rep_date_##]</p>
320 |                         </div>
321 |                       </header>
322 |                       <div class="bc-markdown__inner-content">
323 |                         <p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p><label for="[##_article_password_##]">비밀번호</label><input type="password" maxlength="16" id="[##_article_password_##]" name="[##_article_password_##]" value="" onkeydown="if (event.keyCode == 13)[##_article_dissolve_##]"><input class="submit" type="button" value="submit" onclick="[##_article_dissolve_##]">
324 |                       </div>
325 |                     </article>
326 |                   </s_permalink_article_rep>
327 |                 </s_article_protected>
328 |                 <s_page_rep>
329 |                   <s_permalink_article_rep>공지사항 [##_article_rep_title_##] [##_article_rep_author_##] [##_article_rep_date_##]<div class="article-view">[##_article_rep_desc_##]</div>
330 |                   </s_permalink_article_rep>
331 |                 </s_page_rep>
332 |                 <s_notice_rep>
333 |                   <s_index_article_rep>
334 |                     <article class="list-article"><a class="link_post" href="[##_notice_rep_link_##]">
335 |                         <s_notice_rep_thumbnail><img class="lazy" data-src="[##_notice_rep_thumbnail_url_##]"></s_notice_rep_thumbnail>
336 |                         <div class="content">
337 |                           <p class="title">[##_notice_rep_title_##]</p>
338 |                           <p class="summary">[##_notice_rep_summary_##]</p>
339 |                           <div class="meta-info">
340 |                             <p>[##_notice_rep_date_##] 게시됨</p>
341 |                           </div>
342 |                         </div>
343 |                       </a></article>
344 |                   </s_index_article_rep>
345 |                   <s_permalink_article_rep>
346 |                     <article class="bc-markdown">
347 |                       <header class="bc-markdown__header">
348 |                         <h2 class="heading"><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a></h2>
349 |                         <div class="subinfo">
350 |                           <p class="subinfo__name">[##_notice_rep_author_##]</p><span>·</span>
351 |                           <p class="subinfo__date">[##_notice_rep_date_##]</p>
352 |                         </div>
353 |                       </header>
354 |                       <div class="bc-markdown__inner-content">[##_notice_rep_desc_##]</div>
355 |                     </article>
356 |                   </s_permalink_article_rep>
357 |                 </s_notice_rep>
358 |                 <s_tag>
359 |                   <ul class="tags">
360 |                     <s_tag_rep>
361 |                       <li><a class="tag" href="[##_tag_link_##]">[##_tag_name_##]</a></li>
362 |                     </s_tag_rep>
363 |                   </ul>
364 |                 </s_tag>
365 |                 <s_local>
366 |                   <h3>Local Log</h3>
367 |                   <s_local_spot_rep>[##_local_spot_##]</s_local_spot_rep>
368 |                   <s_local_info_rep><a href="[##_local_info_link_##]">[##_local_info_title_##]</a></s_local_info_rep>
369 |                 </s_local>
370 |                 <div class="guest-page">
371 |                   <div class="comment-holder">
372 |                     <s_guest>
373 |                       <div class="guest-holder">
374 |                         <s_guest_input_form>
375 |                           <div class="bc-comment-form"><textarea name="[##_guest_textarea_body_##]" cols="" rows="4" placeholder="여러분의 소중한 글을 입력해주세요 :)"></textarea>
376 |                             <div class="submit-holder">
377 |                               <s_guest_member>
378 |                                 <s_guest_form>
379 |                                   <p class="name-input"><input type="text" name="[##_guest_input_name_##]" value="[##_guest_name_##]" placeholder="이름"></p>
380 |                                   <p class="password-input"><input type="password" name="[##_guest_input_password_##]" value="[##_guest_password_##]" placeholder="암호"></p>
381 |                                 </s_guest_form>
382 |                               </s_guest_member>
383 |                               <div class="bc-comment-form-footer"><button class="btn" type="submit" onclick="[##_guest_onclick_submit_##]">안부남기기</button></div>
384 |                             </div>
385 |                           </div>
386 |                         </s_guest_input_form>
387 |                       </div>
388 |                       <s_guest_container>
389 |                         <div class="comment-list">
390 |                           <ul>
391 |                             <s_guest_rep>
392 |                               <li class="comment-item" id="[##_guest_rep_id_##]">
393 |                                 <div class="author-meta"><img class="avatar" src="[##_guest_rep_logo_##]" alt="">
394 |                                   <div class="info"><span class="name">[##_guest_rep_name_##]</span><span class="date">[##_guest_rep_date_##]</span></div>
395 |                                 </div>
396 |                                 <p>[##_guest_rep_desc_##]</p>
397 |                                 <div class="control"><a href="#" onclick="[##_guest_rep_onclick_delete_##]">수정/삭제</a><a href="#" onclick="[##_guest_rep_onclick_reply_##]">댓글쓰기</a></div>
398 |                                 <s_guest_reply_container>
399 |                                   <div class="reply-comment-holder">
400 |                                     <ul>
401 |                                       <s_guest_reply_rep>
402 |                                         <li id="[##_guest_rep_id_##]">
403 |                                           <div class="author-meta"><img class="avatar" src="[##_guest_rep_logo_##]" alt="">
404 |                                             <div class="info"><span class="name">[##_guest_rep_name_##]</span><span class="date">[##_guest_rep_date_##]</span></div>
405 |                                           </div>
406 |                                           <p>[##_guest_rep_desc_##]</p>
407 |                                           <div class="control"><a href="#" onclick="[##_guest_rep_onclick_delete_##]">수정/삭제</a></div>
408 |                                         </li>
409 |                                       </s_guest_reply_rep>
410 |                                     </ul>
411 |                                   </div>
412 |                                 </s_guest_reply_container>
413 |                               </li>
414 |                             </s_guest_rep>
415 |                           </ul>
416 |                         </div>
417 |                       </s_guest_container>
418 |                     </s_guest>
419 |                   </div>
420 |                 </div>
421 |                 <s_paging>
422 |                   <div class="pagination"><a class="prev [##_no_more_prev_##]" [##_prev_page_##]="" href="javascript:;" aria-label="이전"></a>
423 |                     <div class="center">
424 |                       <s_paging_rep><a class="page" [##_paging_rep_link_##]="">[##_paging_rep_link_num_##]</a></s_paging_rep>
425 |                     </div><a class="next [##_no_more_next_##]" [##_next_page_##]="" href="javascript:;" aria-label="다음"></a>
426 |                   </div>
427 |                 </s_paging>
428 |                 <div class="ads-holder">[##_revenue_list_lower_##]</div>
429 |               </div>
430 |               <div class="sidebar-holder">
431 |                 <aside class="bc-sidebar">
432 |                   <s_sidebar>
433 |                     <s_sidebar_element>
434 | 
435 |                       <!-- 공지사항 -->
436 |                       <s_rct_notice>
437 |                         <div class="sidebar-notice card">
438 |                           <p>공지사항</p>
439 |                           <ul>
440 |                             <s_rct_notice_rep>
441 |                               <li><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a></li>
442 |                             </s_rct_notice_rep>
443 |                           </ul>
444 |                         </div>
445 |                       </s_rct_notice>
446 |                     </s_sidebar_element>
447 |                     <s_sidebar_element>
448 | 
449 |                       <!-- 최근에 올라온 글 -->
450 |                       <div class="recentPost card">
451 |                         <p>최근글</p>
452 |                         <ul>
453 |                           <s_rctps_rep>
454 |                             <li>
455 |                               <s_rctps_rep_thumbnail><a href="[##_rctps_rep_link_##]" aria-label="recent-post-item"><img class="lazy" src="./images/lazy_img.svg" data-src="[##_rctps_rep_thumbnail_##]" alt="최근글 [##_rctps_rep_title_##] 포스팅">
456 |                                   <div class="info">
457 |                                     <p class="category">[##_rctps_rep_category_##]</p>
458 |                                     <p class="title">[##_rctps_rep_title_##]</p>
459 |                                     <p class="date">[##_rctps_rep_simple_date_##]</p>
460 |                                   </div>
461 |                                 </a></s_rctps_rep_thumbnail>
462 |                             </li>
463 |                           </s_rctps_rep>
464 |                         </ul>
465 |                       </div>
466 |                     </s_sidebar_element>
467 |                     <s_sidebar_element>
468 | 
469 |                       <!-- 이 블로그 인기글 -->
470 |                       <div class="popularPost card">
471 |                         <p>인기글</p>
472 |                         <ul>
473 |                           <s_rctps_popular_rep>
474 |                             <li>
475 |                               <s_rctps_rep_thumbnail><a href="[##_rctps_rep_link_##]" aria-label="popular-post-item"><img class="lazy" src="./images/lazy_img.svg" data-src="[##_rctps_rep_thumbnail_##]" alt="인기글 [##_rctps_rep_title_##] 포스팅">
476 |                                   <div class="info">
477 |                                     <p class="category">[##_rctps_rep_category_##]</p>
478 |                                     <p class="title">[##_rctps_rep_title_##]</p>
479 |                                     <p class="date">[##_rctps_rep_simple_date_##]</p>
480 |                                   </div>
481 |                                 </a></s_rctps_rep_thumbnail>
482 |                             </li>
483 |                           </s_rctps_popular_rep>
484 |                         </ul>
485 |                       </div>
486 |                     </s_sidebar_element>
487 |                     <s_sidebar_element>
488 | 
489 |                       <!-- 최근에 달린 댓글 -->
490 |                       <div class="recentComment card">
491 |                         <p>최근 작성된 댓글</p>
492 |                         <ul>
493 |                           <s_rctrp_rep>
494 |                             <li><a href="[##_rctrp_rep_link_##]"><b class="name">[##_rctrp_rep_name_##] </b>[##_rctrp_rep_desc_##]</a></li>
495 |                           </s_rctrp_rep>
496 |                         </ul>
497 |                       </div>
498 |                     </s_sidebar_element>
499 |                   </s_sidebar>
500 |                   <s_sidebar>
501 |                     <s_sidebar_element>
502 | 
503 |                       <!-- 태그 클라우드 -->
504 |                       <div class="tagbox card">
505 |                         <p>태그 클라우드</p>
506 |                         <ul>
507 |                           <s_random_tags>
508 |                             <li><a class="[##_tag_class_##] tag" href="[##_tag_link_##]">[##_tag_name_##]</a></li>
509 |                           </s_random_tags>
510 |                         </ul>
511 |                       </div>
512 |                     </s_sidebar_element>
513 |                   </s_sidebar>
514 |                 </aside>
515 |               </div>
516 |             </div>
517 |           </div>
518 |         </main>
519 |         <footer class="bc-footer container">
520 |           <div class="inner">
521 |             <address class="copyright">Copyright <time></time>. <b>[##_var_copyright_##]</b> all rights reserved.</address>
522 |             <address class="designed-by"><a href="https://webruden.tistory.com" target="_blank" rel="noopener noreferer">Designed by <b data-copyright="bc">베이스캠프</b></a></address>
523 |           </div>
524 |         </footer>
525 |         <div id="side-menu">
526 |           <div class="dim"></div>
527 |           <div class="panel">
528 |             <div class="panel__inner">
529 |               <header><a class="close-btn"><img src="./images/close_icon.svg" alt="닫기 아이콘"></a></header>
530 |               <div class="panel__content">
531 |                 <s_if_var_enabled-profile>
532 |                   <div class="side-profile">
533 |                     <div class="side-profile__bg">
534 |                       <s_if_var_profile-bg-image><img class="lazy" data-src="[##_var_profile-bg-image_##]" alt="사이드 프로필 배경이미지"></s_if_var_profile-bg-image>
535 |                       <s_not_var_profile-bg-image><img class="lazy" data-src="./images/profile_default_image.jpg" alt="사이드 프로필 배경이미지"></s_not_var_profile-bg-image>
536 |                     </div>
537 |                     <div class="side-profile__info">
538 |                       <div class="side-profile__info-inner">
539 |                         <s_if_var_profile-avatar><img class="lazy" data-src="[##_var_profile-avatar_##]" alt="아바타 이미지"></s_if_var_profile-avatar>
540 |                         <s_not_var_profile-avatar>[##_blog_image_##]</s_not_var_profile-avatar>
541 |                         <p class="title">
542 |                           <s_if_var_profile-title>[##_var_profile-title_##]</s_if_var_profile-title>
543 |                           <s_not_var_profile-title>[##_blogger_##]</s_not_var_profile-title>
544 |                         </p>
545 |                         <s_if_var_profile-sub-title>
546 |                           <p class="sub-title">[##_var_profile-sub-title_##]</p>
547 |                         </s_if_var_profile-sub-title>
548 |                         <p class="desc">[##_desc_##]</p>
549 |                       </div>
550 |                     </div>
551 |                   </div>
552 |                 </s_if_var_enabled-profile>
553 |                 <s_search>
554 |                   <div class="search">
555 |                     <form onsubmit="[##_search_onclick_submit_##]"><input class="search-input" type="text" name="[##_search_name_##]" value="[##_search_text_##]" placeholder="검색어를 입력해 주세요."><button type="submit"></button></form>
556 |                   </div>
557 |                 </s_search>
558 |                 <div class="category-list">[##_category_list_##]</div>
559 |                 <div class="side-menu-footer">
560 |                   <div class="side-menu-footer__left">
561 |                     <s_if_var_enabled-counter>
562 |                       <div class="counter">
563 |                         <p class="total"><span>전체</span><span>[##_count_total_##]</span></p>
564 |                         <p class="today"><span>오늘</span><span>[##_count_today_##]</span></p>
565 |                         <p class="yesterday"><span>어제</span><span>[##_count_yesterday_##]</span></p>
566 |                       </div>
567 |                     </s_if_var_enabled-counter>
568 |                   </div>
569 |                   <div class="side-menu-footer__right">
570 |                     <address class="designed-by"><a href="https://webruden.tistory.com" target="_blank" rel="noopener noreferer">Designed by <b data-copyright="bc">베이스캠프</b></a></address>
571 |                   </div>
572 |                 </div>
573 |               </div>
574 |             </div>
575 |           </div>
576 |         </div>
577 |         <div class="fixed-btn-holder"><a id="bc-subscribe"></a>
578 |           <s_if_var_enabled-backtop><a id="back-top"></a></s_if_var_enabled-backtop>
579 |         </div>
580 |       </div>
581 |     </s_t3>
582 |     <script type="text/javascript" src="./images/app.5a953394a2950b5aeed1.js"></script>
583 |     <script>
584 |       (function() {
585 |         window.onload = function() {
586 |           // 티스토리에서 자동 삽입되는 요소 중에
587 |           // lighthouse 퍼포먼스 체크에 방해되는 요소들 개선
588 |           var tRateBtn = document.querySelector("#rate_btn_rateus");
589 |           var editEntry = document.querySelector('#editEntry');
590 |           var lbEl = document.querySelector(".lb-cancel");
591 |           var pageEl = document.querySelectorAll('.pagination a:not([href])');
592 |           if (tRateBtn) {
593 |             tRateBtn.setAttribute("rel", "noopener noreferer");
594 |           }
595 |           if (lbEl) {
596 |             lbEl.setAttribute('href', 'javascript:;');
597 |           }
598 |           if (pageEl) {
599 |             Array.from(pageEl).map(function(el) {
600 |               return el.setAttribute('href', 'javascript:;');
601 |             });
602 |           }
603 |           if (editEntry) {
604 |             editEntry.setAttribute('title', 'editEntry');
605 |           }
606 |         };
607 |       })();
608 |     </script>
609 |     <script>
610 |       (function() {
611 |         var lazyLoadInstance = new LazyLoad({
612 |           skip_invisible: true
613 |         });
614 |       })();
615 |     </script>
616 |     <s_if_var_enabled-custom-ads>
617 |       <script>
618 |         (function() {
619 |           __BASECAMP__.ads.register('[##_var_ads-client_##]', '[##_var_ads-slot_##]');
620 |           __BASECAMP__.ads.init();
621 |         })();
622 |       </script>
623 |     </s_if_var_enabled-custom-ads>
624 |     <script type="text/javascript" src="./images/script.xVsJkRhgF2lCEZoODeL1.js"></script>
625 |   </body>
626 | </html>


--------------------------------------------------------------------------------