1. The supervisor rants. He says "This website's pants! I want my clicks improved by Friday!" I hit the URL. It's like the bowels of hell. God give me strength. It's just not my day. So raise your hands to Boag and pray that we can fix this website today. Tonight I need your CSS, coding in the darkness. From now on no more tables nest; you will meet web standards . The source code makes me weep. There's tables fifteen-deep. In Netscape 6 it looks like garbage. The METAs say this turd was made with MS Word. With every click I find new carnage. So raise your hands to Boag and pray that we can fix this website today. Tonight I need your CSS, coding in the darkness. From now on no more tables nest; you will meet web standards . I guess I'll have to start from scratch - then I can kiss this piece of trash goodbye... A love song about web standards from http:// www.boagworld.com/archives/2006/04/a_love_song_to_boagworld.html
3. Agenda - 웹 표준이란 ? - 웹 표준의 장점 - 관련용어 - Cascading Style Sheets (CSS) - BOX MODEL - Ideal Content Structure
4.
5. 웹 표준의 장점 - Markup 용량이 줄어든다 : Increased Speed - Document 의 구조와 표현을 분리한다 : (X)HTML, CSS - 웹 접근성 , 웹 상호 운용성 , 장치 독립성을 높인다 - 향후 호환성을 보장 받는다 : Backwards Compatibility - 검색 엔진이 찾기 쉽다 : 검색엔진은 디자인을 보지 않는다 .
6. 관련용어 - 웹 표준과 관련이 있지만 구분되어야 할 용어들 1. 웹 상호 운용성 (Web Interoperability) 표준 브라우저 혹은 운영 체제간의 비 표준 웹 기능 혹은 플랫폼 종속 기술을 사용함으로써 생기는 문제를 해결 하는 분야로서 , 브라우저 전쟁 중에 Cross Browsing 이라고 널리 알려진 분야로서 Web Standards Project 등에서 활동 하고 있음 . 비슷한 용어로 Standard Evangelism, Forward Compatibility 2. 웹 접근성 (Web Accessibility) 시각 / 청각 장애인 , 색맹 , 파킨슨병이나 다른 언어권 사용자들이 표준 웹 브라우저가 아닌 다양한 S/W 와 기기로 웹을 접할 때 생기는 문제에 대한 해결을 다루는 분야로서 W3C 에 활동 영역이 있음 . 비슷한 분야로 S/W 접근성 , 장치 접근성 , 저작 도구 접근성 . 3. 웹 장치 독립성 (Device Independence ) PC 이외의 TV, 키오스크 , 가전기기 , PDA, 휴대폰 등 다양한 장치에서 웹에 접근하기 위한 기술을 다루는 분야로서 W3C 에서 활동 영역이 있음 . - 웹 상호 운용성 및 장치 독립성은 웹 접근성의 필요 조건이고 포괄적인 개념
7. Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
8. Cascading Style Sheets (CSS) - CSS 사용의 장점 1. 양식의 모듈화 2. 반복되는 속성 코드 제거 3. 파일 크기 감소 - Traffic 절감 효과 4. 손쉬운 디자인 변경 5. 서버사이드 스크립트의 단순화 - 복잡한 조건 코드 제거 6. 다양한 미디어에 적합한 표현 – Screen, Print, Kiosk 등
9. Cascading Style Sheets (CSS) - Selector 1. Universal Selector : * { font-size: small} 2. Type Selectors : h1 { color: red;}, div { color: blue;} 3. Class Selectors : .greenColor { color: green;} 4. ID Selectors : #translation { color: #3366699;} 5. 그 외 Selectors : IE6.0 에서 사용 불가 Attribute Selectors, Pseudo-Elements, Pseudo-Classes, Adjacent Sibling Selectors, Child Selectors 등 CSS2 에서 채용 ※ 공통 선택자와 다중 클래스가 CSS2 에서 추가되었다 . 윈도용 익스플로러 6(IE6/win) 는 다중 클래스를 제대로 지원 못해 가장 마지막 클래스만 인식한다 .
11. BOX MODEL 출처 : http://www.w3.org/TR/CSS21/box.html
12. BOX MODEL The !DOCTYPE "Switch" http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
13. Ideal Content Structure STRUCTURE Semantic Markup X/HTML PRESENTATION Cascading Style Sheets BEHAVIOUR ECMAScript, DOM DOM Scripting "semantic" means "having to do with meaning" Presentation and behavior should fail gracefully
