2. html5 시맨틱태그

477 views

Published on

html5-시맨틱태그

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
477
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2. html5 시맨틱태그

  1. 1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"> <title>간단한 문서 만들기</title></head><body> <p>HTML4를 이용한 문서</p></body></html>
  2. 2. <!DOCTYPE html><html lang=“ko”><head> <meta charset=“utf-8”> <title> 간단한 문서 만들기 </title></head><body> <p> HTML5를 이용한 문서</p></body></html>
  3. 3. <header> <h3> <h1>..</h1> <h3>..</h3><h1> <nav>..</nav> <nav> </header> <section> <aside> <h2> <section> <h2> <h2>..</h2> <article> <h3> <article> <h3> <h3>..</3> <article> … <h3> </article> <article> <h3> <article> … </section> <article> <aside> <h3> <h2>..</h2> <h3>..</h3> </aside>http://www.seosara.com <footer> <h3>..</h3> </footer>
  4. 4. HTML 5 시맨틱 태그WHAT? 태그 이름만 보고도 역할을 짐작할 수 있는 태그WHY? 검색 엔진에서 쉽게 웹 문서 내용 검색 웹 보조 기구에서 웹 문서를 정확하게 판독 어떤 장치에서나 똑같이 문서 해석
  5. 5. header nav HTML5&css3가 적용된 엔나비 모바일sectionfooter
  6. 6. HTML 5 시맨틱 태그<figure>, <figcaption> • <figure> - 캡션을 붙이려는 대상 지정 • 다양한 요소를 <figure>로 묶을 수 있다 • <figcaption> - 캡션을 붙인다 • <figcaption>은 <figure> 안에서만 사용할 수 있다
  7. 7. <figure> <img src="images/fall1.jpg" alt="산굼부리 물들다"> <img src="images/fall2.jpg" alt="바람 가득한 억새 바다"> <img src="images/fall3.jpg" alt="길 끝에는 무엇이 있을까"> <figcaption><b>산굼부리의 가을</b> - 단풍 든 담쟁이, 바람 가득한 억새바다, 그리고 억샛길</figcaption></figure>
  8. 8. HTML 5 시맨틱 태그<mark>• HTML4에서는 클래스 스타일을 이용  클래스 스타일 이름을 기억했다가 필요한 부분에 <span> 요소나 <div> 요소• <mark> 요소는 CSS를 이용하여 강조할 부분의 배경색이나 글자색을 지정
  9. 9. <head><style> mark{background-color:#FFFFB3;font-weight:bold;padding:1px}</style></head><body><h1>Introduction</h1><p> <mark>"HTML5" </mark> has at various times been used torefer...</p><p>This specification actually now defines the next generation ofHTML after <mark>HTML5</mark>. <mark>HTML5</mark> reached LastCall at the WHATWG in October 2009, ...</p>
  10. 10. HTML 5 시맨틱 태그<time> • 브라우저에서 인식하는 시간 : 시간을 표시할 때는 yyyy-mm-dd 형식을 따른다. • pubdate 속성 : 0 또는 1값을 가지므로 필요할 때만 삽입 ex)발행날짜 등 • 브라우저 화면에 표시되는 시간 : 사용자가 알아보기 쉬운 방법으로 표시
  11. 11. <section id="page"> <header class="summary"> <h1> <a title="One day JavaScript conference" class="url"href="http://2009.full-frontal.org/">Full Frontal</a> </h1> <h2>자바스크립트 컨퍼런스 <time datetime="2009-11-20T09:00">2009년 11월 20일</time> </h2></header> <section id="register"> <a href="http://2010.full-frontal.org/">2010년 컨퍼런스 일정 보기</a></section>
  12. 12. • embed : 플러그인 컨텐츠 표시• progress : 시간이 걸리는 작업 과정 표시• meter : 측정값 표시• ruby, rt, rp : 루비 언어 표현• canvas : 동적인 비트맵 그래픽 표시• command : 사용자 실행 명령어 표시• details : 사용자 요청 후에 얻은 콘트롤이나 부가 정보 표시• output : 출력 결과 표시
  13. 13. • a : href 없이 사용하면 ‘널 링크’로 사용.• address : 요소는 섹션 개념을 통해 새로운 영역 표시• b : 텍스트를 진하게 표시할 뿐만 아니라, 제품을 소개할 때의 제품명, 문서 초록에서의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하려고 할 때 사용.• hr : 단락 단위로 주제를 바꾸려고 할 때 사용.• i : 텍스트를 기울어지게 표시할 뿐만 아니라, 선박 이름, 머리 속의 생각, 다른 언어에서 숙어, 기술적인 용어, 생물종 표시처럼 소리나 분위기를 대체하는 문구 등에 사용.• menu : 실제 문서 메뉴 정보를 제공하는 데 사용.• small : 세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시• strong : 단순히 진하게 표시하는 것보다 더 중요한 정보를 표시
  14. 14. http://freehtml5templates.com/http://www.alistapart.com/articles/previewofhtml5http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/section4.html
  15. 15. basefont big center fonts strike tt uframe frameset noframeacronym applet isindex dir
  16. 16. align link vlink alinktext background bgcolor bordercellpadding cellspacing clear compactframe frameborder height hspacevspace marginheight marginwidthnoshade nowrap rules scrollingsize type valign width

×