Web Development

Inline Image

data:의 단점을 정리해 보자면 먼저 바로 인터넷 익스플로러(IE7과 그 이하 포함)에서는 지원되지 않는다는 것이다 그리고 다른 단점은 크기의 제한이 있다는 것이다. 파이어폭스 1.5 버전에서는 100K 이미지까지 받을 수 있다. 그리고 base64로 인코딩을 하게 되면 이미지의 크기가 증가하기 때문에 최종 다운로드 크기가 늘어난다.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..." />

위와 같이 사용한다.

다음에서 그림을 업로드하여 코드로 변환할 수 있다. http://webcodertools.com/imagetobase64converter/Create

.home { background-image: url(data:image/gif;base64,<?php echo base64_encode(file_get_contents("home.gif")) ?>);}

PHP 안에서 file_get_contents 함수를 사용하여 코드를 제작할 수도 있다. 이미지가 변형될 때에 즉각적으로 반영될 수 있다는 장점이 있다.

Cool Websites

• Design Trends in 2010
• Cross-Browser CSS Gradient
• Best of CSS Design 2009
• 12 Common CSS Mistakes Web Developers Make
• Search Analysis with Google Analytics
• Saving Bandwidth and Improving Site Speed Using CSS Sprites
• Beautiful Footers in Modern Web Design for Inspiration
• Web Design Trends in 2011
• 35 Beautiful iPhone App Website Designs
• http://www.squarespace.com/ : 블로그
• http://www.blueprintcss.org/
• http://www.corporateriskwatch.com/
• http://www.theleagueofmoveabletype.com/
• http://sixrevisions.com/design-showcase-inspiration/35-beautiful-iphone-app-website-designs/
• http://www.alistapart.com/articles/boom
• http://retrospectiva.org/tickets?milestone=3&state=1
• http://blueprintsites.com/
• http://www.ixda.org/node/15655
• http://www.designbyfire.com/liquid_blueprint/tests/liquid.html
• http://www.freelancereview.net/100-magnificent-macro-photos/
• http://www.smashingmagazine.com/2008/07/02/55-free-high-quality-icon-sets/ : 아이콘

Javascript Plugin

• http://vis.stanford.edu/protovis/ 2010년
• http://www.simile-widgets.org/timeline/
• http://www.graphdracula.net/
• http://prefuse.org/ 2007년
• http://www.jsviz.org/blog/ 2007년
• http://dhotson.tumblr.com/post/520720950/force-directed-graph-layout-in-javascript 버그 Win7