• Like
  • Save
Web Standards Seminar 2006
Upcoming SlideShare
Loading in...5
×

Web Standards Seminar 2006

  • 964 views
Uploaded on

Web Standards Seminar 2006

Web Standards Seminar 2006

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
964
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 2. Cover WEB Standards 윤 태 영 2006–07-18
  • 3. Agenda - 웹 표준이란 ? - 웹 표준의 장점 - 관련용어 - Cascading Style Sheets (CSS) - BOX MODEL - Ideal Content Structure
  • 4.
    • - W3C(World Wide Web Consortium) Guideline
    웹 표준이란 ? W3C 는 설립목적인 웹 표준과 가이드라인 개발을 수행하고 있으며 , 지금까지의 결과로 지난 10 년간 90 여 개의 W3C 권고안을 발표하였다 . W3C 는 또한 교육과 소프트웨어 개발에 관여해 왔고 , 웹에 관하여 토론할 수 있는 열린 포럼을 개최해 왔다 . 웹의 모든 잠재력을 이끌어내기 위해서 가장 기본적인 웹 기술은 상호 간의 호환성이 있어야 한다는 것 , 그리고 어떤 소프트웨어나 하드웨어에서도 웹을 접근할 수 있어야 한다는 것이다 . W3C 의 이러한 목표를 " 웹 상호 운용성 " (Web Interoperability) 이라고 한다 . W3C 는 웹 언어와 프로토콜에 대한 공개 ( 반독점적인 ) 표준을 제정하여 시장 분열과 웹의 분열을 피하고자 한다 . - 웹에 관련된 표준에는 흔히 말하는 " 표준 (Standard)" 은 존재하지 않는다 . - W3C 의 토론을 통해서 나온 권고안이 최상위 이다 . - 표준의 종류 제안된 표준 Draft 작업하는 표준 Working Draft 확정될 권고안 Candidate Recommendation 제안된 표준 Recommendation
  • 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) 는 다중 클래스를 제대로 지원 못해 가장 마지막 클래스만 인식한다 .
  • 10. BOX MODEL IE WIDTH WIDTH
  • 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
  • 14. Ideal Content Structure
  • 15. Chapter 1. 리스트 Chapter 8. 리스트 고급기능 Chapter 3. 테이블 Chapter 2. 머리글 Chapter 4. 인용문 Chapter 5. 폼 Chapter 6. 구문표현 (Phrase Elements) Chapter 7. Anchors Chapter 9. 마크 업 용량 줄이기 Chapter 10. CSS 적용하기 Chapter 11. 인쇄를 위한 스타일 Chapter 13. 텍스트 스타일 Chapter 14. 이미지 바꿔 치기 Chapter 12. CSS 로 레이아웃 잡기 Chapter 15. BODY 를 위한 스타일
    • Doctype Switching
    • Block VS Inline Element
    • Float
    • CSS Hack
    • GET? POST?
    • XMLHttpRequest
    • Ajax
    Study Curriculum
  • 16. 참고자료
    • Web Standards Guide line http://www.w3.org/Consortium/
    • CSS Level 2.1 : BOX MODEL & Selectors http://www.w3.org/TR/CSS21/
    • CSS Enhancements in Internet Explorer 6 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
    • A love song about web standards http://www.boagworld.com/archives/2006/04/a_love_song_to_boagworld.html
    • CSS for Print http://www.simplebits.com/
    • 실전 웹 표준 가이드 http://www.mozilla.or.kr/docs/web-developer/standard/
    • Web standards Workshop http://www.maxdesign.com.au/presentation/workshop/