01. Vertical Bar Graph with CSS and PHP
URL : www.terrill.ca/design/vertical_bar_graphs/

02. Pure CSS Data Chart
URL : cssglobe.com/post/1272/pure-css-data-chart

03. Percentage bar (Progress bar)
URL#1 : my-javascript-non-ajax-progress-percentage-bar-jsprogressbarhandler-02
URL#2 : livepipe.net/projects/control_progress_bar/
URL#3 : cssglobe.com/post/1468/pure-css-animated-progress-bar
URL#4 : Create Web 2.0 Progress Bars: jQuery, DHTML, JS, CSS, Photoshop

04. CSS For Bar Graphs
URL : applestooranges.com/blog/post/css-for-bar-graphs/?id=55

05. A Definition list bar chart
URL : www.cssplay.co.uk/menu/barchart.html

06. An Accessible bar chart
URL : www.standards-schmandards.com/exhibits/barchart/

07. Flot (Attractive JavaScript Plotting for jQuery)
URL : code.google.com/p/flot/

08. Emprise JavaScript Charts
URL : www.ejschart.com

- elycharts.com

* jQuery Plugin Charts
- Highcharts: www.highcharts.com

- jqPlot (jQuery)
- jGCharts (jQuery + Google Charts)
- jQuery Sparklines
- jQuery Visualize
- flot
- jqbargraph
- jQuery Plugin for FusionCharts Free
- Peity
- TufteGraph
- jQuery Gantt Chart
- Create An Animated Bar Graph With HTML, CSS And jQuery

* FlashCharts
- 10 Useful Flash Components for Graphing Data
- FusionChart : www.fusioncharts.com/Free/
- Learn to Create Interactive Drill-Down Dashboards with PHP and FusionCharts
- Open Flash Chart : teethgrinder.co.uk/open-flash-chart/
- PHP/XML/SWF Chart : www.maani.us/charts/  www.maani.us/xml_charts/
- amCharts : www.amcharts.com
- Date Slider : www.measuremap.com/developer/slider/
- Astra Flash Components (chart)
- Siliverlight Charts
- ZingChart

FusionChart

* Java Chart
- JFree Chart  www.jfree.org/jfreechart/
- Open Flash Chart GWT Widget Library (ofcgwt)

- pChart - a PHP class to build charts
- JSchart - javascript framework
- CanvasGraph : Graphing in JavaScript (ie제외)
- ProtoChart : Prototype + Canvas
- PlotKit : JavaScript Chart Plotting
- gRaphael
- dygraphs JavaScript Visualization Library
- Protovis
- [for Excel, PPT] Excel and PowerPoint Charts
- [HTML5] RGraph: HTML5 canvas graph library based on the HTML5 canvas tag
- HTML5 Canvas Graphing Solutions Every Web Developers Must Know
- [HTML5] AwesomeChartJS

01. Blueprint  code.google.com/p/blueprintcss/
- Blueprint CSS Cheat Sheet
- The Blueprint CSS Framework Tutorials How-to Guides and Tools

02. LogicCSS  code.google.com/p/logicss/ 

03. Elements  elements.projectdesigns.org

04. YAML (Yet Another Multicolumn Layout)  www.yaml.de/en/ 

05. ESWAT  eswat.ca

06. YUI Grids CSS  developer.yahoo.com/yui/grids/

07. 960 Grid System  960.gs
- 960 CSS Framework - Learn the Basics
- Design A Fresh Blog Theme On The 960 Grid
- The 960 Grid System Toolbox & Resources
- A Detailed Look at the 960 CSS Framework
- Mastering th e960 Grid System

08. SenCSS 
URL: kilianvalkhof.com/2008/css-xhtml/introducing-sencss/

09. Formy CSS
URL: http://code.google.com/p/formy-css-framework/

10. xCSS : Object-Oriented CSS Framework
URL: http://code.google.com/p/xcssframework/

11. 기타
01) WYMstyle  www.wymstyle.org/en/
02) Content With Style's CSS Framework  www.contentwithstyle.co.uk/Articles/17/a-css-framework/
03) Tripoli  http://devkick.com/lab/tripoli/
04) Emastic (grid framework)
05) MALO
06) Better Web Readability Project - CSS Library
07) Blue Trip CSS Framework
08) Content with Style
09) Elastic CSS Framework
10) Baseline
11) MarkerCSS: for web layout code
12) 52Framework: first ever html5 and CSS3 framework
13) Less Framework: An HTML5-powered CSS framework
- Using the LESS CSS Preprocessor for Smarter Style Sheets
14) The Square Grid
15) FEM CSS Framework
16) 978 Grid System
17) columnal
18) 1140 CSS Grid
19) negative grid

01. Digg-Like
URL#1 :  digg-like-navigation-bar-using-css 
URL#2 : Simple CSS vertical menu Digg-like

02. Circular Menu  [자료]

03. Attention Menu
[자료] Advanced CSS Menu Trick

04. Traditional Menu
HTB (horizonal, top to bottom), HBT, VLR (vertical, left to right), VRL 4종류
[자료] aplus.co.yu/adxmenu/
[자료] Free CSS Drop-Down Menu Framework

05. Animated Tab Menu
URL : www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/

06. Drop-Down Menu
URL : www.stunicholls.com/menu/pro_dropdown_2.html

07. Treeview Menu
URL : bassistance.de/jquery-plugins/jquery-plugin-treeview/
URL#2: Best JavaScript Tree Widgets

08. Menu - Sprite
URL : www.mattvarone.com.ar/2008/06/css-text-based-navigation-bar-with-images/

09. Sliding Menu
URL : www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

10. Glass Button Navigation
URL : www.13styles.com/css-menus/gloss/

11. Sprite + jQuery
URL: www.alistapart.com/articles/sprites2
URL: snook.ca/archives/javascript/jquery-bg-image-animations/
URL: Animated Navigation Bar Using jQuery  
URL: Sliding single-level menu  
 

01. CSS 초기화 방법
브라우저별로 정의된 Default CSS가 조금씩 다를 수 있어 동일한 CSS 코드지만 달리 보여질 수 있다.
그래서 CSS 초기화를 통해 모든 브라우저의 Default Setting 을 맞춰주는 것이 좋다.
01) Eric Meyer's Reset.css
02) YUI Reset CSS
03) Ed Eliot's Reset
[참고] Reseting Browser Defaults (reset.css)

02. 브라우저 특성
브라우저에 따라 제공하는 Selectors 사용방법이 다를 수 있다.

03. Link에서 클릭시 점선으로된 아웃라인(dotted outline) 없애기  [참고]
Firefox 만 적용. a { outline:none } , a:active, a:focus { outline:none }

03-01. Prevent line breaks in links
a { white-space:nowrap }

04. display속성을 이용해서 Inline 요소와 Block 요소 특성을 바꿀 수 있다.
- display: inline-block

05. 고정폭 Block Element의 가운데 정렬(centering) 하기  [자료] [자료2] [자료3]
#wrapper {
    margin:auto;
    position:relative;
}

05-01. line-height를 이용한 Vertical centering  [참고] [참고]
HTML :
     <div><p>vertically Centered content</p></div>
CSS :
      div { height:100px }
      div * { margin:0 }
      div p { line-height:100px }

- 6 Methods For Vertical Centering With CSS

06. 이미지 교체(replacement) 기술
Header를 이미지로 만들 때 텍스트와 함께 사용하는 방법으로 SEO에 도움이 된다. [자료]

HTML:
    <h1><span>Main heading one</span></h1>
CSS:
    h1 { background:url(heading-image.gif) no-repeat }  
    h1 span { position:absolute;text-indent:-5000px }

07. min-width로 최소 너비값 설정
IE에서 지원않음.  %(percentage)를 설정된 flexible template에서 유용
* Hacks in IE [자료]
div { width:expression(333 + "px"); }
div { width:333px }

div { /* max-width 설정시 */
    width:expression( document.body.clientWidth > 776 ? "777px" : "auto" );
    max-width:777px;
}
div { /* min-height 설정시 */
    height: expression( this.scrollHeight < 334 ? "333px" : "auto" );
    min-height:333px;
}

08. 수평 스크롤바 없애기
body { overflow-x:hidden }

08-01. Firefox 스크롤바 보이기
html { overflow:-moz-scrollbars-vertical }

08-02. IE에서 textarea 스크롤바 없애기
textarea { overflow:auto }

09. 투명처리하기 (Opacity)
#transdiv {
    filter: alpha(opacity=75);
    -moz-opacity: .75;
    opacity: .75;
}
* IE의 경우 영역을 나타내는 요소와 함께 사용(width, height 등)하거나 display 요소 사용
- [참고] Manipulating Opacity
- CSS Transparency Issue
- CSS Opacity: A Comprehensive Reference

10. Block 요소 내부에서 Floating 될 경우 영역이 벗어나는 문제  [참고] [참고]
<div style="clear:both;"></div>를 대체할 수 있는 방법
#floatElement { float:left }
#containerDiv { overflow:auto } /* 해결 */

11. Sprites
하나의 이미지로 두개 이상의 변화된 모습을 나타낼 수 있는 방법으로 Image Preloading 효과도 함께 가질 수 있다. 
- CSS Sprites: Image Slicing's Kiss of Death 
- 6 Keys To Understanding Modern CSS-Based Layouts (sprites)
- Animated GIF For CSS Sprites
- How to Preload Images When You Can't Use CSS Sprites

Google.com

12. Transparent PNG's
IE에서 PNG 타입을 사용할 수 있는 방법  [참고]

13. Printing할 때 페이지를 강제로 나누는 방법
h2 { page-break-before:always }

14. IE Doubled Float-Margin Bug
float요소에 display:inline 추가  [참고] [참고]

15. Fixing the IE6 White-Space Bug
List와 anchor를 함께 사용할 경우  [참고]
- 모든 공백을 삭제한다.
- Anchor Tags(<a>)를 Floating 한다.
     ul a {
         display: block;
         float: left;
        clear: left; }
- Bottom Border를 추가한다.
     ul li { border-bottom: 1px solid #666; }
- Display: inline; 으로 바꿔준다.
    ul li { display: inline; }

16. clear float
- A new micro clearfix hack
- Force Element To Self-Clear its Children
- Clearing floats
- How To Clear Floats Without Structural Markup

• Buttons (Button elements)
• Checkboxes
• Disabled form controls
• Fieldsets  Fieldset and Legend Tags in Web Design
• File select controls
• Legends
• Radio buttons
• Multiple selection menus
• Multiple selection menus with option groups
• Multiple selection menu options
• Single selection menus
• Single selection menus with option groups
• Single selection menu options
• Submit buttons
• Multiple line text input controls (textarea elements)
• Single line text input controls

W3C의 웹 접근 이니셔티브(WAI, Web Accessibility Initiative)에 의해 개발된 최신 가이드라인 버전은 권고를 보다 단순화하고, 확장하였다. 권고안은 4가지 분야로 나뉘는데, 세부 목적은 아래와 같다. 
[NDSL 동향분석]

- 인지할 수 있는(perceivable) 웹페이지 개발 : 이 부분의 지침 내용은 웹 콘텐츠를 Braille이나 보다 큰 유형 또는 크게 읽을 수 있도록 여타 포맷으로 어떻게 웹페이지에 구현할지에 대해 설명한다. 

- 운영할 수 있는(operable) 웹페이지 개발 : 이 부분의 지침 내용은 용이하게 내비게이션할 수 있는 웹페이지를 어떻게 구축할지에 대한 지침을 설명한다. 

- 이해할 수 있는(understandable) 웹페이지 개발 : 이 부부분의 지침은 용이하게 이해할 수 있는 웹 콘텐츠에 대한 팁을 제공한다. 

- 견고한(robust) 웹페이지 개발 : 향후 개발가능한 부가적인 기술의 개발을 충분히 포괄할 수 있는 미래 지향적인 웹페이지 개발에 대한 지침을 설명한다.