Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
Tags
- 보정
- Blending Option
- Photoshop
- 베타
- 포토샵효과
- high pass
- 포토샵
- 무료폰트
- 채도
- 포토샵강좌
- 사진보정
- 웹폰트
- 구글폰트
- 레이어
- WebFont
- 포토샵 강좌
- 아이콘
- 한성
- Icon
- 티스토리
- 무료 ai
- 합성
- font
- 인물보정
- Layer
- 블로그
- 물생활
- 폰트
- Layer mask
- google font
Archives
- Today
- Total
JKtuts
블로그 운영에 좋은 비포 애프터 쇼케이스 (Before/After Showcase) 본문
블로그에 Before After 가 필요할 때가 많은데요 특히 사진 보정 같은 전후 비교가 필요할 경우에 그렇죠 해당 포스트는 JQuery를 이용한 전후 이미지를 비교하기 편리하게 보여주는 쇼케이스입니다.
구동은 아래와 같습니다.
마우스 혹은 클릭으로 좌우로 움직여 보세요
bas.js, basjs.js, basm.js 파일을 먼저 다운받으세요
STEP.1
아래처럼 해당 파일의 주소를 </head>위에 넣어주세요
<script src="자신이 올린 *.js 파일의 주소를 넣어주세요"></script>
1 2 3 4 5 6 7 | <script src="http://jktuts.com/attachment/cfile9.uf@2647584856DC1FDA2646CD.js"></script> <script src="http://jktuts.com/attachment/cfile6.uf@245AAD4856DC1FD810EDB8.js"></script> <script src="http://jktuts.com/attachment/cfile25.uf@275B5C4856DC1FD712130A.js"></script> <!--Before After Script END--> </head> <body id="tt-body-page"> | cs |
STEP.2
이제 CSS 스타일을 적용하세요 자신의 CSS에 아래 항목을 추가하세요
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 | *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { font-size: 100%; } body { background: white; color: #222222; padding: 0; margin: 0; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1; position: relative; cursor: default; } a:hover { cursor: pointer; } a:focus { outline: none; } img, object, embed { max-width: 100%; height: auto; } object, embed { height: 100%; } img { -ms-interpolation-mode: bicubic; } #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object { max-width: none !important; } .left { float: left !important; } .right { float: right !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } .hide { display: none; } .antialiased { -webkit-font-smoothing: antialiased; } img { display: inline-block; vertical-align: middle; } textarea { height: auto; min-height: 50px; } select { width: 100%; } /* Grid HTML Classes */ .row { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; *zoom: 1; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .row.collapse .column, .row.collapse .columns { position: relative; padding-left: 0; padding-right: 0; float: left; } .row .row { width: auto; margin-left: -0.9375em; margin-right: -0.9375em; margin-top: 0; margin-bottom: 0; max-width: none; *zoom: 1; } .row .row:before, .row .row:after { content: " "; display: table; } .row .row:after { clear: both; } .row .row.collapse { width: auto; margin: 0; max-width: none; *zoom: 1; } .row .row.collapse:before, .row .row.collapse:after { content: " "; display: table; } .row .row.collapse:after { clear: both; } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after { width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; } .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { position: absolute; top: 0; width: 100%; height: 100%; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .twentytwenty-before-label, .twentytwenty-after-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; } .twentytwenty-before-label:before, .twentytwenty-after-label:before { color: white; font-size: 13px; letter-spacing: 0.1em; } .twentytwenty-before-label:before, .twentytwenty-after-label:before { position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before { top: 50%; margin-top: -19px; } .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before { left: 50%; margin-left: -45px; text-align: center; width: 90px; } .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; } .twentytwenty-left-arrow, .twentytwenty-right-arrow { top: 50%; margin-top: -6px; } .twentytwenty-up-arrow, .twentytwenty-down-arrow { left: 50%; margin-left: -6px; } .twentytwenty-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; } .twentytwenty-container img { position: absolute; top: 0; display: block; } .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0); } .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0; } .twentytwenty-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .twentytwenty-before-label { opacity: 0; } .twentytwenty-before-label:before { content: "Before"; } .twentytwenty-after-label { opacity: 0; } .twentytwenty-after-label:before { content: "After"; } .twentytwenty-horizontal .twentytwenty-before-label:before { left: 10px; } .twentytwenty-horizontal .twentytwenty-after-label:before { right: 10px; } .twentytwenty-vertical .twentytwenty-before-label:before { top: 10px; } .twentytwenty-vertical .twentytwenty-after-label:before { bottom: 10px; } .twentytwenty-overlay { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; } .twentytwenty-before { z-index: 20; } .twentytwenty-after { z-index: 10; } .twentytwenty-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border: 3px solid white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer; } .twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-vertical .twentytwenty-handle:before { left: 50%; margin-left: 22px; -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-vertical .twentytwenty-handle:after { right: 50%; margin-right: 22px; -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-left-arrow { border-right: 6px solid white; left: 50%; margin-left: -17px; } .twentytwenty-right-arrow { border-left: 6px solid white; right: 50%; margin-right: -17px; } .twentytwenty-up-arrow { border-bottom: 6px solid white; top: 50%; margin-top: -17px; } .twentytwenty-down-arrow { border-top: 6px solid white; bottom: 50%; margin-bottom: -17px; } | cs |
STEP.3
마지막으로 포스팅시에 아래와 같이 사용 하시면 됩니다.
1 2 3 4 5 6 | <div class="row"> <div id="container1"> <img src="첫번째 이미지 주소.*"> <img src="드반쩨 이미지 주소.*"> </div> </div> | cs |
저는 티스토리로 서식파일을 만들어 사용하고 있습니다 서식파일을 만들어 놓으면 포스팅 때마다 코드를 볼 필요가 없으니까요
Other
혹시 *.js파일을 다운받지 않고 적용 하실 분들은 아래 소스 코드를 복사하세요
bas.js
1 2 3 | $(window).load(function() { $("#container1").twentytwenty(); }); | cs |
basjs.js
1 2 3 4 5 | (function($){$.fn.twentytwenty=function(options){var options=$.extend({default_offset_pct:0.5},options);return this.each(function(){var sliderPct=options.default_offset_pct;var container=$(this);container.wrap("<div class='twentytwenty-wrapper'></div>");container.append("<div class='twentytwenty-overlay'></div>");var beforeImg=container.find("img:first");var afterImg=container.find("img:last");container.append("<div class='twentytwenty-handle'></div>");var slider=container.find(".twentytwenty-handle");slider.append("<span class='twentytwenty-left-arrow'></span>");slider.append("<span class='twentytwenty-right-arrow'></span>");container.addClass("twentytwenty-container");beforeImg.addClass("twentytwenty-before");afterImg.addClass("twentytwenty-after");var overlay=container.find(".twentytwenty-overlay");overlay.append("<div class='twentytwenty-before-label'></div>");overlay.append("<div class='twentytwenty-after-label'></div>");var calcOffset=function(widthPct){var w=beforeImg.width();var h=beforeImg.height();return{w:w+"px",h:h+"px",cw:(widthPct*w)+"px"};};var adjustContainer=function(offset){beforeImg.css("clip","rect(0,"+offset.cw+","+offset.h+",0)");container.css("height",offset.h);};var adjustSlider=function(pct){var offset=calcOffset(pct);slider.css("left",offset.cw);adjustContainer(offset);} $(window).on("resize.twentytwenty",function(e){adjustSlider(sliderPct);});var offsetX=0;var imgWidth=0;container.on("movestart",function(e){if((e.distX>e.distY&&e.distX<-e.distY)||(e.distX<e.distY&&e.distX>-e.distY)){e.preventDefault();} container.addClass("active");offsetX=container.offset().left;imgWidth=beforeImg.width();});container.on("moveend",function(e){container.removeClass("active");});container.on("move",function(e){if(container.hasClass("active")){sliderPct=(e.pageX-offsetX)/imgWidth; if(sliderPct<0||sliderPct>1){e.preventDefault();return false;} adjustSlider(sliderPct);}});container.find("img").on("mousedown",function(e){event.preventDefault();});$(window).trigger("resize.twentytwenty");});};})(jQuery); | cs |
basjm.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | (function(module){if(typeof define==='function'&&define.amd){define(['jquery'],module);}else{module(jQuery);}})(function(jQuery,undefined){var threshold=6,add=jQuery.event.add,remove=jQuery.event.remove,trigger=function(node,type,data){jQuery.event.trigger(type,data,node);},requestFrame=(function(){return(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(fn,element){return window.setTimeout(function(){fn();},25);});})(),ignoreTags={textarea:true,input:true,select:true,button:true},mouseevents={move:'mousemove',cancel:'mouseup dragstart',end:'mouseup'},touchevents={move:'touchmove',cancel:'touchend',end:'touchend'};function Timer(fn){var callback=fn,active=false,running=false;function trigger(time){if(active){callback();requestFrame(trigger);running=true;active=false;} else{running=false;}} this.kick=function(fn){active=true;if(!running){trigger();}};this.end=function(fn){var cb=callback;if(!fn){return;} if(!running){fn();} else{callback=active?function(){cb();fn();}:fn;active=true;}};} function returnTrue(){return true;} function returnFalse(){return false;} function preventDefault(e){e.preventDefault();} function preventIgnoreTags(e){if(ignoreTags[e.target.tagName.toLowerCase()]){return;} e.preventDefault();} function isLeftButton(e){return(e.which===1&&!e.ctrlKey&&!e.altKey);} function identifiedTouch(touchList,id){var i,l;if(touchList.identifiedTouch){return touchList.identifiedTouch(id);} i=-1;l=touchList.length;while(++i<l){if(touchList[i].identifier===id){return touchList[i];}}} function changedTouch(e,event){var touch=identifiedTouch(e.changedTouches,event.identifier);if(!touch){return;} if(touch.pageX===event.pageX&&touch.pageY===event.pageY){return;} return touch;} function mousedown(e){var data;if(!isLeftButton(e)){return;} data={target:e.target,startX:e.pageX,startY:e.pageY,timeStamp:e.timeStamp};add(document,mouseevents.move,mousemove,data);add(document,mouseevents.cancel,mouseend,data);} function mousemove(e){var data=e.data;checkThreshold(e,data,e,removeMouse);} function mouseend(e){removeMouse();} function removeMouse(){remove(document,mouseevents.move,mousemove);remove(document,mouseevents.cancel,mouseend);} function touchstart(e){var touch,template;if(ignoreTags[e.target.tagName.toLowerCase()]){return;} touch=e.changedTouches[0];template={target:touch.target,startX:touch.pageX,startY:touch.pageY,timeStamp:e.timeStamp,identifier:touch.identifier};add(document,touchevents.move+'.'+ touch.identifier,touchmove,template);add(document,touchevents.cancel+'.'+ touch.identifier,touchend,template);} function touchmove(e){var data=e.data,touch=changedTouch(e,data);if(!touch){return;} checkThreshold(e,data,touch,removeTouch);} function touchend(e){var template=e.data,touch=identifiedTouch(e.changedTouches,template.identifier);if(!touch){return;} removeTouch(template.identifier);} function removeTouch(identifier){remove(document,'.'+ identifier,touchmove);remove(document,'.'+ identifier,touchend);} function checkThreshold(e,template,touch,fn){var distX=touch.pageX- template.startX,distY=touch.pageY- template.startY;if((distX*distX)+(distY*distY)<(threshold*threshold)){return;} triggerStart(e,template,touch,distX,distY,fn);} function handled(){this._handled=returnTrue;return false;} function flagAsHandled(e){e._handled();} function triggerStart(e,template,touch,distX,distY,fn){var node=template.target,touches,time;touches=e.targetTouches;time=e.timeStamp- template.timeStamp;template.type='movestart';template.distX=distX;template.distY=distY;template.deltaX=distX;template.deltaY=distY;template.pageX=touch.pageX;template.pageY=touch.pageY;template.velocityX=distX/time;template.velocityY=distY/time;template.targetTouches=touches;template.finger=touches?touches.length:1;template._handled=handled;template._preventTouchmoveDefault=function(){e.preventDefault();};trigger(template.target,template);fn(template.identifier);} function activeMousemove(e){var event=e.data.event,timer=e.data.timer;updateEvent(event,e,e.timeStamp,timer);} function activeMouseend(e){var event=e.data.event,timer=e.data.timer;removeActiveMouse();endEvent(event,timer,function(){setTimeout(function(){remove(event.target,'click',returnFalse);},0);});} function removeActiveMouse(event){remove(document,mouseevents.move,activeMousemove);remove(document,mouseevents.end,activeMouseend);} function activeTouchmove(e){var event=e.data.event,timer=e.data.timer,touch=changedTouch(e,event);if(!touch){return;} e.preventDefault();event.targetTouches=e.targetTouches;updateEvent(event,touch,e.timeStamp,timer);} function activeTouchend(e){var event=e.data.event,timer=e.data.timer,touch=identifiedTouch(e.changedTouches,event.identifier);if(!touch){return;} removeActiveTouch(event);endEvent(event,timer);} function removeActiveTouch(event){remove(document,'.'+ event.identifier,activeTouchmove);remove(document,'.'+ event.identifier,activeTouchend);} function updateEvent(event,touch,timeStamp,timer){var time=timeStamp- event.timeStamp;event.type='move';event.distX=touch.pageX- event.startX;event.distY=touch.pageY- event.startY;event.deltaX=touch.pageX- event.pageX;event.deltaY=touch.pageY- event.pageY;event.velocityX=0.3*event.velocityX+ 0.7*event.deltaX/time;event.velocityY=0.3*event.velocityY+ 0.7*event.deltaY/time;event.pageX=touch.pageX;event.pageY=touch.pageY;timer.kick();} function endEvent(event,timer,fn){timer.end(function(){event.type='moveend';trigger(event.target,event);return fn&&fn();});} function setup(data,namespaces,eventHandle){add(this,'movestart.move',flagAsHandled);return true;} function teardown(namespaces){remove(this,'dragstart drag',preventDefault);remove(this,'mousedown touchstart',preventIgnoreTags);remove(this,'movestart',flagAsHandled);return true;} function addMethod(handleObj){if(handleObj.namespace==="move"||handleObj.namespace==="moveend"){return;} add(this,'dragstart.'+ handleObj.guid+' drag.'+ handleObj.guid,preventDefault,undefined,handleObj.selector);add(this,'mousedown.'+ handleObj.guid,preventIgnoreTags,undefined,handleObj.selector);} function removeMethod(handleObj){if(handleObj.namespace==="move"||handleObj.namespace==="moveend"){return;} remove(this,'dragstart.'+ handleObj.guid+' drag.'+ handleObj.guid);remove(this,'mousedown.'+ handleObj.guid);} jQuery.event.special.movestart={setup:setup,teardown:teardown,add:addMethod,remove:removeMethod,_default:function(e){var template,data;if(!e._handled()){return;} template={target:e.target,startX:e.startX,startY:e.startY,pageX:e.pageX,pageY:e.pageY,distX:e.distX,distY:e.distY,deltaX:e.deltaX,deltaY:e.deltaY,velocityX:e.velocityX,velocityY:e.velocityY,timeStamp:e.timeStamp,identifier:e.identifier,targetTouches:e.targetTouches,finger:e.finger};data={event:template,timer:new Timer(function(time){trigger(e.target,template);})};if(e.identifier===undefined){add(e.target,'click',returnFalse);add(document,mouseevents.move,activeMousemove,data);add(document,mouseevents.end,activeMouseend,data);} else{e._preventTouchmoveDefault();add(document,touchevents.move+'.'+ e.identifier,activeTouchmove,data);add(document,touchevents.end+'.'+ e.identifier,activeTouchend,data);}}};jQuery.event.special.move={setup:function(){add(this,'movestart.move',jQuery.noop);},teardown:function(){remove(this,'movestart.move',jQuery.noop);}};jQuery.event.special.moveend={setup:function(){add(this,'movestart.moveend',jQuery.noop);},teardown:function(){remove(this,'movestart.moveend',jQuery.noop);}};add(document,'mousedown.move',mousedown);add(document,'touchstart.move',touchstart);if(typeof Array.prototype.indexOf==='function'){(function(jQuery,undefined){var props=["changedTouches","targetTouches"],l=props.length;while(l--){if(jQuery.event.props.indexOf(props[l])===-1){jQuery.event.props.push(props[l]);}}})(jQuery);};});n(e){event.preventDefault();});$(window).trigger("resize.twentytwenty");});};})(jQuery); | cs |
해당 포스팅은 "http://codepen.io/massiebn/pen/EvcpF"의 소스를 이용하여 포스팅됐습니다.
'IT&컴퓨팅 > 블로그' 카테고리의 다른 글
구글 웹폰트 적용 방법 (3) | 2016.03.18 |
---|---|
블로그에 유용한 코드 하이라이트 사이트 (0) | 2016.03.09 |
블로그에 "구글토크"를 달아보자!! (4) | 2010.08.03 |
블로그 RSS버튼 만들기 - tistory (0) | 2010.07.19 |
무료 아이콘 RSS, Twitter Design Reviver (0) | 2010.01.19 |
Tistory Comments