2. html5 시맨틱태그
- 2. <!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>
- 3. <!DOCTYPE html> <html lang=“ko”> <head> <meta charset=“utf-8”> <title> 간단한 문서 만들기 </title> </head> <body> <p> HTML5를 이용한 문서</p> </body> </html>
- 4. <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>
- 5. HTML 5 시맨틱 태그 WHAT? 태그 이름만 보고도 역할을 짐작할 수 있는 태그 WHY? 검색 엔진에서 쉽게 웹 문서 내용 검색 웹 보조 기구에서 웹 문서를 정확하게 판독 어떤 장치에서나 똑같이 문서 해석
- 6. header nav HTML5&css3가 적용된 엔나비 모바일 section footer
- 7. HTML 5 시맨틱 태그 <figure>, <figcaption> • <figure> - 캡션을 붙이려는 대상 지정 • 다양한 요소를 <figure>로 묶을 수 있다 • <figcaption> - 캡션을 붙인다 • <figcaption>은 <figure> 안에서만 사용할 수 있다
- 8. <figure> <img src=/eunsimk/2-html5-16011839/"images/fall1.jpg" alt="산굼부리 물들다"> <img src="images/fall2.jpg" alt="바람 가득한 억새 바다"> <img src="images/fall3.jpg" alt="길 끝에는 무엇이 있을까"> <figcaption><b>산굼부리의 가을</b> - 단풍 든 담쟁이, 바람 가득한 억새 바다, 그리고 억샛길</figcaption> </figure>
- 9. HTML 5 시맨틱 태그 <mark> • HTML4에서는 클래스 스타일을 이용 클래스 스타일 이름을 기억했다가 필요한 부분에 <span> 요소나 <div> 요소 • <mark> 요소는 CSS를 이용하여 강조할 부분의 배경색이나 글자색을 지정
- 10. <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 to refer...</p> <p>This specification actually now defines the next generation of HTML after <mark>HTML5</mark>. <mark>HTML5</mark> reached Last Call at the WHATWG in October 2009, ...</p>
- 11. HTML 5 시맨틱 태그 <time> • 브라우저에서 인식하는 시간 : 시간을 표시할 때는 yyyy-mm-dd 형식을 따른다. • pubdate 속성 : 0 또는 1값을 가지므로 필요할 때만 삽입 ex)발행날짜 등 • 브라우저 화면에 표시되는 시간 : 사용자가 알아보기 쉬운 방법으로 표시
- 12. <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>
- 13. • embed : 플러그인 컨텐츠 표시 • progress : 시간이 걸리는 작업 과정 표시 • meter : 측정값 표시 • ruby, rt, rp : 루비 언어 표현 • canvas : 동적인 비트맵 그래픽 표시 • command : 사용자 실행 명령어 표시 • details : 사용자 요청 후에 얻은 콘트롤이나 부가 정보 표시 • output : 출력 결과 표시
- 14. • a : href 없이 사용하면 ‘널 링크’로 사용. • address : 요소는 섹션 개념을 통해 새로운 영역 표시 • b : 텍스트를 진하게 표시할 뿐만 아니라, 제품을 소개할 때의 제품명, 문서 초록에서의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하려고 할 때 사용. • hr : 단락 단위로 주제를 바꾸려고 할 때 사용. • i : 텍스트를 기울어지게 표시할 뿐만 아니라, 선박 이름, 머리 속의 생각, 다른 언어에서 숙어, 기술적인 용어, 생물종 표시처럼 소리나 분위기를 대체하는 문구 등에 사용. • menu : 실제 문서 메뉴 정보를 제공하는 데 사용. • small : 세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시 • strong : 단순히 진하게 표시하는 것보다 더 중요한 정보를 표시
- 16. basefont big center font s strike tt u frame frameset noframe acronym applet isindex dir
- 17. align link vlink alink text background bgcolor border cellpadding cellspacing clear compact frame frameborder height hspace vspace marginheight marginwidth noshade nowrap rules scrolling size type valign width