이 포스팅에는 모든 Blogger 게시물에 적용할 수 있는 몇 가지 글쓰기 스타일과 추가 기능이 포함되어 있습니다. 대부분의 기능은 'HTML 보기' 모드에서만 사용할 수 있으며 일부 기능을 사용하는 동안 '새 글 작성 보기' 모드로 전환할 수 없습니다.
- 게시물 편집기에서 제목의 왼쪽 하단에 있는 아이콘을 클릭합니다.
- HTML 보기와 새 글 작성 보기의 두 가지 옵션이 나타납니다.
- 'HTML 보기'를 선택합니다.
팁:
<p>Your_paragraph_here</p> 태그를
사용하여 단락을 추가합니다.
아래 나열된 코드를 복사 후 붙여 넣기만 하면 이러한 모든 기능을 바로 사용할 수 있습니다.
캡션 및 자동 라이트박스가 있는 이미지
|
| 게시물의 모든 이미지에는 자동으로 라이트박스 기능이 있습니다. 이 이미지를 클릭하여 사용해 보세요. |
<table class="tr-caption-container">
<tbody>
<tr>
<td>
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
</td>
</tr>
<tr>
<td class="tr-caption">Your_caption_is_here</td>
</tr>
</tbody>
</table>
.tr-caption-container{min-width:0;width:auto;margin:0 auto;border:0;position:relative;overflow:inherit}
.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
.tr-caption-container tr:nth-child(2n+1) td,
.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent}
.tr-caption-container .tr-caption{display:block;font-size:12px;color:#767676;background-color:transparent;border:0;line-height:1.8em}
그리드 레이아웃이 있는 이미지
<div class="gridImage"> <img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/> <img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/> <img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/> <img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/> </div>
.gridImage{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;margin:1.7em 0}
.gridImage > *:nth-child(2n){margin-right:0}
.gridImage > *{width:calc(50% - 7.5px);margin-right:15px;margin-bottom:15px}
.gridImage > *:last-of-type, .gridImage > *:nth-last-of-type(2){margin-bottom:0}
.gridImage > *:nth-child(2n){margin-bottom:15px}
모두 표시 기능이 있는 이미지
<input class="imageInput hidden" id="for-hideImage" type="checkbox">
<div class="hideImage">
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
<div class="buttonImage">
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
<!--[ Button image to activate ]-->
<label for="for-hideImage" aria-label="Show all image">Show All</label>
</div>
<!--[ Hide the rest image here ]-->
<div class="showImage">
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
<img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/>
</div>
</div>
.hideImage, .showImage{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;margin:1.7em 0}
.hideImage > *:nth-child(2n), .showImage > *:nth-child(2n){margin-right:0}
.hideImage > *, .showImage > *{width:calc(50% - 7.5px);margin-right:15px;margin-bottom:15px}
.hideImage img{display:block}
.hideImage .showImage{width:100%;margin:0; transition:all .2s ease;-webkit-transition:all .2s ease;max-height:0;opacity:0;visibility:hidden}
@media screen and (max-width:480px){.hideImage > *, .showImage > {width:100%;margin-right:0}}
.buttonImage{position:relative}
.buttonImage label{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:2px;display:flex;align-items:center;justify-content:center; background-color:rgba(0,0,0,.75);transition:all .2s ease;-webkit-transition:all .2s ease}
.buttonImage label:before{content:'Show All'; color:#fefefe;font-size:13px}
.imageInput:checked ~ .hideImage .showImage{max-height:1000vh;opacity:1;visibility:visible}
.imageInput:checked ~ .hideImage .buttonImage label{opacity:0;visibility:hidden}
'모두 표시' 기능은 한 번만 클릭할 수 있으며 활성화한 이미지는 다시 숨길 수 없습니다.
스크롤 레이아웃이 있는 이미지
모바일 보기에서만 이미지가 사이드로 평행하게 정렬되며 스크롤 기능을 추가했습니다.
또한 이 기능에 부드러운 스크롤 효과를 추가합니다. 모바일 장치에서 이 페이지를 열어보세요.
<div class="scrollImage"> <img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/> <img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/> <img alt="image_title_here" src="https://blogger.googleusercontent.com/.../name.png"/> </div>
.scrollImage{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;margin:1.7em 0}
.scrollImage > *{width:calc(33.333% - 13.333px);margin:0 20px 20px 0}
.scrollImage > *:nth-child(3n), .scrollImage > *:last-of-type, .gridImage > *:nth-child(2n){margin-right:0}
@media screen and (max-width:480px){
.scrollImage{flex-wrap:nowrap;justify-content:flex-start;position:relative;width:calc(100% + 40px);left:-20px;padding:0 20px;overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.scrollImage > *{display:block;flex-shrink:0;width:80%;margin:0 15px 0 0;scroll-snap-align:center}
.scrollImage > *:nth-child(3n){margin-right:15px}
.scrollImage > *:last-of-type{margin-right:0}
.scrollImage:after{content:'';display:block;flex-shrink:0;align-self:stretch;padding-left:20px}
}
Lazyload 이미지
이 기능은 블로그의 PageSpeed 점수를 높이는 데 유용하며 사용자가 이미지 영역으로 스크롤 할 때까지 이미지가 로드가 지연됩니다.
또한 사용자가 자바스크립트를 비활성화한 경우에도
<noscript>를 사용하여 이미지를 표시합니다.
<div>
<img class="lazy" alt="image_title_here" data-src="https://blogger.googleusercontent.com/.../name.png" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
<noscript><img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/></noscript>
</div>
<script>
/*! lazysizes - v5.3.0 by github.com/aFarkas */
!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazy",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,i=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,o=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],a={},G=Array.prototype.forEach,J=function(e,t){if(!a[t]){a[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return a[t].test(e[$]("class")||"")&&a[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var a;if(a=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(a," "))}},V=function(t,a,e){var i=e?P:"removeEventListener";if(e){V(t,a)}r.forEach(function(e){t[i](e,a)})},X=function(e,t,a,i,r){var n=D.createEvent("Event");if(!a){a={}}a.instance=k;n.initEvent(t,!i,!r);n.detail=a;e.dispatchEvent(n);return n},Y=function(e,t){var a;if(!i&&(a=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}a({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,a){a=a||e.offsetWidth;while(a<H.minSize&&t&&!e._lazysizesWidth){a=t.offsetWidth;t=t.parentNode}return a},ee=function(){var a,i;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;a=true;i=false;while(e.length){e.shift()()}a=false};var e=function(e,t){if(a&&!t){e.apply(this,arguments)}else{n.push(e);if(!i){i=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(a,e){return e?function(){ee(a)}:function(){var e=this;var t=arguments;ee(function(){a.apply(e,t)})}},ae=function(e){var a;var i=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){a=false;i=f.now();e()};var s=o&&n>49?function(){o(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(a){return}a=true;t=r-(f.now()-i);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ie=function(e){var t,a;var i=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-a;if(e<i){I(n,i-e)}else{(o||r)(r)}};return function(){a=f.now();if(!t){t=I(n,i)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var M=0;var N=-1;var L=function(e){M--;if(!e||M<0||!e.target){M=0}};var x=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var W=function(e,t){var a;var i=e;var r=x(e);g-=t;b+=t;p-=t;C+=t;while(r&&(i=i.offsetParent)&&i!=D.body&&i!=O){r=(Z(i,"opacity")||1)>0;if(r&&Z(i,"overflow")!="visible"){a=i.getBoundingClientRect();r=C>a.left&&p<a.right&&b>a.top-1&&g<a.bottom+1}}return r};var t=function(){var e,t,a,i,r,n,s,o,l,u,f,c;var d=k.elements;if((h=H.loadMode)&&M<8&&(e=d.length)){t=0;N++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(o=d[t][$]("data-expand"))||!(n=o*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&M<1&&N>2&&h>2&&!D.hidden){w=f;N=0}else if(h>1&&N>1&&M<6){w=u}else{w=_}}if(l!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;l=n}a=d[t].getBoundingClientRect();if((b=a.bottom)>=s&&(g=a.top)<=z&&(C=a.right)>=s*c&&(p=a.left)<=y&&(b||C||p||g)&&(H.loadHidden||x(d[t]))&&(m&&M<3&&!o&&(h<3||N<4)||W(d[t],n))){R(d[t]);r=true;if(M>9){break}}else if(!r&&m&&!i&&M<4&&N<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!o&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){i=v[0]||d[t]}}if(i&&!r){R(i)}}};var a=ae(t);var S=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}L(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,B);X(t,"lazyloaded")};var i=te(S);var B=function(e){i({target:e.target})};var T=function(e,t){var a=e.getAttribute("data-load-mode")||H.iframeLoadMode;if(a==0){e.contentWindow.location.replace(t)}else if(a==1){e.src=t}};var F=function(e){var t;var a=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(a){e.setAttribute("srcset",a)}};var s=te(function(t,e,a,i,r){var n,s,o,l,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(i){if(a){K(t,H.autosizesClass)}else{t.setAttribute("sizes",i)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){o=t.parentNode;l=o&&j.test(o.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||l);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(L,2500);V(t,B,true)}if(l){G.call(o.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!l){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||l)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,H.fastLoadedClass)}S(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){M--}},true)});var R=function(e){if(e._lazyRace){return}var t;var a=n.test(e.nodeName);var i=a&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=i=="auto";if((r||!m)&&a&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;M++;s(e,t,r,i,a)};var r=ie(function(){H.loadMode=3;a()});var o=function(){if(H.loadMode==3){H.loadMode=2}r()};var l=function(){if(m){return}if(f.now()-e<999){I(l,999);return}m=true;H.loadMode=3;a();q("scroll",o,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",a,true);q("resize",a,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(a).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",a,true);O[P]("DOMAttrModified",a,true);setInterval(a,999)}q("hashchange",a,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,a,true)});if(/d$|^c/.test(D.readyState)){l()}else{q("load",l);D[P]("DOMContentLoaded",a);I(l,2e4)}if(k.elements.length){t();ee._lsFlush()}else{a()}},checkElems:a,unveil:R,_aLSL:o}}(),re=function(){var a;var n=te(function(e,t,a,i){var r,n,s;e._lazysizesWidth=i;i+="px";e.setAttribute("sizes",i);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",i)}}if(!a.detail.dataAttr){Y(e,a.detail)}});var i=function(e,t,a){var i;var r=e.parentNode;if(r){a=s(e,r,a);i=X(e,"lazybeforesizes",{width:a,dataAttr:!!t});if(!i.defaultPrevented){a=i.detail.width;if(a&&a!==e._lazysizesWidth){n(e,r,i,a)}}}};var e=function(){var e;var t=a.length;if(t){e=0;for(;e<t;e++){i(a[e])}}};var t=ie(e);return{_:function(){a=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:i}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});
</script>
관련 게시물
이 기능의 장점은 모든 페이지에 원하는 곳에 추가할 수 있으며 링크 및 관련 제목을 변경할 수 있습니다. 뿐만 아니라 관련 게시물에 추가한 모든 링크가 검색 로봇에 의해 참조 페이지로 색인화 됩니다.
이 블로그의 관련 게시물 :
<div class="postRelated">
<!--[ Related title ]-->
<b>이 블로그의 관련 게시물 :</b>
<ul>
<li><a href="#">Your_post_title_here</a></li>
<li><a href="#">Your_post_title_here</a></li>
<li><a href="#">Your_post_title_here</a></li>
</ul>
</div>
.postRelated{margin:3em 0;padding:1.5em 0;border:1px solid rgba(0,0,0,.05);border-left:0;border-right:0}
.postRelated h3, .postRelated h4, .postRelated b{font-size:15px;margin:0}
.postRelated ul, .postRelated ol{font-size:15px;margin-bottom:0;padding-left:20px}
.postRelated h3, .postRelated h4,
.postRelated ul, .postRelated ol{font-size:13px}
Post Break
이 기능을 사용하여 단락을 분리하거나 새로운 주제의 글로 변경할 때 사용할 수 있습니다. 어떻게 보이는지 예를 각 단락 끝에서 볼 수 있습니다.
<i class="separate"></i>
.separate{display:block;margin:4em 0}
.separate:before{content:'\2027 \2027 \2027';display:block;text-align:center;font-size:28px;font-style:normal;letter-spacing:0.6em;text-indent:0.6em;clear:both}
텍스트 들여 쓰기가 있는 단락
이 기능은 단락의 첫 번째 문장을 미리 정해진 값으로 들여쓰기할 때 사용합니다. 필요에 따라 여러 단락에 기능을 적용할 수 있습니다.
<p class="textIndent">Your_paragraph_is_here.</p>
.textIndent{text-indent:2.2rem}
Dropcap이 있는 단락
첫 번째 단락에서 사용되는 장식 요소로 크기는 일반적으로 문단 두 줄 이상입니다. 첫 글자 크기를 조정하여 하나 이상의 줄을 아래로 내립니다.
Dropcap은 시각적 요소로 독자의 관심을 높일 수 있기 때문에 책, 잡지, 신문 등과 같은 많은 유형의 웹사이트에서 사용됩니다.
<p><span class="dropCap">Y</span>our_paragraph_is_here.</p>
.dropCap{float:left;margin:6px 8px 0 0;font-size:55px;line-height:45px}
인용구
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
— Anonymous
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.<br/><br/>— Anonymous</blockquote>
blockquote{position:relative;font-size:.97rem;color:#767676;line-height:1.7em;margin-left:0;margin-right:0;padding:30px 25px;border-left:1px solid rgba(0,0,0,.1);text-align: left}
blockquote.s-1{padding:30px 25px 30px 55px;border:1px solid rgba(0,0,0,.1);border-left:0;border-right:0}
blockquote.s-1:before{content:'\201D';display:block;position:absolute;font-weight:700;font-family:Georgia;font-size:60px;top:25px;left:0;line-height:normal;color:rgba(0,0,0,.15)}
@media screen and (max-width:640px){blockquote{font-size:.92rem}}
@media screen and (max-width:480px){blockquote{font-size:14px;line-height:1.8em}}
사용할 수 있는 다른 스타일 형식 :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
- Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
- Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
<blockquote class="s-1">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
<ul>
<li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
<li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
</ul>
</div>
</blockquote>
blockquote{position:relative;font-size:.97rem;color:#767676;line-height:1.7em;margin-left:0;margin-right:0;padding:30px 25px;border-left:1px solid rgba(0,0,0,.1);text-align: left}
blockquote.s-1{padding:30px 25px 30px 55px;border:1px solid rgba(0,0,0,.1);border-left:0;border-right:0}
blockquote.s-1:before{content:'\201D';display:block;position:absolute;font-weight:700;font-family:Georgia;font-size:60px;top:25px;left:0;line-height:normal;color:rgba(0,0,0,.15)}
@media screen and (max-width:640px){blockquote{font-size:.92rem}}
@media screen and (max-width:480px){blockquote{font-size:14px;line-height:1.8em}}
노트 블록
중요한 정보를 추가하거나 문장을 강조할 때 사용합니다. 두 가지 스타일이 있습니다.
Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et.
<p class="note">Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et.</p>
/* Note */
.note{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;line-height:1.6em;border-radius:10px;overflow:hidden}
.note::before{content:'';width:60px;height:60px;background:#81b4dc;display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1}
.note::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center}
.note.wr{background:#ffdfdf;color:#48525c}
.note.wr::before{background:#e65151}
.note.wr::after{content:'\0021'}
Warning!
Mauris vel diam pellentesque lorem lacinia luctus. Nulla
quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit
sapien sed turpis ultrices viverra.
<p class="note wr"><b>Warning! </b><br/>Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
/* Note */
.note{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;line-height:1.6em;border-radius:10px;overflow:hidden}
.note::before{content:'';width:60px;height:60px;background:#81b4dc;display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1}
.note::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center}
.note.wr{background:#ffdfdf;color:#48525c}
.note.wr::before{background:#e65151}
.note.wr::after{content:'\0021'}
표
열 길이가 뷰포트/화면 영역의 너비를 초과하면 자동 스크롤 기능이 있습니다. 자동 스크롤 기능을 확인하려면 모바일 장치에서 이 페이지를 열어보세요.
HTML에서 표를 사용하는 것이 조금 더 복잡하므로 사용하기전에 HTML 표에 대해 자세히 알아보는 것이 좋습니다.
실제 데이터가 있는 샘플 표:
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Lee Si-Eun | Accountant | Seoul | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 33 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 44 | 2008/11/28 | $162,700 |
<!--[ Table ]-->
<div class="table">
<table style="white-space:nowrap; min-width:100%;">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Lee Si-Eun</td>
<td>Accountant</td>
<td>Seoul</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>33</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>44</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
</div>
/* Table */
table{min-width:70%;margin:0 auto;border:0;overflow:hidden;font-size:14px;border-collapse:collapse}
table th{background-color:transparent;padding:17px 25px;border:1px solid rgba(0,0,0,.1);border-left-width:0}
table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{}
table th:last-child{border-radius:0 2px 0 0}
table th:first-child{border-left-width:1px;border-radius:2px 0 0}
table td:first-child{border-left-width:1px}
table td{padding:20px 25px;border:1px solid rgba(0,0,0,.1);border-left-width:0;border-top:0;vertical-align:middle}
table tr:last-child td:first-child{border-radius:0 0 0 2px}
table tr:last-child td:last-child{border-radius:0 0 2px 0}
table tr:nth-child(2n+1) td{background-color:rgba(0,0,0,.01)}
.table{display:block;box-sizing:border-box;overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth}
@media screen and (max-width:480px){.table{position:relative;width:calc(100% + 40px);left:-20px;padding:0 20px}}
-
white-space:nowrap;텍스트를 한 줄로 지정하면 다음 줄로 줄 바꿈되지 않고<br>태그가 나타날 때까지 계속됩니다. -
min-width:100%;테이블의 최소 너비를 정의하는 경우 px 단위(예:500px)로 변경할 수 있습니다. 테이블 너비가 자동으로 결정되도록 하려면0으로 변경하십시오.
수동 목차
목차
게시물에 목차를 추가하는 데 사용할 수 있는 두 가지 옵션이 있습니다. 첫 번째는 수동이고 두 번째는 반자동입니다.
수동 작성의 경우 목차에 추가하려는 각 제목 태그에 새
id = "..." 속성을 추가해야 합니다. 수동 목차의 장점은 목차에
추가할 내용을 선택할 수 있다는 것입니다. 초보자에게는 조금 어렵습니다.
다음은 ID 속성이 추가된 수동 목차의 예시입니다.
<h2>Your_Heading</h2>
<h3>Sub_Heading_1</h3>
<h2 id='heading'>Your_Heading</h2>
<h3 id='subHeading'>Sub_Heading_1</h3>
올바른 목차 목록 작성:
<details class="sp toc" open="">
<summary data-show="Show all" data-hide="Hide all">목차</summary>
<div class="toC">
<ol>
<li><a href="#heading">Your_Heading</a></li>
...
...
...
</ol>
<!--[ Sample ToC with subheading ]-->
<ol>
<li><a href="#heading">Your_Heading</a>
<ol>
<li><a href="#subHeading">Sub_Heading_1</a></li>
...
...
...
</ol>
</li>
</ol>
</div>
</details>
/* Table of Content */
details summary{list-style:none;outline:none}
details summary::-webkit-details-marker{display:none}
details.sp{padding:20px 15px}
details.sp summary{display:flex;justify-content:space-between;align-items:baseline}
details.sp summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer}
details.sp[open] summary::after{content:attr(data-hide)}
details.toc a:hover{text-decoration:underline}
details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit}
details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count}
details.toc ol ol ol ol{display:none}
details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px}
details.toc li li:first-child{margin-top:5px}
details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end}
details.toc li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count}
details.toc li a{flex:1 0 calc(100% - 23px)}
details.toc li li::before{flex:0 0 28px; content:counters(toc-count,'.')}
details.toc li li a{flex:1 0 calc(100% - 28px)}
details.toc li li li::before{flex:0 0 45px}
details.toc li li li a{flex:1 0 calc(100% - 45px)}
details.toc .toC >ol{margin-top:1em}
details.toc .toC >ol >li >ol{flex:0 0 calc(100% - 23px)}
details.toc .toC >ol >li >ol ol{flex:0 0 calc(100% - 28px)}
details.toc .toC >ol >li >ol ol ol{flex:0 0 calc(100% - 45px)}
-
페이지가 처음 로드될 때 목차를 자동으로 닫으려면
open=''속성을 제거합니다. - 표시된 부분에서 'Show all/Hide all'라는 문구나 제목을 변경할 수 있습니다.
반자동 목차
Contents
목차를 표시하는 가장 쉬운 옵션입니다. 수동 목차와 동일하게 보이지만, 차이점은 제목 태그에 ID를 작성하고 추가할 필요가 없습니다.
이 기능은 게시물의 모든 제목 태그를 표시하므로 3단계의 제목
태그(h2-h4)를 순서대로 작성해야 합니다. (일반적인
오류: 목차의 불규칙한 순서)
먼저 </head> 태그 위에 다음 스크립트를
추가합니다.
<!--[ Script to activate ToC ]-->
<script>/*<![CDATA[*/ class TableOfContents { constructor({ from, to }) { this.fromElement = from; this.toElement = to; this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"); this.tocElement = document.createElement("div"); }; getMostImportantHeadingLevel() { let mostImportantHeadingLevel = 6; for (let i = 0; i < this.headingElements.length; i++) { let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]); mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ? headingLevel : mostImportantHeadingLevel; } return mostImportantHeadingLevel; }; static generateId(headingElement) { return headingElement.textContent.replace(/\s+/g, "_"); }; static getHeadingLevel(headingElement) { switch (headingElement.tagName.toLowerCase()) { case "h1": return 1; case "h2": return 2; case "h3": return 3; case "h4": return 4; case "h5": return 5; case "h6": return 6; default: return 1; } }; generateToc() { let currentLevel = this.getMostImportantHeadingLevel() - 1, currentElement = this.tocElement; for (let i = 0; i < this.headingElements.length; i++) { let headingElement = this.headingElements[i], headingLevel = TableOfContents.getHeadingLevel(headingElement), headingLevelDifference = headingLevel - currentLevel, linkElement = document.createElement("a"); if (!headingElement.id) { headingElement.id = TableOfContents.generateId(headingElement); } linkElement.href = '#${headingElement.id}'; linkElement.textContent = headingElement.textContent; if (headingLevelDifference > 0) { for (let j = 0; j < headingLevelDifference; j++) { let listElement = document.createElement("ol"), listItemElement = document.createElement("li"); listElement.appendChild(listItemElement); currentElement.appendChild(listElement); currentElement = listItemElement; } currentElement.appendChild(linkElement); } else { for (let j = 0; j < -headingLevelDifference; j++) { currentElement = currentElement.parentNode.parentNode; } let listItemElement = document.createElement("li"); listItemElement.appendChild(linkElement); currentElement.parentNode.appendChild(listItemElement); currentElement = listItemElement; } currentLevel = headingLevel; } this.toElement.appendChild(this.tocElement.firstChild); } }
/*]]>*/</script>
</head>
반자동 목차 위젯 위치를 지정하는 코드:
<details class="sp toc"> <summary data-show="Show all" data-hide="Hide all">목차</summary> <div class="toC" id="toContent"></div> </details>
반자동 목차를 활성화하려면 게시물 끝에 이 스크립트를 추가하세요.
<!--[ Script to activate ToC ]-->
<script> document.addEventListener("DOMContentLoaded", () =>
new TableOfContents({
from: document.querySelector(".post-body"),
to: document.querySelector("#tocContent")
}).generateToc()
);
</script>
-
페이지가 처음 로드될 때 목차를 자동으로 닫으려면
open=''속성을 제거합니다. - 표시된 부분에서 'Show all/Hide all'라는 문구나 제목을 변경할 수 있습니다.
구문 하이라이터
이 기능은 게시물에 컴퓨터 코드(HTML, CSS, Javascript 등)를 작성하는 데 사용됩니다.
<!--[ Change classname to html, css, or js ]--> <div class="pre html"> <pre style="white-space:pre-wrap; max-height:none;">Your_code_is_here</pre> </div>
.pre{background:#f6f6f6;color:#2f3337}
.pre:not(.tb){position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:var(--fontC)}
.pre pre{margin:0;color:inherit;background:inherit}
.pre:not(.tb)::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:#656e77;font-size:10px;padding:0 10px;z-index:2;line-height:30px}
.pre:not(.tb).html::before{content:'.html'}
.pre:not(.tb).css::before{content:'.css'}
.pre:not(.tb).js::before{content:'.js'}
pre{display:block;position:relative;font-size:13px;line-height:1.6em;border-radius:3px;background:#f6f6f6;color:#2f3337;padding:30px 20px 20px;margin:1.7em auto; -moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre}
pre i{color:#015692;font-style:normal}
pre i.block{color:#fff;background:#015692}
pre i.green{color:#54790d}
pre i.gray{color:#656e77}
pre i.red{color:#b75501}
pre i.blue{#015692}
구문에 색상 코드 추가는 수동으로 작성해야 하며 자동 색상 구문 기능은 제공하지 않습니다.
-
클래스명
html을 변경하여 다른 코드 형식을 정의합니다. 사용할 수 있는 옵션은html,css,js3 가지가 있습니다. -
측면 스크롤을 비활성화하려면
white-space:pre-wrap;값을 입력합니다. 기본적으로 긴 코드가 유지되고 읽기 쉽게 유지하기 위해 약간의 스크롤 기능이 제공됩니다. -
max-height:none;는 구문의 최대 높이가 설정되지 않음(자동)을 의미합니다. 구문의 최대 높이를 400픽셀로 지정하려면none값을400px로 변경합니다. -
<i class='red'>code_here</i>는 레드/오렌지 색상을 추가할 때 사용합니다. -
<i class='blue'>code_here</i>는 파란색을 추가할 때 사용합니다. -
<i class='green'>code_here</i>는 녹색을 추가할 때 사용합니다. -
<i class='gray'>code_here</i>는 회색을 추가할 때 사용합니다. -
<i class='block'>code_here</i>는 파란색 블록을 추가하는 데 사용합니다.
멀티탭 구문 하이라이터
<!DOCTYPE html>
<html dir="ltr" lang="ko">
<head>
<title>Sample Page</title>
</head>
<!--[ <body> open ]-->
<body>
<p>Sample content here!</p>
</body>
<!--[ </body> close ]-->
</html>
/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "https://urliveblogger.blogspot.com/",
"name": "구글 블로그 만들기",
"alternateName": "구글 블로그 만들기",
"potentialAction": {
"@type": "SearchAction",
"target": "https://urliveblogger.blogspot.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
<div class="pre tb">
<!--[ Active function ]-->
<input class="prei hidden" id="preT-1" type="radio" name="preTab" checked>
<input class="prei hidden" id="preT-2" type="radio" name="preTab">
<input class="prei hidden" id="preT-3" type="radio" name="preTab">
<!--[ Header/title ]-->
<div class="preH tbHd scrlH">
<!--[ Change atribute data-text="..." to replace title ]-->
<label for="preT-1" data-text="HTML"></label>
<label for="preT-2" data-text="CSS"></label>
<label for="preT-3" data-text="JS"></label>
</div>
<!--[ Content ]-->
<div class="preC-1">
<pre>Your_code_is_here</pre>
</div>
<div class="preC-2">
<pre>Your_code_is_here</pre>
</div>
<div class="preC-3">
<pre>Your_code_is_here</pre>
</div>
</div>
.pre.tb{border-radius:5px;margin:1.7em auto}
.pre.tb pre{margin:0;background:inherit}
.pre.tb .preH{font-size:13px;border-color:rgba(0,0,0,.05);margin:0}
.pre.tb .preH >*{padding:13px 20px;display:flex;align-items:center;justify-content:center}
.pre.tb .preH::after{content:'</>';font-size:10px;font-family:var(--fontC);color:var(--synxGray);padding:15px;margin-left:auto} .pre.tb >:not(.preH){display:none}
.postBody input[id*="1"]:checked ~ div[class*="C-1"], .postBody input[id*="2"]:checked ~ div[class*="C-2"], .postBody input[id*="3"]:checked ~ div[class*="C-3"], .postBody input[id*="4"]:checked ~ div[class*="C-4"]{display:block}
-
checked속성은 기본적으로 표시되는 첫 번째 탭을 정의합니다. -
id='...'및for='...'속성 값이 동일한 지 확인하십시오. ID는 고유해야 하며 한 페이지에 동일한 ID가 두 개 있을 수 없습니다. -
강조 표시된 섹션의
data-text='HTML'속성을 변경하여 탭의 이름을 변경합니다.
더보기/숨기기 접은글
이 기능은 사용자가 필요에 따라 열고 닫을 수 있는 대화형 위젯을 만드는 데 사용됩니다. 기본적으로 이 위젯은 닫혀 있으며 사용자가 버튼을 클릭을 때 그 안의 내용을 표시합니다.
이 위젯에는 모든 콘텐츠가 포함될 수 있습니다.
Spoiler:
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
<details class="sp"> <summary data-show="Show all" data-hide="Hide all">Spoiler:</summary> <p>Your_text_is_here.</p> </details>
details summary{list-style:none;outline:none}
details summary::-webkit-details-marker{display:none}
details.sp{padding:20px 15px}
details.sp summary{display:flex;justify-content:space-between;align-items:baseline}
details.sp summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer}
details.sp[open] summary::after{content:attr(data-hide)}
아코디언 메뉴
접었다 펼 수 있는 기능이 있는 메뉴를 아코디언 메뉴라고 합니다. 사용자가 필요에 따라 그룹에서 열고 닫을 수 있는 추가 콘텐츠를 정의하며 일반적으로 질문 목록이나 FAQ(자주 묻는 질문)에 사용됩니다.
Accordion_first_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_second_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_third_title (alt)
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_fourth_title (alt)
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
<!--[ Accordion start ]-->
<div class="showH">
<!--[ Accordion line 1 ]-->
<details class="ac">
<summary>Title_is_here</summary>
<div class="aC">
<p>Your_text_is_here.</p>
</div>
</details>
<!--[ Accordion line 2 ]-->
<details class="ac alt">
<summary>Title_is_here</summary>
<div class="aC">
<p>Your_text_is_here.</p>
</div>
</details>
...
...
</div>
.showH{margin:1.7em 0;font-size:.93rem;line-height:1.7em}
details.ac{padding:18px 0;border-bottom:1px solid #e6e6e6}
details.ac:first-child{border-top:1px solid #e6e6e6}
details.ac summary{font-weight:700;cursor:default;display:flex;align-items:baseline;transition:all .1s ease}
details.ac summary::before{content:'\203A';flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px;font-weight:400;font-size:1.33rem;color:inherit}
details.ac[open] summary{color:#015692}
details.ac:not(.alt)[open] summary::before{transform:rotate(90deg);padding:0 0 0 5px;justify-content:center}
details.ac.alt summary::before{content:'\002B'; padding:0 2px}
details.ac.alt[open] summary::before{content:'\2212'}
details.ac .aC{padding:0 25px;opacity:.9}
-
클래스 이름
alt(위 코드에 표시됨)을 사용하여 아이콘 스타일을 변경합니다. - 추가할 수 있는 아코디언 위젯의 수는 무제한입니다.
외부 링크
링크가 다른 사이트로 연결될 경우 사용자에게 알립니다.
Sample_external_linkSample_link_alt1
Sample_link_alt2
<a class="extL" href="url_is_here" rel="noreferrer" target="_blank">Sample_external_link</a> <a class="extL alt1" href="url_is_here" rel="noreferrer" target="_blank">Sample_link_alt1</a> <a class="extL alt2" href="url_is_here" rel="noreferrer" target="_blank">Sample_link_alt2</a>
.extL::after{content:''; width:14px;height:14px; display:inline-block;margin:0 5px; background: url("data:image/svg+xml,") center / 16px no-repeat}
.extL.alt1:after{content:'';width:15px;height:15px;display:inline-block;margin-left:5px;background:url("data:image/svg+xml,") center / 15px no-repeat}
.extL.alt2:after{background-image:url("data:image/svg+xml,")}
버튼 링크
클릭 가능한 버튼을 만들어보세요.
일반적인 버튼:
Button대체 스타일:
Button아이콘이 있는 버튼 :
DownloadDemo
Buy now
기타 사용 가능한 <svg> 아이콘 :
Telegram
Messenger
Discord
Kakaotalk
연속된 두 개의 버튼 :
<a class="button" href="url_is_here">Button</a> <a class="button ln" href="url_is_here">Button</a> <a class="button" href="url_is_here"><i class="icon dl"></i>Download</a> <a class="button" href="url_is_here"><i class="icon demo"></i>Demo</a> <a class="button" href="url_is_here"><i class="icon cart"></i>Buy now</a> <a class="button whatsapp" href="url_is_here"><i class="icon whatsapp"></i>Whatsapp</a> <a class="button telegram" href="url_is_here"><i class="icon telegram"></i>Telegram</a> <a class="button fbmessenger" href="url_is_here"><i class="icon fbmessenger"></i>Messenger</a> <a class="button discord" href="url_is_here"><i class="icon discord"></i>Discord</a> <a class="button kakaotalk" href="url_is_here"><i class="icon kakaotalk"></i>Kakaotalk</a> <div class="buttonInfo"> <a class="button" href="url_is_here"><i class="icon download"></i>Download</a> <a class="button outline" href="url_is_here">Demo</a> </div>
.button{display:inline-flex;align-items:center;vertical-align:middle;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe!important;background-color:#204ecf;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%}
.button:hover{opacity:.7;transition:opacity .15s;-webkit-transition:opacity .15s}
.button.outline{background-color:transparent;border:1px solid #000000;color:#000000!important}
.button.outline:hover{border-color:#204ecf}
.button.whatsapp{background-color:#25D366}
.button.telegram{background-color:#179cde}
.button.fbmessenger{background-color:#0083FF}
.button.discord{background-color:#7289da}
.button.kakaotalk{background-color:#FAE100;color:#3B1E1E!important}
.buttonInfo{display:flex;flex-wrap:wrap;justify-content:center;margin:12px 0 0}
.buttonInfo > *{margin:0 12px 12px 0}
.buttonInfo > *:last-child{margin-right:0}
@media screen and (max-width:480px){.buttonInfo > *{flex-grow:1;justify-content:center} .buttonInfo > *:last-child{flex-grow:0;flex-shrink:0}}
.button .icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center center}
.button .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.button .icon.demo{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>")}
.button .icon.cart{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7.42226 19.8203C7.84426 19.8203 8.18726 20.1633 8.18726 20.5853C8.18726 21.0073 7.84426 21.3493 7.42226 21.3493C7.00026 21.3493 6.65826 21.0073 6.65826 20.5853C6.65826 20.1633 7.00026 19.8203 7.42226 19.8203Z'/><path d='M18.6747 19.8203C19.0967 19.8203 19.4397 20.1633 19.4397 20.5853C19.4397 21.0073 19.0967 21.3493 18.6747 21.3493C18.2527 21.3493 17.9097 21.0073 17.9097 20.5853C17.9097 20.1633 18.2527 19.8203 18.6747 19.8203Z'/><path d='M2.74988 3.25L4.82988 3.61L5.79288 15.083C5.87088 16.018 6.65188 16.736 7.58988 16.736H18.5019C19.3979 16.736 20.1579 16.078 20.2869 15.19L21.2359 8.632C21.3529 7.823 20.7259 7.099 19.9089 7.099H5.16388'/></svg>")}
.button .icon.whatsapp{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fefefe'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg>")}
.button .icon.telegram{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fefefe'><g><path d='M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z'/></g></svg>")}
.button .icon.fbmessenger{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' d='M0 0h24v24H0z'/><path fill='%23fefefe' d='M3.9 17.897c-1.432-1.62-2.283-3.673-2.283-5.902 0-5.18 4.628-9.434 10.382-9.434 5.756 0 10.383 4.254 10.383 9.434s-4.627 9.434-10.383 9.434c-1.552 0-3.024-.31-4.346-.865L5.458 22.1a.9.9 0 01-1.416-.702l-.141-3.502zm1.875 1.785l1.264-.885a.9.9 0 01.904-.075c1.21.58 2.591.908 4.056.908 4.712 0 8.583-3.394 8.583-7.635 0-4.242-3.87-7.634-8.583-7.634-4.712 0-8.583 3.392-8.583 7.634 0 1.877.766 3.593 2.023 4.919.15.157.238.365.247.583l.089 2.185z'/><path fill='%23fefefe' d='M10.779 11.718l-2.878 2.415a.9.9 0 01-1.157-1.379L10.4 9.687a.899.899 0 011.332.198l1.563 2.395 2.804-2.353a.9.9 0 111.157 1.378l-3.581 3.007a.902.902 0 01-1.332-.198l-1.564-2.396z'/></svg>")}
.button .icon.discord{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 24 24'><path fill='none' d='M0 0h24v24H0z'/><path fill='%23fefefe' d='M14.83 5.007a23.38 23.38 0 013.049.448A2.094 2.094 0 0119.5 7.138c.409 2.286 1.083 6.112 1.503 8.492a2.099 2.099 0 01-1.17 2.263 20.43 20.43 0 01-3.013 1.131.9.9 0 10.491 1.732 22.266 22.266 0 003.285-1.233 3.902 3.902 0 002.18-4.206c-.42-2.381-1.095-6.209-1.504-8.494a3.894 3.894 0 00-3.015-3.128 25.16 25.16 0 00-3.286-.482.9.9 0 00-.141 1.794zM8.918 3.213a25.135 25.135 0 00-3.286.482 3.893 3.893 0 00-3.016 3.131c-.409 2.282-1.084 6.11-1.504 8.491a3.9 3.9 0 002.173 4.203 22.32 22.32 0 003.292 1.236.9.9 0 10.491-1.732 20.484 20.484 0 01-3.02-1.134 2.099 2.099 0 01-1.163-2.26c.42-2.38 1.094-6.206 1.503-8.489A2.094 2.094 0 016.01 5.455a23.355 23.355 0 013.049-.448.899.899 0 10-.141-1.794zM6.626 17.63a.9.9 0 01-1.319-.153l-.686-.95a.9.9 0 011.213-1.286s6.191 3.948 12.329.002a.9.9 0 011.216 1.284l-.687.95a.9.9 0 01-1.252.205c-4.371 1.978-8.545.881-10.814-.052zm8.474-5.591V14a.9.9 0 001.8 0v-1.961a.9.9 0 00-1.8 0zM7.076 12v1.961a.9.9 0 001.8 0V12a.9.9 0 00-1.8 0zm-.471-2.631s4.238-3.348 10.946.102a.9.9 0 00.823-1.601c-7.908-4.067-12.905.102-12.905.102a.9.9 0 001.136 1.397z'/></svg>")}
.button .icon.kakaotalk{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233B1E1E'><path d='m12 0c-6.667 0-10.686 4.11-11.709 8.183-1.062 4.224.793 8.271 4.855 10.689-.903 3.276-1.45 4.376-.587 4.965.968.662 2.362-.707 4.691-2.494l.957-.733c3.749.486 7.568-.593 10.272-2.913 2.27-1.948 3.52-4.553 3.52-7.334.001-5.715-5.382-10.363-11.999-10.363zm7.504 16.558c-2.454 2.106-5.965 3.049-9.388 2.524-.479-.077-2.592 1.773-4.312 2.971.194-.735.574-1.972.943-3.353.09-.336-.063-.69-.37-.854-4.527-2.431-5.362-6.396-4.633-9.297.884-3.508 4.397-7.049 10.256-7.049 5.79 0 10.5 3.976 10.5 8.862 0 2.338-1.064 4.538-2.996 6.196z'/><path d='m6.5 7.75h-3c-.992 0-.993 1.5 0 1.5h.75v4.25c0 .992 1.5.993 1.5 0v-4.25h.75c.992 0 .993-1.5 0-1.5z'/><path d='m10.196 8.222c-.001-.003-.004-.004-.005-.007-.246-.595-1.126-.623-1.383 0-.001.002-.003.004-.004.007l-2 5c-.154.384.033.821.418.975.958.386 1.129-.971 1.386-1.446h1.785l.411 1.028c.367.92 1.764.367 1.393-.557zm-.988 3.028.292-.731.292.731z'/><path d='m15.5 12.75h-1.25v-4.25c0-.992-1.5-.993-1.5 0v5c0 .414.336.75.75.75h2c.992 0 .993-1.5 0-1.5z'/><path d='m18.25 9.689v-1.189c0-.992-1.5-.993-1.5 0v5c0 .992 1.5.993 1.5 0v-1.469c1.605 1.746 1.657 2.219 2.25 2.219.63 0 .991-.747.569-1.239l-1.857-2.163 1.823-1.823c.002-.003.005-.005.007-.008.001-.001.002-.002.003-.003.681-.706-.373-1.747-1.07-1.05z'/></svg>")}
.button.outline .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.button.outline .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
다운로드 링크
다운로드 파일 정보를 사용자에게 제공합니다.
<div class="dlBox">
<!--[ Change data-text="..." atribute to add new file type ]-->
<span class="fT" data-text="zip"></span>
<div class="fN">
<!--[ File name ]-->
<span>file_name.zip</span>
<span class="fS">200kb</span>
</div>
<!--[ Download link (change href="..." atribute to add link download) ]-->
<a class="button" aria-label="Download" href="url_is_here" rel="noreferrer" target="_blank"><i class="icon dl"></i></a>
</div>
...
텍스트 대신 배경 이미지 사용:
<div class="dlBox">
<!--[ Change data-text="..." atribute to add new file type ]-->
<span class="fT lazy" data-text="zip" data-style="background-image: url(//blogger.googleusercontent.com/.../name.png)"></span>
<div class="fN">
<!--[ File name ]-->
<span>about_me.png</span>
<span class="fS">10kb</span>
</div>
<!--[ Download link (change href="..." atribute to add link download) ]-->
<a class="button" aria-label="Download" href="url_is_here" rel="noreferrer" target="_blank"><i class="icon dl"></i></a>
</div>
...
Lazyload 유튜브
사용자가 페이지를 스크롤한 후 Youtube 비디오 로드를 지연하는데 유용합니다.
<!--[ Lazy youtube ]-->
<div class="lazyYt" data-embed="Youtube_video_ID">
<div class="play">
<svg viewbox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
</div>
</div>
/* Lazy Youtube */
.lazyYt{background:var(--synxBg);position:relative;overflow:hidden;padding-top:56.25%;border-radius:5px}
.lazyYt img{width:100%;top:-16.84%;left:0;opacity:.95}
.lazyYt img, .lazyYt iframe, .lazyYt .play{position:absolute}
.lazyYt iframe{width:100%;height:100%;bottom:0;right:0}
.lazyYt .play{top:50%;left:50%; transform:translate3d(-50%,-50%,0); transition:all .5s ease;display:block;width:70px;height:70px;z-index:1}
.lazyYt .play svg{width:inherit;height:inherit; fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:8}
.lazyYt .play .c{stroke:rgba(255,255,255,.85);stroke-dasharray:650;stroke-dashoffset:650; transition:all .4s ease-in-out; opacity:.3}
.lazyYt .play .t{stroke:rgba(255,255,255,.75);stroke-dasharray:240;stroke-dashoffset:480; transition:all .6s ease-in-out; transform:translateY(0)}
.lazyYt .play:hover .t{animation:nudge .6s ease-in-out;-webkit-animation:nudge .6s ease-in-out}
.lazyYt .play:hover .t, .lazyYt .play:hover .c{stroke-dashoffset:0; opacity:.7;stroke:#FF0000}
/* Lazy Youtube */
( function() {var youtube = document.querySelectorAll(".lazyYoutube"); for (var i = 0; i < youtube.length; i++) {var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; var image = new Image(); image.setAttribute("class", "lazy"); image.setAttribute("data-src",source); image.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="); image.setAttribute("alt","Youtube video"); image.addEventListener( "load", function() {youtube[ i ].appendChild( image );}( i ) ); youtube[i].addEventListener( "click", function() {var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); }); }; })();
/*! lazysizes - v5.3.0 by github.com/aFarkas */
!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazy",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,i=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,o=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],a={},G=Array.prototype.forEach,J=function(e,t){if(!a[t]){a[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return a[t].test(e[$]("class")||"")&&a[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var a;if(a=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(a," "))}},V=function(t,a,e){var i=e?P:"removeEventListener";if(e){V(t,a)}r.forEach(function(e){t[i](e,a)})},X=function(e,t,a,i,r){var n=D.createEvent("Event");if(!a){a={}}a.instance=k;n.initEvent(t,!i,!r);n.detail=a;e.dispatchEvent(n);return n},Y=function(e,t){var a;if(!i&&(a=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}a({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,a){a=a||e.offsetWidth;while(a<H.minSize&&t&&!e._lazysizesWidth){a=t.offsetWidth;t=t.parentNode}return a},ee=function(){var a,i;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;a=true;i=false;while(e.length){e.shift()()}a=false};var e=function(e,t){if(a&&!t){e.apply(this,arguments)}else{n.push(e);if(!i){i=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(a,e){return e?function(){ee(a)}:function(){var e=this;var t=arguments;ee(function(){a.apply(e,t)})}},ae=function(e){var a;var i=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){a=false;i=f.now();e()};var s=o&&n>49?function(){o(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(a){return}a=true;t=r-(f.now()-i);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ie=function(e){var t,a;var i=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-a;if(e<i){I(n,i-e)}else{(o||r)(r)}};return function(){a=f.now();if(!t){t=I(n,i)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var M=0;var N=-1;var L=function(e){M--;if(!e||M<0||!e.target){M=0}};var x=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var W=function(e,t){var a;var i=e;var r=x(e);g-=t;b+=t;p-=t;C+=t;while(r&&(i=i.offsetParent)&&i!=D.body&&i!=O){r=(Z(i,"opacity")||1)>0;if(r&&Z(i,"overflow")!="visible"){a=i.getBoundingClientRect();r=C>a.left&&p<a.right&&b>a.top-1&&g<a.bottom+1}}return r};var t=function(){var e,t,a,i,r,n,s,o,l,u,f,c;var d=k.elements;if((h=H.loadMode)&&M<8&&(e=d.length)){t=0;N++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(o=d[t][$]("data-expand"))||!(n=o*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&M<1&&N>2&&h>2&&!D.hidden){w=f;N=0}else if(h>1&&N>1&&M<6){w=u}else{w=_}}if(l!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;l=n}a=d[t].getBoundingClientRect();if((b=a.bottom)>=s&&(g=a.top)<=z&&(C=a.right)>=s*c&&(p=a.left)<=y&&(b||C||p||g)&&(H.loadHidden||x(d[t]))&&(m&&M<3&&!o&&(h<3||N<4)||W(d[t],n))){R(d[t]);r=true;if(M>9){break}}else if(!r&&m&&!i&&M<4&&N<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!o&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){i=v[0]||d[t]}}if(i&&!r){R(i)}}};var a=ae(t);var S=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}L(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,B);X(t,"lazyloaded")};var i=te(S);var B=function(e){i({target:e.target})};var T=function(e,t){var a=e.getAttribute("data-load-mode")||H.iframeLoadMode;if(a==0){e.contentWindow.location.replace(t)}else if(a==1){e.src=t}};var F=function(e){var t;var a=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(a){e.setAttribute("srcset",a)}};var s=te(function(t,e,a,i,r){var n,s,o,l,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(i){if(a){K(t,H.autosizesClass)}else{t.setAttribute("sizes",i)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){o=t.parentNode;l=o&&j.test(o.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||l);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(L,2500);V(t,B,true)}if(l){G.call(o.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!l){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||l)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,H.fastLoadedClass)}S(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){M--}},true)});var R=function(e){if(e._lazyRace){return}var t;var a=n.test(e.nodeName);var i=a&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=i=="auto";if((r||!m)&&a&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;M++;s(e,t,r,i,a)};var r=ie(function(){H.loadMode=3;a()});var o=function(){if(H.loadMode==3){H.loadMode=2}r()};var l=function(){if(m){return}if(f.now()-e<999){I(l,999);return}m=true;H.loadMode=3;a();q("scroll",o,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",a,true);q("resize",a,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(a).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",a,true);O[P]("DOMAttrModified",a,true);setInterval(a,999)}q("hashchange",a,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,a,true)});if(/d$|^c/.test(D.readyState)){l()}else{q("load",l);D[P]("DOMContentLoaded",a);I(l,2e4)}if(k.elements.length){t();ee._lsFlush()}else{a()}},checkElems:a,unveil:R,_aLSL:o}}(),re=function(){var a;var n=te(function(e,t,a,i){var r,n,s;e._lazysizesWidth=i;i+="px";e.setAttribute("sizes",i);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",i)}}if(!a.detail.dataAttr){Y(e,a.detail)}});var i=function(e,t,a){var i;var r=e.parentNode;if(r){a=s(e,r,a);i=X(e,"lazybeforesizes",{width:a,dataAttr:!!t});if(!i.defaultPrevented){a=i.detail.width;if(a&&a!==e._lazysizesWidth){n(e,r,i,a)}}}};var e=function(){var e;var t=a.length;if(t){e=0;for(;e<t;e++){i(a[e])}}};var t=ie(e);return{_:function(){a=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:i}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});
/*! lazysizes unveilhooks - v5.3.0 */
!function(e,t){var a=function(){t(e.lazySizes),e.removeEventListener("lazyunveilread",a,!0)};t=t.bind(null,e,e.document),"object"==typeof module&&module.exports?t(require("lazysizes")):"function"==typeof define&&define.amd?define(["lazysizes"],t):e.lazySizes?a():e.addEventListener("lazyunveilread",a,!0)}(window,function(e,i,o){"use strict";var l,d,u={};function s(e,t,a){var n,r;u[e]||(n=i.createElement(t?"link":"script"),r=i.getElementsByTagName("script")[0],t?(n.rel="stylesheet",n.href=e):(n.onload=function(){n.onerror=null,n.onload=null,a()},n.onerror=n.onload,n.src=e),u[e]=!0,u[n.src||n.href]=!0,r.parentNode.insertBefore(n,r))}i.addEventListener&&(l=function(e,t){var a=i.createElement("img");a.onload=function(){a.onload=null,a.onerror=null,a=null,t()},a.onerror=a.onload,a.src=e,a&&a.complete&&a.onload&&a.onload()},addEventListener("lazybeforeunveil",function(e){var t,a,n;if(e.detail.instance==o&&!e.defaultPrevented){var r=e.target;if("none"==r.preload&&(r.preload=r.getAttribute("data-preload")||"auto"),null!=r.getAttribute("data-autoplay"))if(r.getAttribute("data-expand")&&!r.autoplay)try{r.play()}catch(e){}else requestAnimationFrame(function(){r.setAttribute("data-expand","-10"),o.aC(r,o.cfg.lazyClass)});(t=r.getAttribute("data-link"))&&s(t,!0),(t=r.getAttribute("data-script"))&&(e.detail.firesLoad=!0,s(t,null,function(){e.detail.firesLoad=!1,o.fire(r,"_lazyloaded",{},!0,!0)})),(t=r.getAttribute("data-require"))&&(o.cfg.requireJs?o.cfg.requireJs([t]):s(t)),(a=r.getAttribute("data-bg"))&&(e.detail.firesLoad=!0,l(a,function(){r.style.backgroundImage="url("+(d.test(a)?JSON.stringify(a):a)+")",e.detail.firesLoad=!1,o.fire(r,"_lazyloaded",{},!0,!0)})),(n=r.getAttribute("data-poster"))&&(e.detail.firesLoad=!0,l(n,function(){r.poster=n,e.detail.firesLoad=!1,o.fire(r,"_lazyloaded",{},!0,!0)}))}},!(d=/\(|\)|\s|'/)))});
Lazyload iframe
defer.js 함수로 iframe을 로드를 지연합니다.
<!--[ Lazysize iframe ]--> <div class="videoYt"> <iframe title="Lazy Iframe" class="lazy" data-src="//www.youtube.com/embed/xxxxxxxxxxx" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
.videoYt{position:relative;padding-bottom:56.25%; overflow:hidden;border-radius:5px}
.videoYt iframe{position:absolute;width:100%;height:100%;left:0;right:0}
- 표시하고 싶은 유튜브 영상 ID로 표시된 부분을 변경하세요.
-
비디오 ID는 Youtube 비디오 URL에서 찾을 수 있습니다(예:
youtube.com/watch?v=97M_mlTCix4).
게시물 참조
게시물 아래에 참조 또는 각주 목록을 작성하려는 데 유용합니다.
Source: :
www.blogger.com
<p class="pRef">Source:<br>www.blogger.com</p>
.pRef{display:block;font-size:14px;line-height:1.5em; opacity:.7;word-break:break-word}
더 깔끔하고 이해하기 쉬운 코드 작성으로 블로그를 더 쉽게 관리할 수 있도록 항상 최선을 다하고 있습니다. 사용하기 쉬운 글 서식 템플릿 및 테마 디자인은 항상 정기적으로 업데이트되므로 HTML을 편집하지 않고 간편하게 색상 및 스타일을 쉽게 변경할 수 있습니다.