ݺߣ

ݺߣShare a Scribd company logo

HTML 5 개요

•Download as PPTX, PDF•
•
BongSoo Jang
BongSoo Jang

금년도 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.

1 of 30
Downloaded 23 times
HTML 5 개요 비트모바일 장봉수
목 차  HTML 5 란?  HTML의 역사  HTML의 요소  HTML5와 이전 HTML의 차이점  HTML5의 요소(변경점들)
1. HTML 5 란?  HyperText Markup Language  구조적 문서를 만들 수 있는 방법 제공  웹 표준 기구인 W3C에서 만들고 있는 차세대 웹 표준안으로 MS, 모질라, 애플, 구글, 오페라 등 거의 모든 웹 브라우저 벤더가 참여하고 있는 산업표준.
2. HTML의 역사 출처 : http://www.scoroncocolo.com/HTML5.html
2. HTML의 역사  1991년 말, 버너스리, 인터넷에서 문서를 HTML 요소로 부르기 시작  1995년 11월 24일, HTML 2.0   1997년 1월, HTML 3.2   Strict(엄격), Transitional(변이), Frameset(프레임셋)의 문서형태 제공 1999년 12월, HTML 4.01   W3C에 의해 표준화된 첫 버전 1997년 12월, HTML 4.0   IETF RFC, 호환성 보완 접근성 보안 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/strict.dtd"> HTML 5 선언  <!doctype html>
4. 이전 HTML과 HTML 5의 차이점  새로운 마크업 div id=“header” div id= “si debar ” div id=“content” div class=“post” div class=“post” div class=“post” <header> section id=“content" <aricle> <na v> <aricle> <aricle> div id=“footer” <footer> HTML 4 HTML 5
5. HTML 5의 요소 – 컨텐츠모델(계속) Flow Phrasing Heading Interactive Embedded Sectioning metadata
5. HTML 5의 요소 – 컨텐츠모델  Metadata   Flow content   문서 바디와 응용프로그램에서 사용되는 요소 대부분 포함 Sectioning content   나머지 내용의 표현이나 행동을 설정하거나, 또는 현재 문서와 다른 문서의 관계를 설정하거나, 혹은 미분류 정보들 포함 heading과 footer의 유효범위 정의 Heading content  센셕의 header 정의
5. HTML 5의 요소 – 컨텐츠모델  Pharsing content    문서의 텍스트이며, 또한 그 텍스트를 문단 내부 레벨로 마크업하는 요소들 Pharsing content가 모여서 문단(paragraph)을 구성 Embedded content   Interactive content   다른 자원을 문서에 삽입하는 컨텐츠, 또는 문서에 삽입된 다른 사전에서 유래한 컨텐츠(Ex. MathML, SVG, 이미지, 비디오, 플래시 등) 사용자의 상호작용을 위해 특별히 의도된 요소 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   Embed   비디오나 오디오 콘텐츠를 넣기 위해 사용된다. 스크립트로 제어할 수 있 게 스크립트 API가 제공된다. source 요소로 여러 개의 미디어를 추가할 수 있다. 플러그인 콘텐츠를 넣을 때 사용된다. 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, datetimelocal, 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 요소에 값이 입력되기 전에 힌트 정보로 표시된다. 포커스를 받기 전까지 placeholder 값이 표시되고 포커스를 받거나 값이 입력되면 표시된 값이 사라진다. 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 속성과 같이 사용할 수도 있다.   defer : 페이지 파싱 완료 후 스크립트 실행(async보다 우선적으로 실행)   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   Isindex   이 요소는 object 요소로 대체되었다. 이 오래된 요소는 다른 폼 콘트롤 요소로 대체되었다. Dir  이 요소는 ul 요소로 대체되었다.
6.  Applet   Isindex   이 요소는 object 요소로 대체되었다. 이 오래된 요소는 다른 폼 콘트롤 요소로 대체되었다. Dir  이 요소는 ul 요소로 대체되었다.
1. HTML 5 참고문헌  실전 HTML5 가이드 : http://webstandards.or.kr/html5/   위 문서는 Creative Commons Attribution Share-Alike Licence v3.0 하에 있다.  위 라이선스 하에 지켜야 할 것은 저작자 표시, 비영리 사용, 변경금지이다.   2010년 HTML 5 오픈 컨퍼런스를 통해 공개된 문서 위 홈페이지에서 동영상으로 볼 수 있으며, 인쇄하여 볼 수 있다. HTML5 Open Reference : http://html5ref.clearboth.org/doku.php?id=start  유니버설 웹 스튜디오인 클리어보스 HTML 5 그룹에서 만든 문서, 현재는 베타버전 으로 2012년 HTML 5 명세가 표준 권고안으로 확정되면 변경 내용을 반영하여 정식 버전을 만들 계획이라고 한다. HTML 5의 각 요소와 속성, 이벤트에 대한 레퍼런스
Q&A
끝

More Related Content

HTML 5 개요

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