html 5 개요
DESCRIPTION
금년도 3월즈음에 만들었던 자료인데요. 부존한 자료이지만 누군가 많이 봐주신다면 좋을 것 같아서 올려봅니다. HTML 5에서 무엇이 변경되었는지 같은 부분이 나와있습니다. 말그대로 개요기 때문에 깊이는 많이 없지만 뒤에 참고 사이트랑 적어놓았으니 많이 읽어주세요.(웃음) 참고로 저는 대한민국 제주도에 사는 IT개발자입니다. I'm South Korea's developer in Jeju Of South Korea. It's about HTML5. But this document is Korea document.TRANSCRIPT
HTML 5 개요비트모바일
장봉수
목 차
HTML 5 란 ? HTML 의 역사 HTML 의 요소 HTML5 와 이전 HTML 의 차이점 HTML5 의 요소 ( 변경점들 )
1. HTML 5 란 ?
HyperText Markup Language
구조적 문서를 만들 수 있는 방법 제공
웹 표준 기구인 W3C 에서 만들고 있는 차세대 웹 표준안으로 MS, 모질라 , 애플 , 구글 , 오페라 등 거의 모든 웹 브라우저 벤더가 참여하고 있는 산업표준 .
2. HTML 의 역사
1991 년 말 , 버너스리 , 인터넷에서 문서를 HTML 요소로 부르기 시작 1995 년 11 월 24 일 , HTML 2.0
IETF RFC, 호환성 보완 1997 년 1 월 , HTML 3.2
W3C 에 의해 표준화된 첫 버전 1997 년 12 월 , HTML 4.0
Strict( 엄격 ), Transitional( 변이 ), Frameset( 프레임셋 ) 의 문서형태 제공 1999 년 12 월 , HTML 4.01
접근성 보안 2008 년 1 월 이후 , HTML 5!!!, 현재 진행중
3. HTML 요소
보편적인 형태 <tag attribute1=“value1” attribute=“value2”> 보이는 내용 </tag>
기본 <!doctype html>-------------- 어떤 문서인지 선언 <html>------------------------- 시작 <head>------------------------- 머리부분 시작 ( 메타데이타 , 스타일 , 스크립트 ,
타이틀 등 )
</head>------------------------- 머리부분 끝 <body>------------------------ 내용부분 시작 ( 화면에 표시되는 부분들 )
</body>------------------------ 내용부분 끝 </html>------------------------ 끝
4. 이전 HTML 과 HTML 5 의 차이점 (계속 )
선언 간소화 HTML 이전 버전 선언
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/stric-t.dtd">
HTML 5 선언 <!doctype html>
4. 이전 HTML 과 HTML 5 의 차이점
새로운 마크업<header>
<nav>
section id=“content"
<aricle>
<aricle>
<aricle>
<footer>
div id=“header”
div id=“side-bar”
div id=“content”div
class=“post”
div class=“post”
div class=“post”
div id=“footer”
HTML 4 HTML 5
5. HTML 5 의 요소 – 컨텐츠모델 ( 계속 )
Flow
Phrasing
InteractiveEmbedde
d
metadata
Heading
Sectioning
5. HTML 5 의 요소 – 컨텐츠모델
Metadata 나머지 내용의 표현이나 행동을 설정하거나 , 또는 현재 문서와 다른
문서의 관계를 설정하거나 , 혹은 미분류 정보들 포함 Flow content
문서 바디와 응용프로그램에서 사용되는 요소 대부분 포함 Sectioning content
heading 과 footer 의 유효범위 정의 Heading content
센셕의 header 정의
5. HTML 5 의 요소 – 컨텐츠모델
Pharsing content 문서의 텍스트이며 , 또한 그 텍스트를 문단 내부 레벨로 마크업하는 요소들 Pharsing content 가 모여서 문단 (paragraph) 을 구성
Embedded content 다른 자원을 문서에 삽입하는 컨텐츠 , 또는 문서에 삽입된 다른 사전에서
유래한 컨텐츠 (Ex. MathML, SVG, 이미지 , 비디오 , 플래시 등 )
Interactive content 사용자의 상호작용을 위해 특별히 의도된 요소
transparent content 부모 요소의 콘텐츠에 따라 콘텐츠의 분류가 바뀌는 요소
5. HTML 5 의 요소 – 구조 ( 계속 )
Header 소개나 내비게이션 기능들의 묶음을 나타내는 요소로 보통 섹션의 제목 ,
목차나 검색창 , 로고 등을 포함할 수도 있다 .
Section 문서나 어플리케이션의 섹션을 나타내는 요소로 문서의 구조를 나타내기 위해
h1, h2, h3, h4, h5, h6 요소들과 같이 사용될 수 있다 . 기사와 같은 배포형식이라면 Article 요소를 사용합니다 .
5. HTML 5 의 요소 - 구조
Nav 내비게이션을 위해 구성된 섹션으로 사이트의 전반적인 이동을 위한
내비게이션과 페이지 전체를 이동하는 내비게이션을 구성할 때 사용될 수 있다 .
Article 문서내의 독립적인 글을 나타내는 요소로 블로그 글이나 뉴스 본문 등이
이에 해당한다 .
Footer 섹션의 하단을 나타내고 저자나 저작권 등을 포함할 수 있다 .
5. HTML 5 의 요소 – 그 밖의 요소 ( 계속 )
video, audio 비디오나 오디오 콘텐츠를 넣기 위해 사용된다 . 스크립트로 제어할 수 있게
스크립트 API 가 제공된다 . source 요소로 여러 개의 미디어를 추가할 수 있다 .
Embed 플러그인 콘텐츠를 넣을 때 사용된다 .
style, script style 요소와 scrip 요소의 type 속성이 생략 가능해졌다 . style 요소의
기본 type 값은 “ text/css”, script 요소의 기본 type 값은 “ text/javascript” 이기 때문에 둘 다 type 요소를 생략할 수 있게 되었다 .
5. HTML 5 의 요소 – 그 밖의 요소 ( 계속 )
Progress 다운로드 상태바처럼 작업의 진행상황을 나타낼 때 사용된다 .
Meter 분량이나 수량을 나타낼 때 사용된다 .
Time 날짜나 시간을 나타낼 때 사용된다 .
Canvas 그래픽이나 게임과 같이 동적인 비트맵 이미지를 구현할 때 사용된다 .
5. HTML 5 의 요소 – 그 밖의 요소
Command 사용자가 행할 수 있는 명령 기능을 나타낼 때 사용된다 .
Detail 사용자의 필요에 의해서 사용할 수 있게 제공되는 추가적인 정보나 기능을
나타낼 때 사용된다 .
Input input 요소의 type 속성으로 다음과 같은 다양한 형식을 사용할 수 있게
되었다 . tel, search, url, email, datatime, date, month, week, time, datetime-local, number, range, color. 이러한 속성을 사용해서 달력이나 컬러 픽커와 같은 기능을 브라우저에서 제공할 수 있다 .
5. HTML 5 의 요소 – 새로운 속성 ( 계속 )
Target base 요소에는 a 요소와 마찬가지로 target 속성을 지정할 수 있다 .
HTML4 에서 strict DTD를 사용할 때에는 target 을 쓸 수 없었지만 iframe 과 같이 웹에서 이미 유용하게 사용하고 브라우저에서 지원도 많이 되고 있기 때문에 HTML5 에서는 사용할 수 있다 .
Autofocus input 요소의 type 속성이 hidden 일 때를 제외하고 input, select,
textarea, button 요소에 autofocus 속성이 추가되었다 . 이 속성은 문서가 load 되었을 때 폼에 포커스가 되게 한다 .
5. HTML 5 의 요소 – 새로운 속성 ( 계속 )
Placeholder placeholder 속성의 값은 input 이나 textarea 요소에 값이
입력되기 전에 힌트 정보로 표시된다 . 포커스를 받기 전까지 place-holder 값이 표시되고 포커스를 받거나 값이 입력되면 표시된 값이 사라진다 .
Ex) <input type=“name” name=“fullName” placeholder=“ 박태환” >
5. HTML 5 의 요소 – 새로운 속성 ( 계속 )
Form input, output, select, textarea, button, fieldset 요소에 form
속성을 지정하여 form 요소의 밖에 콘트롤을 위치할 수 있게 되었다 . 참고로 form 속성은 안에 입력된 값을 서버로 전송할 수 있다 .
Required input 요소의 type 속성이 hidden, image 이거나 button 요소의
속성이 submit 인 경우를 제외하고 input 과 textarea 요소에 required 속성이 추가되었다 . 이 속성은 사용자가 반드시 값을 입력해야 한다는 것을 의미한다 . boolean 속성이다 .
Ex) <input type=“text” required >
5. HTML 5 의 요소 – 새로운 속성
Async 속성을 지정하여 가능한 빨리 스크립트를 비동기적으로 실행할 수 있다 .
src 속성이 없을 경우 , 사용해서는 안된다 . boolean 속성이다 . defer 속성과 같이 사용할 수도 있다 .
async : 무조건 스크립트 먼저 defer : 페이지 파싱 완료 후 스크립트 실행 (async 보다 우선적으로 실행 )
none( 둘 다 없을때 ) : 스크립트 자원을 가져오면 파싱 중 종료하여 실행
Scope style 요소에 scoped 속성을 지정하여 문서의 특정 부분에만 스타일이
적용되도록 할 수 있다 . boolean 속성 .
5. HTML 5 의 요소 – 변경된 요소 ( 계속 )
A href 속성이 없는 a 요소를 사용하여 링크 자리 (placeholder link) 를
표시할 수 있다 . 이 요소는 안에 버튼과 같은 상호작용하는 요소가 없다면 전체 문단 , 리스트 , 표 , 섹션 등을 모두 포함할 수 있다 .( 배너처럼 )
1. <a href="hyperlink.html"> 다른페이지로 이동 </a>3. <a href="hyperlink.html">4. <section>5. <h1> 제목 </h1>6. <p> 구문 컨텐츠 </p>7. </section>8. </a>
5. HTML 5 의 요소 – 변경된 요소
Menu menu 요소가 툴바나 컨텍스트 메뉴를 위해서 개선되었다 .
Strong strong 요소가 강한 강조가 아니라 중요함을 나타낸다 .
5. HTML 5 의 요소 – 변경된 속성 ( 계속 )
Border img 요소의 border 속성은 “ 0” 값을 지정해야 한다 . CSS 를 사용하는 것이 더 권장된다 .
Language script 요소의 language 속성은 “ javascript” 값 ( 대소문자 구분 없음 )
을지정해야 하고 type 속성의 값과 일관되어야 한다 . 특별한 목적이 있지 않은 한 language 속성은 생략할 수 있다 .
5. HTML 5 의 요소 – 변경된 속성
Name a 요소의 name 속성보다는 id 속성을 사용하는 것이 권장된다 .
Summary table 요소의 summary 속성은 HTML5 의 다른 대안을 이용해서
표시하는 것이 더 권장된다 .
5. HTML 5 의 요소 – 사라진 속성 ( 계속 )
Basefont, big, center, font, s, strike, tt, u 이 요소들은 표현에 관련된 요소이기 때문에 HTML5 에 정의되지 않았다 .
frame, frameset, noframes 이 요소들은 콘텐츠를 내비게이션할 때 사용성과 접근성에 영향을 미치기
때문에 HTML5 에 정의되지 않았다 .
5. HTML 5 의 요소 – 사라진 속성 ( 계속 )
Applet 이 요소는 object 요소로 대체되었다 .
Isindex 이 오래된 요소는 다른 폼 콘트롤 요소로 대체되었다 .
Dir 이 요소는 ul 요소로 대체되었다 .
6.
Applet 이 요소는 object 요소로 대체되었다 .
Isindex 이 오래된 요소는 다른 폼 콘트롤 요소로 대체되었다 .
Dir 이 요소는 ul 요소로 대체되었다 .
1. HTML 5 참고문헌
실전 HTML5 가이드 : http://webstandards.or.kr/html5/ 2010 년 HTML 5 오픈 컨퍼런스를 통해 공개된 문서 위 문서는 Creative Commons Attribution Share-Alike Licence v3.0 하에 있다 .
위 라이선스 하에 지켜야 할 것은 저작자 표시 , 비영리 사용 , 변경금지이다 .
위 홈페이지에서 동영상으로 볼 수 있으며 , 인쇄하여 볼 수 있다 .
HTML5 Open Reference : http://html5ref.clearboth.org/doku.php?id=start
유니버설 웹 스튜디오인 클리어보스 HTML 5 그룹에서 만든 문서 , 현재는 베타버전으로 2012 년 HTML 5 명세가 표준 권고안으로 확정되면 변경 내용을 반영하여 정식버전을 만들 계획이라고 한다 . HTML 5 의 각 요소와 속성 , 이벤트에 대한 레퍼런스
Q & A
끝