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

프론트엔드 스터디
CH.01. HTML5

HTML
HyperText Markup Language
Hypertext : 문서 내의 특정한 단어가 다른 단어나
데이터베이스와 링크되어 있어 사용자가 관련 문서를
넘나들며 원하는 정보를 얻을 수 있음

HTML
HyperText 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>
<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>
<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 support
https://html5test.com/
(2016.04.01.기준)

Browser 이용률
http://gs.statcounter.com/
(2015.01.01~현재)
World wide 조선

Browser 지원여부 확인
function elementSupportsAttribute(element,
attribute) {
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>
<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 표준 API
https://www.w3.org/TR/html5/
https://www.w3.org/TR/html5/dom.html#kinds-of-content
마크업 언어의 W3C 권고

유용한 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 =>

참고 자료 및 유용한 사이트
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 형식으로 최신 웹트렌드 제공

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 – 제프리 젤드먼
참고 자료 및 유용한 사이트

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

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

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

Más de Young-Beom Rhee

Más de Young-Beom Rhee (7)

Último

Último (8)

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