O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
월드 와이드 웹
World Wide Web
웹의 탄생과 비전으로 그려보는 미래
웹 표준
Web Standard
웹 표준이란 무엇인가? 왜 필요한가?
웹 접근성
Web Standard
웹 접근성에 대한 바른 이해/적용
의...
World Wide Web
WWW
WorldWideWeb
World Wide Web
웹 세상을 연결하는 통로
social web network
사람과 사람을 연결하는 매체
이미 우리에게 친숙한 웹을 세상에 소개한
이는 영국의 한 과학자였습니다.
그의 이름은 팀 버너스-리 입니다.
이미 우리에게 친숙한 웹을 세상에 소개한
이는 영국의 한 과학자였습니다.
그의 이름은 팀 버너스-리 입니다.
Tim Berners-Lee,
W3C Director and inventor of the World Wide ...
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web
때는 1989년. 당시 유럽 분자 물리학 연구소
에서 근무하던 버너스-리는 단순한 하이퍼
텍스트 시스템...
여기저기 흩어져 있는 물리학자의 자료를
연결하려는 생각에서 정보를 링크하는 기본
시스템을 개발했습니다.
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web
모든 요소에 고유 주소를 할당할 수 있는 URL
링크된 정보를 전송할 수 있는 규약 HTTP
정보를 만드는 언어 HTML
Tim Berners-Lee,
W3C Director and inventor of the Worl...
버너스-리는 동료 연구자 마이크 샌들과 함께
정보를 저장하고 서비스하는 서버와 브라우징을
위한 어플리케이션을 만들고, 이 시스템을 월드
와이드 웹이라고 불렀습니다.
Tim Berners-Lee,
W3C Director ...
다른 운영체제에서도 작동되는 클라이언트(브라
우저)가 개발됨에 따라 시스템은 점차 대중화되었
습니다. 1994년에 이르러서 웹은 탄생되었습니다.
Tim Berners-Lee,
W3C Director and invento...
갑자기 모든 사람들은 믿을 수 없을 만큼 간단
하게 전자 문서를 교환할 수 있게 되었습니다.
이 모든 일은 갑자기 이루어진 것이죠.
Tim Berners-Lee,
W3C Director and inventor of th...
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web
웹의 믿기 어려운 성장은 일정 부분 그것의 단순함에서 기인합니다.
특히 브라우저로 읽어들일 수 있는 문서를 쉽게 제작할 수 있다는 점이 그렇습니다.
HTML의 첫 버전은 간단한 기본 요소를 가지고 태어났습니다.
h1-h...
웹의 믿기 어려운 성장은 일정 부분 그것의 단순함에서 기인합니다.
특히 브라우저로 읽어들일 수 있는 문서를 쉽게 제작할 수 있다는 점이 그렇습니다.
HTML의 첫 버전은 간단한 기본 요소를 가지고 태어났습니다.
h1-h...
월드 와이드 웹, 웹의 목표
‘웹의 아버지’ 팀 버너스 리 경은 웹의 목표를 다음과 같이 이야기 합니다.
Web for Everyone
Web for Everyone
웹은 누구에게나 열려있습니다.
Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and ...
Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and ...
Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and ...
History
웹기술의흐름
History
웹기술의흐름
1991
HTML 초안
History
도표로알아보는간단한웹의흐름
1991
HTML 초안
History
도표로알아보는간단한웹의흐름
1991
HTML 초안
History
도표로알아보는간단한웹의흐름
1995
HTML 2
1997
HTML 3.2
1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2
1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2
2004
...
1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
2010 - 2012
HTML 5
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1995
HTML 2
...
1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
2010 - 2012
HTML 5
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1995
HTML 2
...
1991
HTML 초안
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0
1991
HTML 초안
1996
CSS 1.0
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0
1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0
1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0
2004
CSS 2.1...
1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0...
1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0...
1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2011
CSS 3.0
2...
1991
HTML 초안
1996
CSS 1
1998
CSS 2
1999
HTML 4.01
2010
HTML 5
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1994
Livescript
1996
J...
1991
HTML 초안
1996
CSS 1
1998
CSS 2
1999
HTML 4.01
2010
HTML 5
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1994
Livescript
1996
J...
1991
HTML 초안
1996
CSS 1
1998
CSS 2
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
1993
Mosaic
1998
IE 5
2007
IE 7
1994
NN 1
1995
...
1991
HTML 초안
1996
CSS 1
1998
CSS 2
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
1993
Mosaic
1998
IE 5
2007
IE 7
1994
NN 1
1995
...
괴/물/양/산
오래된 이야기이지만 1997년 타이포그래피 전문가
데이빗 시겔은 웹 페이지 레이아웃을 만드는 새로운
기법에 대한 글을 썼고 그 이후 웹은 많이 변화하게
됩니다. 마치 영화 속 프랑켄슈타인처럼 HTML의
<...
괴/물/양/산
오래된 이야기이지만 1997년 타이포그래피 전문가
데이빗 시겔은 웹 페이지 레이아웃을 만드는 새로운
기법에 대한 글을 썼고 그 이후 웹은 많이 변화하게
됩니다. 마치 영화 속 프랑켄슈타인처럼 HTML의
<...
괴/물/활/보
그 이후 오랫동안 이 괴물같은 기법은 페이지 레이
아웃을 만드는데 사용되었습니다. 당시 디자이너들
은 전통적인 인쇄 매체에서 사용하던 레이아웃을 웹
페이지에 표현할 수 있다는 사실에 기뻐했습니다.
본래 테...
시/겔/절/규
오래 지나지 않아 시겔은 자신이 괴물을 만들어
냈다는 사실을 깨닫고 절규하게 됩니다.
“웹은 망가졌고 그렇게 만든 건 바로 나다”
the Web is ruined and I ruined it
어떤 사람들은 제가 웹을 망가뜨렸다고 말합니다. 사실 그 말은 틀리지 않았습니다.
저는 초컬릿과 땅콩버터를 마구 섞어 다시는 분리하지 못하게 한 것과 같이 웹을 망가뜨렸습니다.
저는 구조를 표현과 함께 뒤섞어 버리는 죄...
괴/물/확/산
시겔이 만든 괴물은 더욱 강력해져 수백만의
웹 페이지 컨텐츠와 구조, 디자인이 뒤섞여 버렸습니다.
덧붙여 웹디자이너들에게 보이는 모양대로 컨텐츠와 구조를
만들어야 한다는 잘못된 생각을 하게 만들었습니다.
...
<table> 태그를 사용해서 레이아웃을 만들던 과거에는 보이는
모양에 따라 컨텐츠를 배치해야 했기 때문에 컨텐츠와 구조
모두 분리되지 못했습니다.
하지만 현대적인 웹 디자인 제작에서는
과거의 잘못된 방법을 답습하고 있지 않습니다.
비효율적인 구조와 표현을 한 몸으로 해서 제작하지
않으며, 목적에 부합하는 의미적인 구조와 다양한
스타일 제작을 위한 효울적인 표현, ...
월드 와이드 웹의 원칙
Web for All
Web on Everything
월드 와이드 웹의 비전
Web for Rich Interaction
Web of Data and Services
Web of Trust
Web Standard
DVD의
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
KTH Easing Markup DAY01
Próximos SlideShares
Carregando em…5
×

KTH Easing Markup DAY01

1.872 visualizações

Publicada em

  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn }
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

KTH Easing Markup DAY01

  1. 1. 월드 와이드 웹 World Wide Web 웹의 탄생과 비전으로 그려보는 미래 웹 표준 Web Standard 웹 표준이란 무엇인가? 왜 필요한가? 웹 접근성 Web Standard 웹 접근성에 대한 바른 이해/적용 의미 구조화 Semantic Markup 의미있는 콘텐츠를 작성하는 방법 KTH.UXD ® Semantic Markup Course UX/UI Design & Development Education
  2. 2. World Wide Web
  3. 3. WWW
  4. 4. WorldWideWeb
  5. 5. World Wide Web 웹 세상을 연결하는 통로
  6. 6. social web network 사람과 사람을 연결하는 매체
  7. 7. 이미 우리에게 친숙한 웹을 세상에 소개한 이는 영국의 한 과학자였습니다. 그의 이름은 팀 버너스-리 입니다.
  8. 8. 이미 우리에게 친숙한 웹을 세상에 소개한 이는 영국의 한 과학자였습니다. 그의 이름은 팀 버너스-리 입니다. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  9. 9. Tim Berners-Lee, W3C Director and inventor of the World Wide Web 때는 1989년. 당시 유럽 분자 물리학 연구소 에서 근무하던 버너스-리는 단순한 하이퍼 텍스트 시스템을 제안합니다.
  10. 10. 여기저기 흩어져 있는 물리학자의 자료를 연결하려는 생각에서 정보를 링크하는 기본 시스템을 개발했습니다. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  11. 11. 모든 요소에 고유 주소를 할당할 수 있는 URL 링크된 정보를 전송할 수 있는 규약 HTTP 정보를 만드는 언어 HTML Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  12. 12. 버너스-리는 동료 연구자 마이크 샌들과 함께 정보를 저장하고 서비스하는 서버와 브라우징을 위한 어플리케이션을 만들고, 이 시스템을 월드 와이드 웹이라고 불렀습니다. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  13. 13. 다른 운영체제에서도 작동되는 클라이언트(브라 우저)가 개발됨에 따라 시스템은 점차 대중화되었 습니다. 1994년에 이르러서 웹은 탄생되었습니다. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  14. 14. 갑자기 모든 사람들은 믿을 수 없을 만큼 간단 하게 전자 문서를 교환할 수 있게 되었습니다. 이 모든 일은 갑자기 이루어진 것이죠. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  15. 15. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  16. 16. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  17. 17. 웹의 믿기 어려운 성장은 일정 부분 그것의 단순함에서 기인합니다. 특히 브라우저로 읽어들일 수 있는 문서를 쉽게 제작할 수 있다는 점이 그렇습니다. HTML의 첫 버전은 간단한 기본 요소를 가지고 태어났습니다. h1-h6는 제목과 소제목, p는 단락, li는 목록을 표시할 수 있었습니다. 이러한 간소한 표시 방법으로 웹은 대중화될 수 있었습니다.
  18. 18. 웹의 믿기 어려운 성장은 일정 부분 그것의 단순함에서 기인합니다. 특히 브라우저로 읽어들일 수 있는 문서를 쉽게 제작할 수 있다는 점이 그렇습니다. HTML의 첫 버전은 간단한 기본 요소를 가지고 태어났습니다. h1-h6는 제목과 소제목, p는 단락, li는 목록을 표시할 수 있었습니다. 이러한 간소한 표시 방법으로 웹은 대중화될 수 있었습니다. 복잡한 건 싫어요! 어른들의 시선으로 보지 말아주세요.
  19. 19. 월드 와이드 웹, 웹의 목표 ‘웹의 아버지’ 팀 버너스 리 경은 웹의 목표를 다음과 같이 이야기 합니다.
  20. 20. Web for Everyone
  21. 21. Web for Everyone 웹은 누구에게나 열려있습니다.
  22. 22. Web for Everyone 웹은 누구에게나 열려있습니다. Web on Everything
  23. 23. Web for Everyone 웹은 누구에게나 열려있습니다. Web on Everything 웹은 어디에서나 접근할 수 있어야 합니다.
  24. 24. Web for Everyone 웹은 누구에게나 열려있습니다. Web on Everything 웹은 어디에서나 접근할 수 있어야 합니다. Knowledge Base
  25. 25. Web for Everyone 웹은 누구에게나 열려있습니다. Web on Everything 웹은 어디에서나 접근할 수 있어야 합니다. Knowledge Base 그것은 사람들의 지식으로 구성됩니다.
  26. 26. Web for Everyone 웹은 누구에게나 열려있습니다. Web on Everything 웹은 어디에서나 접근할 수 있어야 합니다. Knowledge Base 그것은 사람들의 지식으로 구성됩니다. Trust and Confidence
  27. 27. Web for Everyone 웹은 누구에게나 열려있습니다. Web on Everything 웹은 어디에서나 접근할 수 있어야 합니다. Knowledge Base 그것은 사람들의 지식으로 구성됩니다. Trust and Confidence 그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.
  28. 28. Web for Everyone 웹은 누구에게나 열려있습니다. Web on Everything 웹은 어디에서나 접근할 수 있어야 합니다. Knowledge Base 그것은 사람들의 지식으로 구성됩니다. Trust and Confidence 그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다. 팀 버너스-리 경
  29. 29. History 웹기술의흐름
  30. 30. History 웹기술의흐름
  31. 31. 1991 HTML 초안 History 도표로알아보는간단한웹의흐름
  32. 32. 1991 HTML 초안 History 도표로알아보는간단한웹의흐름
  33. 33. 1991 HTML 초안 History 도표로알아보는간단한웹의흐름 1995 HTML 2 1997 HTML 3.2
  34. 34. 1998 Web Standard Project 1991 HTML 초안 1999 HTML 4.0 History 도표로알아보는간단한웹의흐름 2000 XHTML 1.0 1995 HTML 2 1997 HTML 3.2
  35. 35. 1998 Web Standard Project 1991 HTML 초안 1999 HTML 4.0 History 도표로알아보는간단한웹의흐름 2000 XHTML 1.0 1995 HTML 2 1997 HTML 3.2 2004 XHTML 2.0
  36. 36. 1998 Web Standard Project 1991 HTML 초안 1999 HTML 4.0 2010 - 2012 HTML 5 History 도표로알아보는간단한웹의흐름 2000 XHTML 1.0 1995 HTML 2 1997 HTML 3.2 2004 XHTML 2.0 2009 XHTML 2.0 End 2004 Web Applications 1.0
  37. 37. 1998 Web Standard Project 1991 HTML 초안 1999 HTML 4.0 2010 - 2012 HTML 5 History 도표로알아보는간단한웹의흐름 2000 XHTML 1.0 1995 HTML 2 1997 HTML 3.2 2004 XHTML 2.0 2009 XHTML 2.0 End 2004 Web Applications 1.0
  38. 38. 1991 HTML 초안 1999 HTML 4.01 2010 HTML 5 History 도표로 알아보는 CSS 테크닉 변천사 2000 XHTML 1.0
  39. 39. 1991 HTML 초안 1996 CSS 1.0 1999 HTML 4.01 2010 HTML 5 History 도표로 알아보는 CSS 테크닉 변천사 2000 XHTML 1.0
  40. 40. 1991 HTML 초안 1996 CSS 1.0 1998 CSS 2.0 1999 HTML 4.01 2010 HTML 5 History 도표로 알아보는 CSS 테크닉 변천사 2000 XHTML 1.0
  41. 41. 1991 HTML 초안 1996 CSS 1.0 1998 CSS 2.0 1999 HTML 4.01 2010 HTML 5 History 도표로 알아보는 CSS 테크닉 변천사 2000 XHTML 1.0 2004 CSS 2.1 Revisions
  42. 42. 1991 HTML 초안 1996 CSS 1.0 1998 CSS 2.0 2007 CSS 2.1 1999 HTML 4.01 2010 HTML 5 History 도표로 알아보는 CSS 테크닉 변천사 2000 XHTML 1.0 2004 CSS 2.1 Revisions
  43. 43. 1991 HTML 초안 1996 CSS 1.0 1998 CSS 2.0 2007 CSS 2.1 1999 HTML 4.01 2010 HTML 5 History 도표로 알아보는 CSS 테크닉 변천사 2000 XHTML 1.0 2004 CSS 2.1 Revisions 2007 - 2010 iPhone & Smart Device
  44. 44. 1991 HTML 초안 1996 CSS 1.0 1998 CSS 2.0 2007 CSS 2.1 1999 HTML 4.01 2010 HTML 5 History 도표로 알아보는 CSS 테크닉 변천사 2011 CSS 3.0 2000 XHTML 1.0 2004 CSS 2.1 Revisions 2007 - 2010 iPhone & Smart Device
  45. 45. 1991 HTML 초안 1996 CSS 1 1998 CSS 2 1999 HTML 4.01 2010 HTML 5 History 도표로알아보는간단한웹의흐름 2000 XHTML 1.0 1994 Livescript 1996 Javascript 1.0 1997 ECMAscript 1.0 2008 Javascript 1.8 1999 ECMAscript 3.0 2006 jQuery 1.0 2012 jQuery 1.7 2007 CSS 2.1 2004 CSS 2.1 Revisions 2011 CSS 3.0
  46. 46. 1991 HTML 초안 1996 CSS 1 1998 CSS 2 1999 HTML 4.01 2010 HTML 5 History 도표로알아보는간단한웹의흐름 2000 XHTML 1.0 1994 Livescript 1996 Javascript 1.0 1997 ECMAscript 1.0 2008 Javascript 1.8 1999 ECMAscript 3.0 2006 jQuery 1.0 2012 jQuery 1.7 2007 CSS 2.1 2004 CSS 2.1 Revisions 2011 CSS 3.0
  47. 47. 1991 HTML 초안 1996 CSS 1 1998 CSS 2 2007 CSS 2.1 1999 HTML 4.01 2010 HTML 5 1993 Mosaic 1998 IE 5 2007 IE 7 1994 NN 1 1995 IE 2002 IE 6 2006 FF 2 2004 FF 1 2008 FF 3 2009 IE 8 History 도표로알아보는간단한웹의흐름 2010 IE 9 2010 CSS 3 2000 XHTML 1.0 2003 Safari 1996 Opera 2008 Chrome 1994 Livescript 1996 Javascript 1.0 1997 ECMAscript 1.0 2008 Javascript 1.8 1999 ECMAscript 3.0 1991 Nexus 2001 NN 6
  48. 48. 1991 HTML 초안 1996 CSS 1 1998 CSS 2 2007 CSS 2.1 1999 HTML 4.01 2010 HTML 5 1993 Mosaic 1998 IE 5 2007 IE 7 1994 NN 1 1995 IE 2002 IE 6 2006 FF 2 2004 FF 1 2008 FF 3 2009 IE 8 History 도표로알아보는간단한웹의흐름 2010 IE 9 2010 CSS 3 2000 XHTML 1.0 2003 Safari 1996 Opera 2008 Chrome 1994 Livescript 1996 Javascript 1.0 1997 ECMAscript 1.0 2008 Javascript 1.8 1999 ECMAscript 3.0 1991 Nexus 2001 NN 6
  49. 49. 괴/물/양/산 오래된 이야기이지만 1997년 타이포그래피 전문가 데이빗 시겔은 웹 페이지 레이아웃을 만드는 새로운 기법에 대한 글을 썼고 그 이후 웹은 많이 변화하게 됩니다. 마치 영화 속 프랑켄슈타인처럼 HTML의 <table>태그와 공백gif 이미지를 결합한 괴물이 태어났습니다.
  50. 50. 괴/물/양/산 오래된 이야기이지만 1997년 타이포그래피 전문가 데이빗 시겔은 웹 페이지 레이아웃을 만드는 새로운 기법에 대한 글을 썼고 그 이후 웹은 많이 변화하게 됩니다. 마치 영화 속 프랑켄슈타인처럼 HTML의 <table>태그와 공백gif 이미지를 결합한 괴물이 태어났습니다.
  51. 51. 괴/물/활/보 그 이후 오랫동안 이 괴물같은 기법은 페이지 레이 아웃을 만드는데 사용되었습니다. 당시 디자이너들 은 전통적인 인쇄 매체에서 사용하던 레이아웃을 웹 페이지에 표현할 수 있다는 사실에 기뻐했습니다. 본래 테이블이 가지고 있는 의미는 무시된 채 세상 에 활보하게 됩니다.
  52. 52. 시/겔/절/규 오래 지나지 않아 시겔은 자신이 괴물을 만들어 냈다는 사실을 깨닫고 절규하게 됩니다. “웹은 망가졌고 그렇게 만든 건 바로 나다” the Web is ruined and I ruined it
  53. 53. 어떤 사람들은 제가 웹을 망가뜨렸다고 말합니다. 사실 그 말은 틀리지 않았습니다. 저는 초컬릿과 땅콩버터를 마구 섞어 다시는 분리하지 못하게 한 것과 같이 웹을 망가뜨렸습니다. 저는 구조를 표현과 함께 뒤섞어 버리는 죄악을 저질렀기 때문에 처형되어도 마땅하다고 생각합니다. 데이빗 시겔 www.xml.com/pub/a/w3j/sl/people.html
  54. 54. 괴/물/확/산 시겔이 만든 괴물은 더욱 강력해져 수백만의 웹 페이지 컨텐츠와 구조, 디자인이 뒤섞여 버렸습니다. 덧붙여 웹디자이너들에게 보이는 모양대로 컨텐츠와 구조를 만들어야 한다는 잘못된 생각을 하게 만들었습니다. 이러한 개념은 웹디자이너들의 사고에 많은 영향을 끼쳐서 결과적으로 웹은 유연하지 못하게 되었고 의미에 따른 구조는 사라지고 접근성이 떨어지게 되었습니다.
  55. 55. <table> 태그를 사용해서 레이아웃을 만들던 과거에는 보이는 모양에 따라 컨텐츠를 배치해야 했기 때문에 컨텐츠와 구조 모두 분리되지 못했습니다.
  56. 56. 하지만 현대적인 웹 디자인 제작에서는 과거의 잘못된 방법을 답습하고 있지 않습니다. 비효율적인 구조와 표현을 한 몸으로 해서 제작하지 않으며, 목적에 부합하는 의미적인 구조와 다양한 스타일 제작을 위한 효울적인 표현, 동작 관리를 통해 효과적인 디자인 구현을 가능케합니다. 구조 표현 동작
  57. 57. 월드 와이드 웹의 원칙 Web for All Web on Everything 월드 와이드 웹의 비전 Web for Rich Interaction Web of Data and Services Web of Trust
  58. 58. Web Standard
  59. 59. DVD의

×