땀똔의 프로필 사진

티스토리, 사진에 폴라로이드 효과 만들기~

    Information/For Tistory

 

   

 

 

Demo & Code

 

 

 

[Demo] 폴라로이드 효과 만들기

 

dd-stuff.tistory.com

 

 

<!--
사진 업로드 후, 글쓰기 모드를 HTML 모드로 변경.
업로드 된 사진을 <div id="pola"></div> 태그로 감싸주기.
-->

<div id="pola">
<p>[#_Ima|kage@du/...|alignCenter|data-ke-mobilestyle="widthOrigin"|||_#]</p>
<p>[#_Ima|kage@du/...|alignCenter|data-ke-mobilestyle="widthOrigin"|||_#]</p>
<p>[#_Ima|kage@du/...|alignCenter|data-ke-mobilestyle="widthOrigin"|||_#]</p>
</div>

 

 

/* CSS */

/* :root { ... } 의 값을 조정하여 사용중인 스킨에 맞출 것 */
:root {
    --imageblock-width:860px; /* 이미지블럭 너비 */
    --imageblock-caption-height:70px; /* 캡션 높이 */
    --image-padding:28px; /* 사진이 꽉 차게 하려면 값을 0px로 수정 */
    --imgageblock-backcolor:#2f2f2f; /* 이미지블럭 백그라운드 색상 */
    --imageblock-caption-backcolor:rgba(255,255,255,0.8); /* 캡션 백그라운드 색상 */
    --imageblock-caption-font:24px; /* 캡션 폰트 크기 */
    --imageblock-caption-hash:30px; /* 캡션 해시태그 간격 */

    /* 모바일 */
    --imageblock-width-mobile:370px; /* 모바일 이미지블럭 너비 */
    --imageblock-caption-height-mobile:50px; /* 모바일 캡션 높이 */
    --image-padding-mobile:18px; /* 사진이 꽉 차게 하려면 값을 0px로 수정 */
    --imageblock-caption-font-mobile:18px; /* 캡션 폰트 크기 */
    --imageblock-caption-hash-mobile:20px; /* 캡션 해시태그 간격 */
}
 

#pola .imageblock { width:var(--imageblock-width); height:calc(var(--imageblock-width) / 4 * 3); border:1px solid rgba(0,0,0,.1); background-color:var(--imgageblock-backcolor); display:flex !important; flex-direction:column; align-items:center; justify-content:space-between; margin-left:0px; }
#pola .imageblock img.square { width:auto; height:calc(var(--imageblock-width) / 4 * 3 - var(--imageblock-caption-height) - var(--image-padding)); margin-top:calc(var(--image-padding) / 2) }
#pola .imageblock img.land { width:auto; height:calc(var(--imageblock-width) / 4 * 3 - var(--imageblock-caption-height) - var(--image-padding)); margin-top:calc(var(--image-padding) / 2) }
#pola .imageblock img.pano { width:var(--imageblock-width); height:auto }
#pola .imageblock img.port { width:auto; height:calc(var(--imageblock-width) / 4 * 3 - var(--imageblock-caption-height) - var(--image-padding)); margin-top:calc(var(--image-padding) / 2) }
#pola .imageblock figcaption { width:100%; height:var(--imageblock-caption-height); padding:0px; overflow-y:auto; display:flex; align-items:center; justify-content:center; background-color:var(--imageblock-caption-backcolor) !important; color:rgba(0,0,0,.6); font-family: 'Nanum Pen Script', cursive; font-size:var(--imageblock-caption-font) }
#pola .imageblock figcaption itv:not(:first-child) { margin-left:var(--imageblock-caption-hash) } /* 해시태그 간격 */

@media screen and (max-width: 480px) {
    #pola .imageblock { width:var(--imageblock-width-mobile); height:calc(var(--imageblock-width-mobile) / 4 * 3); }
    #pola .imageblock img.square { width:auto; height:calc(var(--imageblock-width-mobile) / 4 * 3 - var(--imageblock-caption-height-mobile) - (var(--image-padding-mobile) * 2)); margin-top:calc(var(--image-padding-mobile) * 1) }
    #pola .imageblock img.land.r32 { width:calc(var(--imageblock-width-mobile) - (var(--image-padding-mobile) * 6)) !important; height:auto; margin-top:calc(var(--image-padding-mobile) * 1.5) }
    #pola .imageblock img.land.r43 { width:calc(var(--imageblock-width-mobile) - (var(--image-padding-mobile) * 6) - 48px) !important; height:auto; margin-top:calc(var(--image-padding-mobile) * 3 - 24px) }
    #pola .imageblock img.pano { width:var(--imageblock-width-mobile); height:auto;  }
    #pola .imageblock img.port { width:auto; height:calc(var(--imageblock-width-mobile) / 4 * 3 - var(--imageblock-caption-height-mobile) - var(--image-padding-mobile)); margin-top:calc(var(--image-padding-mobile) / 2) }
    #pola .imageblock figcaption { height:var(--imageblock-caption-height-mobile); font-size:var(--imageblock-caption-font-mobile) }
    #pola .imageblock figcaption itv:not(:first-child) { margin-left:var(--imageblock-caption-hash-mobile) }
}

 

 

/* Javascript */

function _0x5c07(){const _0x5c4bcd=['110249LgLvYw','data-origin-height','pano','forEach','port\x20r32','addEventListener','4102344CROVkx','4pqpHvk','marginTop','land\x20r43','2:3','data-origin-width','144111AMIgbf','16MLKygx','3:4','4:3','replaceAll','innerHeight','10:16','port','16:10','#pola\x20.imageblock\x20img','33pCIHbw','16:9','port\x20r43','1242490KTMFua','348765ppgSgw','clientHeight','1503482FJvhMZ','3:2','lastChild','\x20small','getAttribute','land','setAttribute','6KwmtKw','9:16','class','land\x20r32','innerHTML','load','style','parentNode','port\x20r_pano','1904861roHUDT','innerText'];_0x5c07=function(){return _0x5c4bcd;};return _0x5c07();}function _0x8769(_0x2f179d,_0x49c7a2){const _0x5c074d=_0x5c07();return _0x8769=function(_0x87699b,_0x443a24){_0x87699b=_0x87699b-0x18a;let _0x13d7be=_0x5c074d[_0x87699b];return _0x13d7be;},_0x8769(_0x2f179d,_0x49c7a2);}const _0x3c2cbd=_0x8769;(function(_0x134cc0,_0x34fcf8){const _0x2a28a4=_0x8769,_0x52a06f=_0x134cc0();while(!![]){try{const _0x4a5ceb=parseInt(_0x2a28a4(0x1b0))/0x1+parseInt(_0x2a28a4(0x19e))/0x2+-parseInt(_0x2a28a4(0x18e))/0x3+parseInt(_0x2a28a4(0x1b7))/0x4*(-parseInt(_0x2a28a4(0x19c))/0x5)+-parseInt(_0x2a28a4(0x1a5))/0x6*(-parseInt(_0x2a28a4(0x1ae))/0x7)+parseInt(_0x2a28a4(0x18f))/0x8*(-parseInt(_0x2a28a4(0x1b6))/0x9)+-parseInt(_0x2a28a4(0x19b))/0xa*(-parseInt(_0x2a28a4(0x198))/0xb);if(_0x4a5ceb===_0x34fcf8)break;else _0x52a06f['push'](_0x52a06f['shift']());}catch(_0x4e2911){_0x52a06f['push'](_0x52a06f['shift']());}}}(_0x5c07,0x748fe),window[_0x3c2cbd(0x1b5)](_0x3c2cbd(0x1aa),function(){const _0x4a957e=_0x3c2cbd;let _0x47b694,_0x1d2013,_0x270c23,_0x43e059,_0x34cce3;document['querySelectorAll'](_0x4a957e(0x197))[_0x4a957e(0x1b3)](function(_0x5c4e68){const _0x2a4c5a=_0x4a957e;_0x270c23=_0x5c4e68[_0x2a4c5a(0x1ac)][_0x2a4c5a(0x1ac)][_0x2a4c5a(0x1a2)](_0x2a4c5a(0x18d)),_0x43e059=_0x5c4e68[_0x2a4c5a(0x1ac)]['parentNode'][_0x2a4c5a(0x1a2)](_0x2a4c5a(0x1b1));let _0x491fbe=_0x52ecf9(_0x270c23,_0x43e059),_0x57318b=_0x270c23/_0x491fbe,_0x46115a=_0x43e059/_0x491fbe,_0x555608=_0x57318b+':'+_0x46115a,_0x487134,_0x3cbb1c;if(Number(_0x270c23)>Number(_0x43e059)){if(_0x555608==_0x2a4c5a(0x191))_0x487134=_0x2a4c5a(0x18b);else{if(_0x555608==_0x2a4c5a(0x19f))_0x487134=_0x2a4c5a(0x1a8);else{if(_0x555608=='16:9'||_0x555608==_0x2a4c5a(0x196)||_0x491fbe>=0x3&&_0x491fbe<=0x2d)_0x487134=_0x2a4c5a(0x1b2),_0x3cbb1c=(_0x5c4e68[_0x2a4c5a(0x1ac)][_0x2a4c5a(0x1ac)][_0x2a4c5a(0x19d)]-_0x5c4e68['parentNode'][_0x2a4c5a(0x1ac)][_0x2a4c5a(0x1a0)][_0x2a4c5a(0x19d)]-_0x5c4e68[_0x2a4c5a(0x19d)])/0x2+'px',_0x5c4e68[_0x2a4c5a(0x1ab)][_0x2a4c5a(0x18a)]=_0x3cbb1c;else(_0x555608!=_0x2a4c5a(0x191)||_0x555608!=_0x2a4c5a(0x19f)||_0x555608!=_0x2a4c5a(0x199)||_0x555608!=_0x2a4c5a(0x196))&&(_0x487134=_0x2a4c5a(0x1a3));}}}else{if(Number(_0x270c23)<Number(_0x43e059)){if(_0x555608==_0x2a4c5a(0x190))_0x487134=_0x2a4c5a(0x19a);else{if(_0x555608==_0x2a4c5a(0x18c))_0x487134=_0x2a4c5a(0x1b4);else{if(_0x555608==_0x2a4c5a(0x1a6)||_0x555608==_0x2a4c5a(0x194)||_0x491fbe>=0x3&&_0x491fbe<=0x2d)_0x487134=_0x2a4c5a(0x1ad);else(_0x555608!='3:4'||_0x555608!=_0x2a4c5a(0x18c)||_0x555608!=_0x2a4c5a(0x1a6)||_0x555608!=_0x2a4c5a(0x194))&&(_0x487134=_0x2a4c5a(0x195));}}}else Number(_0x270c23)==Number(_0x43e059)&&(_0x487134='square');}_0x43e059<=window[_0x2a4c5a(0x193)]&&(_0x487134=_0x487134+_0x2a4c5a(0x1a1)),_0x5c4e68[_0x2a4c5a(0x1a4)](_0x2a4c5a(0x1a7),_0x487134),_0x34cce3=_0x5c4e68['parentNode'][_0x2a4c5a(0x1ac)][_0x2a4c5a(0x1a0)][_0x2a4c5a(0x1af)],_0x34cce3=_0x34cce3[_0x2a4c5a(0x192)]('#','<itv>#</itv>'),_0x5c4e68[_0x2a4c5a(0x1ac)][_0x2a4c5a(0x1ac)][_0x2a4c5a(0x1a0)][_0x2a4c5a(0x1a9)]=_0x34cce3;});function _0x52ecf9(_0x540bc5,_0x17f929){return _0x17f929==0x0?_0x540bc5:_0x52ecf9(_0x17f929,_0x540bc5%_0x17f929);}}));

 

 

 



 

티스토리툴바