자바카페 프론트엔드스터디 e01 - html5
TRANSCRIPT
프론트엔드 스터디CH.01. HTML5
HTMLHyperText Markup Language
Hypertext : 문서 내의 특정한 단어가 다른 단어나 데이터베이스와 링크되어 있어 사용자가 관련 문서를 넘나들며 원하는 정보를 얻을 수 있음
HTMLHyperText Markup Language
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> 샘플 </title></head><body> Hello, world!</body></html>
Markup : 태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어의 한 가지
HTML 의 간략한 역사 - 탄생Tim Berners-Lee
1991 년 “ HTML Tags” 에서스무 개 남짓한 태그들을 제안
IETF (International Engineering Task Force) Þ W3C (World Wide Web Consultium)
HTML 의 간략한 역사 - 발전
HTML 2.0 (IETF)
Þ HTML 4.01 (1999)
Þ XHTML 1.0 (eXtensible)Þ XHTML 1.1 (XML)Þ XHTML 2
엄격한 규칙이 강조IE 에서 돌아가지 않음이전 버전과 호환 안됨
분열 : 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
재통합2006 년 10 월 , 팀 버너스리 – 웹을 HTML 에서 XML 로 바꾸려는 시도는 실패했다 ..
W3C 의 새로운 헌장 : 모든 것을 바꾸며 완전히 새롭게 시작하는 대신 , 향후의 모든 HTML 버전은 WHATWG 의 작업을 기초로 사용한다 .
W3C 의 XHML2 폐기
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) : 충돌이 발생하는 경우 , 이론적인 순수성보다는 기술 명세를 , 기술 명세보다는 구현자를 , 그리고 구현자보다는 개발자를 , 또한 개발자보다는 사용자를 고려하라 .
선언의 간결함<!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
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
HTML5 의 중요한 특징 – Rich media
별도의 Plug-in 설치Plug-in 에 종속
VS.별도의 설치 X브라우져 기본 지원
성능 , 지원범위는 아직 진행중…
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"/>
FORM 2.0 – 반복적인 일들을 쉽게
이외에도 AUTOFOCUS, REQUIRED, AUTOCOMPLETE, DATALIST, INPUT TYPES [email, website, phone] 등등
Color Picker : <input type="color"/>
HTML5 Browser supporthttps://html5test.com/(2016.04.01. 기준 )
Browser 이용률http://gs.statcounter.com/(2015.01.01~ 현재 )
World wide 조선
Browser 지원여부 확인function elementSupportsAttribute(element, at-tribute) { var test = document.createElement(element); if(attribute in test) { return true; } else { return false; }}
elementSupportsAttribute('input', 'placeholder');
Fallback : 대체 텍스트 혹은 이미지 준비지원 여부 확인 후 지원하지 않을 경우에 대한 대비책 마련
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>
웹표준 웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML, CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻한다 . HTML 은 접근성과 시맨틱 HTML 의 가이드라인을 충족해야 한다 .웹 표준을 논할 때 일반적으로 다음의 것들이 중요성이 있는 것으로 보인다 :
1. HTML, XHTML, SVG, XForms 와 같은 마크업 언어의 W3C 권고 2. 스타일시트 , 특히 CSS 의 W3C 권고 3. 흔히 자바스크립트나 ECMA 스크립트로 불리는 Ecma 인터내셔널 표준 4. 문서 객체 모델의 W3C 권고 웹 접근성은 일반적으로 W3C 의 Web Accessibility Initiative 가 출판한 웹 콘텐츠 접근성 가이드라인에 기반을 두고 있다 .
웹접근성 웹이란 ' 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간 ' 이라고 정의하였으며 ,웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다 – 팀 버너스리
웹콘텐츠 제작기법 ( 국내 )http://www.wah.or.kr/Participation/technique.asp
Semantic – 의미부여하기
<div class="header"></div> <header></header>VS.
HTML 표준 APIhttps://www.w3.org/TR/html5/
https://www.w3.org/TR/html5/dom.html#kinds-of-content
마크업 언어의 W3C 권고
유용한 Tutorialhttp://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 =>
참고 자료 및 유용한 사이트https://www.w3.org/TR/html5/ - HTML5 스펙 (W3C)
https://html.spec.whatwg.org/multipage/ - HTML5 스펙 (WHATWG)
http://www.w3schools.com/html/default.asp - HTML Tuto-rial
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 - HTML Tutorial
http://tympanus.net/codrops/category/tutorials/ - Tutorial 형식으로 최신 웹트렌드 제공
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 – 제프리 젤드먼
참고 자료 및 유용한 사이트