Successfully reported this slideshow.
Your SlideShare is downloading. ×

자바카페 프론트엔드스터디 E01 - HTML5

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 24 Ad

자바카페 프론트엔드스터디 E01 - HTML5

Download to read offline

HTML이 무엇인지, 지금까지 어떠한 흐름을 거치며 HTML5가 되었는지, HTML5의 설계원칙, 중요한 특징, Browser 지원현황, 웹표준(접근성, Semantic), content 모델에 따른 분류, API 사이트와 유용한 Tutorial 사이트들에 대해서 알아봅니다.

HTML이 무엇인지, 지금까지 어떠한 흐름을 거치며 HTML5가 되었는지, HTML5의 설계원칙, 중요한 특징, Browser 지원현황, 웹표준(접근성, Semantic), content 모델에 따른 분류, API 사이트와 유용한 Tutorial 사이트들에 대해서 알아봅니다.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to 자바카페 프론트엔드스터디 E01 - HTML5 (20)

Advertisement

Recently uploaded (20)

Advertisement

자바카페 프론트엔드스터디 E01 - HTML5

  1. 1. 프론트엔드 스터디 CH.01. HTML5
  2. 2. HTML HyperText Markup Language Hypertext : 문서 내의 특정한 단어가 다른 단어나 데이터베이스와 링크되어 있어 사용자가 관련 문서를 넘나들며 원하는 정보를 얻을 수 있음
  3. 3. HTML HyperText Markup Language <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>샘플</title> </head> <body> Hello, world! </body> </html> Markup : 태그 등을 이용하여 문서나 데이터의 구조 를 표시하는 언어의 한 가지
  4. 4. HTML의 간략한 역사 - 탄생 Tim Berners-Lee 1991년 “HTML Tags”에서 스무 개 남짓한 태그들을 제안 IETF (International Engineering Task Force) W3C (World Wide Web Consultium)
  5. 5. HTML의 간략한 역사 - 발전 HTML 2.0 (IETF)  HTML 4.01 (1999)  XHTML 1.0 (eXtensible)  XHTML 1.1 (XML)  XHTML 2 엄격한 규칙이 강조 IE 에서 돌아가지 않음 이전 버전과 호환 안됨
  6. 6. 분열 : WHATWG의 출현 - Web Hypertext Application Technology Working Group W3C에 Opera, Apple, Mozilla 등의 대표들이 반발 HTML을 확장해 보다 창의적인 웹 어플리케이션을 만들 수 있게 하자 - Opera의 Ian Hickson : W3C 거부 => WHATWG 출현 HTML을 확장 : Web Forms 2.0, Web Apps 1.0 => 이 둘이 하나로 통합 = HTML5
  7. 7. 재통합 2006년 10월, 팀 버너스리 – 웹을 HTML에서 XML로 바꾸려 는 시도는 실패했다.. W3C의 새로운 헌장 : 모든 것을 바꾸며 완전히 새롭게 시작 하는 대신, 향후의 모든 HTML 버전은 WHATWG의 작업을 기 초로 사용한다. W3C의 XHML2 폐기
  8. 8. HTML5의 설계원칙 - https://www.w3.org/TR/html-design-principles/ Support Exisiting Content - 기존의 컨텐츠를 지원하라 Do not reinvent the wheel – 바퀴를 새로 만들지 말라 Pave the cowpaths – 비포장 길은 포장하라 If it ain’t broke, don’t fix it – 부서지지 않았다면, 고치지 마라 사용자 기반 우선권 (Priority of Constituencies) : 충돌이 발생하는 경우, 이론적인 순수성보다는 기술 명세를, 기술 명세보다는 구현자를, 그리고 구현자보다는 개발자를, 또한 개발자 보다는 사용자를 고려하라.
  9. 9. 선언의 간결함 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="file.css"> </head> <body> <script type="text/javascript" src="file.js"/> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="file.css"> </head> <body> <script src="file.js"></script> </body> </html> VS. HTML5HTML 4.01
  10. 10. Obsolete (퇴화된) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="file.css"/> </head> <body> <acronym></acronym> <script src="file.js"></script> </body> </html> https://validator.w3.org/nu/#textarea 전체 목록은 https://www.w3.org/TR/html5/obsolete.html
  11. 11. HTML5의 중요한 특징 – Rich media 별도의 Plug-in 설치 Plug-in에 종속 VS. 별도의 설치 X 브라우져 기본 지원 성능, 지원범위는 아직 진행중…
  12. 12. FORM 2.0 – 반복적인 일들을 쉽게 AUTOFOCUS, REQUIRED, AUTOCOMPLETE, DATALIST, INPUT TYPES [email, website, phone] Name : <input type="text" placeholder="Your name"/> Slider : <input type="range" min="1" max="5"/> Date : <input type="date"/>
  13. 13. FORM 2.0 – 반복적인 일들을 쉽게 이외에도 AUTOFOCUS, REQUIRED, AUTOCOMPLETE, DATALIST, INPUT TYPES [email, website, phone] 등등 Color Picker : <input type="color"/>
  14. 14. HTML5 Browser support https://html5test.com/ (2016.04.01.기준)
  15. 15. Browser 이용률 http://gs.statcounter.com/ (2015.01.01~현재) World wide 조선
  16. 16. Browser 지원여부 확인 function elementSupportsAttribute(element, attribute) { var test = document.createElement(element); if(attribute in test) { return true; } else { return false; } } elementSupportsAttribute('input', 'placeholder'); Fallback : 대체 텍스트 혹은 이미지 준비 지원 여부 확인 후 지원하지 않을 경우에 대한 대비책 마련
  17. 17. Browser 지원여부 검사 Modernizr (https://modernizr.com) 사용 필요로 하는 속성 중 현재 브라우져에서 지원하지 않는 속성 보기 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="modernizr-custom.js"></script> </head> <body> </body> <script> for(var i in Modernizr) { if(typeof(Modernizr[i])=='boolean' && !Modernizr[i]) { console.log(i, " : ", Modernizr[i]); } } </script> </html>
  18. 18. 웹표준 웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML, CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻한 다. HTML은 접근성과 시맨틱 HTML의 가이드라인을 충족해야 한다. 웹 표준을 논할 때 일반적으로 다음의 것들이 중요성이 있는 것으로 보인 다: 1. HTML, XHTML, SVG, XForms와 같은 마크업 언어의 W3C 권고 2. 스타일시트, 특히 CSS의 W3C 권고 3. 흔히 자바스크립트나 ECMA스크립트로 불리는 Ecma 인터내셔널 표준 4. 문서 객체 모델의 W3C 권고 웹 접근성은 일반적으로 W3C의 Web Accessibility Initiative가 출판한 웹 콘텐츠 접근성 가이드라인에 기반을 두고 있다.
  19. 19. 웹접근성 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도 록 제작하여야 한다 – 팀 버너스리 웹콘텐츠 제작기법(국내) http://www.wah.or.kr/Participation /technique.asp
  20. 20. Semantic – 의미부여하기 <div class="header"></div> <header></header> VS.
  21. 21. HTML 표준 API https://www.w3.org/TR/html5/ https://www.w3.org/TR/html5/dom.html#kinds-of-content 마크업 언어의 W3C 권고
  22. 22. 유용한 Tutorial http://www.w3schools.com/html/default.asp https://www.google.co.kr/webhp?hl=ko#hl=ko&q=site:www.w3schools.com+%s => %s가 검색어 변수 Tip. 생산성 높이기 : 자주 가는 사이트를 Chrome 검색엔진에 등록하기 Step1 site 검색을 통해 URL 추출 Step2 설정 -> 검색엔진 관리 Step3 검색엔진 등록 이름 키워드 URL 실행 space 또는 tab =>
  23. 23. 참고 자료 및 유용한 사이트 https://www.w3.org/TR/html5/ - HTML5 스펙 (W3C) https://html.spec.whatwg.org/multipage/ - HTML5 스펙 (WHATWG) http://www.w3schools.com/html/default.asp - HTML Tutorial https://developer.mozilla.org/en- US/docs/Web/Guide/HTML/HTML5 - HTML Tutorial http://tympanus.net/codrops/category/tutorials/ - Tutorial 형식으로 최신 웹트렌드 제공
  24. 24. https://validator.w3.org/ - HTML 검증 https://www.koreahtml5.kr/jsp/diagnosis/SP04.jsp - HTML 검증 (한글판) https://jigsaw.w3.org/css-validator/ - CSS 검증 http://jsbin.com/ - 웹 IDE https://html5test.com/ - 현재 브라우져의 HTML5 지원율 확인 http://gs.statcounter.com/ - 브라우져 사용율 확인 웹디자이너를 위한 HTML5 – A BOOK APART – 제프리 젤드먼 참고 자료 및 유용한 사이트

×