Docstoc

CSS ___ __ __ _ CSS Zen Garden ____

Document Sample
CSS ___ __ __ _ CSS Zen Garden ____ Powered By Docstoc
					조

훈

http://hooney.net i@honoey.net

Table Of Contents
Understanding CSS ② CSS Design의 원칙 ③ Style의 4가지 원천 ④ Dynamic Style ⑤ CSS Design Process ⑥ Let’s CSS Zen Garden ⑦ CSS for Accessibility
①

2006. 12. 8

Understand CSS


Cascading Style Sheets : 문서의 구조 (html, xhtml)에 스타일을 부여하는 언어
 Style

 Sheets
 Inherit  Cascade  CSS Process

2006. 12. 8

Style
What’s Your Style?!
2006. 12. 8

Sheets
• sheet + sheet + sheet + sheet + sheet

2006. 12. 8

Cascade

2006. 12. 8

Inherit
• Parent and Children / Ancestor and Descendants

2006. 12. 8

CSS Design principle
Forward and backward compatibility  Complementary to structured documents  Vendor, platform, and device independence  Maintainability  Simplicity


2006. 12. 8

CSS Design principle
Network performance  Flexibility  Richness  Alternative language bindings  Accessibility


2006. 12. 8

Forward and Backward Compatibility

CSS 1

CSS 2

CSS 3

2006. 12. 8

Complementary to Structured Documents

2006. 12. 8

Vendor, platform, and device independence
vendor

• Microsoft • Mozilla, apple

platform

• .net, java • Linux, mac os

device

• Computer • PDA, printer
2006. 12. 8

Maintainability


1 CSS  maintain  100,000 Html page

2006. 12. 8

Simplicity
• CSS very easy
structure

 Stucture  Selector  property

selector

property

2006. 12. 8

Network performance
• User download only 1 CSS files
html
html html

CSS
html html

html

html

2006. 12. 8

Flexibility
Style A  Stlye B  Stlye C  Stlye D  Stlye E  Stlye F  Stlye G


Cascading Style Sheet

2006. 12. 8

Richness
Limit of Html style  ex) Table layout  CSS rescue Web

 Position

 Background
 Font/text  Media type

 Relative Design

2006. 12. 8

Alternative language bindings
with JavaScript  with Server side Script


Dynamic Style

2006. 12. 8

Accessibility
Font/text decoration  Position, float  !important  Inherit  Braille, Embossed, TTY, Media type  Aural  Attribute selector  Counter, Section, Numbering

2006. 12. 8

Style Source
OS Style  UA Style  Author Style  User Style


2006. 12. 8

OS Style


Desktop Style
 Window  Unix  Mac OS  Linux  Palm OS  BeOS

2006. 12. 8

UA Style


User Agent Style (ex : web browser)
 Internet Explorer  Firefox

 Safari
 Opera  Linx  Netscape

2006. 12. 8

Author Style


Designer, Developer Style (CSS)

Author Style

User Style

2006. 12. 8

User Style


for User (X), by User Style (O)

Author Style

User Style

2006. 12. 8

Dynamic Style
User Style example  CSS Dynamic Style  CSS + Javascript Dynamic Style


2006. 12. 8

User Style ex.


Opera

2006. 12. 8

User Style ex.


Firefox

2006. 12. 8

User Style ex.


Greasemonkey (firefox add-on)

2006. 12. 8

Dynamic Style only CSS


Use min/max width/height (http://www.uxmag.com/)

2006. 12. 8

Dynamic Style CSS + Javascript


Javascript change CSS
(http://phonophunk.com/)

2006. 12. 8

CSS Design process
HTML -> CLASS -> ID  Layout  box model  front/background-color, image  text/font  media type


2006. 12. 8

Mozilla suggest order
display 2. list-style 3. position 4. float 5. clear 6. width 7. height 8. margin 9. Padding 10. border
1. 10. background 11. color

색상/배경

표시/위치

12. Font 13. text-decoration 14. text-align 15. vertical-align

폰트/텍스트

16. white-space

박스 모델

17. other text 18. content

생성된내용

2006. 12. 8

HTML -> CLASS -> ID
• from Whole, General to Part, Speciality

2006. 12. 8

Layout

2006. 12. 8

Box Model
Large box  Small box  Contents in box  Elements in box


2006. 12. 8

front/background-color, image


Grayscale color set  RGB color set

2006. 12. 8

text/font

2006. 12. 8

media type


print, handheld, projection, arual, etc

2006. 12. 8

Let’s CSS Zen Garden
Styling to Structured Contents  Browser base Web Design  Utility  CSS hack/filter


2006. 12. 8

Styling to Structured Contents


Working Process is very !important;
1. Contents 2. Structured Contents

3. Styling to Structured Contents 1. Identity Design 2. User Interface Design 3. Visual Design

2006. 12. 8

1 Html possible 1,000 Style


CSS Zen Garden (http://www.csszengarden.com/)

2006. 12. 8

CSS Zen Garden

2006. 12. 8

Browser base Web Design
Photoshop base Design  Browser base Design  PSD  CSS


2006. 12. 8

Utility
Firefox  Web developer toolbar  W3C validator  Your Creativity


2006. 12. 8

CSS hack/filter
Browser CSS rendering bug  ACID2 test  Doctype switch  CSS filter  CSS hack


2006. 12. 8

ACID2 test

2006. 12. 8

CSS filter


old Browser (IE5.5, opera7, netscape 5)
 @import "/css/style.css“  @import url("/css/style.css")  /* ... \*/  /**/  html>body

2006. 12. 8

CSS hack
CSS hack 모든 정보

(http://www.communis.co.uk/dithered/css_filters)
   

Star hack : *html p {margin:0;} Underscore hack : p {_margin:0;} Hash hack : p {#margin:0;} Tantek 박스모델 핵 :
1. 2.

voice-family: "\"}\""; voice-family:inherit;

 Star 7 hack : html* p {margin:0;}

2006. 12. 8

CSS for Accessbility
CSS의 한계와 초월  단위의 사용  CSS Media Tpye  CSS Aural 속성


2006. 12. 8

Over the CSS
Know  Understand  Abandon something

백설공주의 호박마차

New  Flexible, Elastic  Dynamic anything


2006. 12. 8

Using units
Using relative length units (em)  px is relative or absolute?


19” (1024x768)

30” (2560 x 1600)
2006. 12. 8

CSS Media Tpye

2006. 12. 8


				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:21
posted:11/19/2009
language:Korean
pages:54